Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/justmalhar/nextjs-saas-boilerplate
A no BS modern, customizable landing page template for SaaS products built with Next.js, React, and Tailwind CSS. This template provides a solid foundation for quickly launching your SaaS product with a professional and attractive landing page.
https://github.com/justmalhar/nextjs-saas-boilerplate
nextjs react saas template vercel vercel-deployment
Last synced: 9 days ago
JSON representation
A no BS modern, customizable landing page template for SaaS products built with Next.js, React, and Tailwind CSS. This template provides a solid foundation for quickly launching your SaaS product with a professional and attractive landing page.
- Host: GitHub
- URL: https://github.com/justmalhar/nextjs-saas-boilerplate
- Owner: Justmalhar
- Created: 2024-10-13T02:33:29.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-11-08T17:26:47.000Z (10 days ago)
- Last Synced: 2024-11-08T18:25:49.960Z (10 days ago)
- Topics: nextjs, react, saas, template, vercel, vercel-deployment
- Language: TypeScript
- Homepage: https://nextjs-saas-boilerplate-navy.vercel.app
- Size: 1.23 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js SaaS Starter Template
A modern, customizable landing page template for SaaS products built with Next.js, React, and Tailwind CSS. This template provides a solid foundation for quickly launching your SaaS product with a professional and attractive landing page.
## Features
- 🚀 Built with Next.js 13 and React 18
- 🎨 Styled with Tailwind CSS for easy customization
- 📱 Fully responsive design
- 🌙 Dark mode by default
- 🔧 Easy to customize content through a centralized content object
- 🎭 Animations powered by Framer Motion
- 🧩 Modular components for easy extension and modification
- 📊 Pricing table with highlighted popular plan
- 💬 Testimonials section
- ❓ FAQ section with accordion
- 🔒 Accessibility features included
- 🚥 SEO-friendly
## Tech Stack
- [Next.js](https://nextjs.org/)
- [React](https://reactjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Framer Motion](https://www.framer.com/motion/)
- [shadcn/ui](https://ui.shadcn.com/)
- [Lucide React](https://lucide.dev/)
## Getting Started
### Prerequisites
- Node.js 14.6.0 or newer
- npm or yarn
### Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/nextjs-saas-starter.git
cd nextjs-saas-starter
```
2. Install the dependencies:
```bash
npm install
# or
yarn install
```
3. Run the development server:
```bash
npm run dev
# or
yarn dev
```
4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Customization
### Content
The main content of the landing page is stored in the `defaultContent` object within the `page.tsx` file. You can easily modify the text, features, pricing plans, and other content by updating this object.
### Styling
The project uses Tailwind CSS for styling. You can customize the design by modifying the Tailwind classes in the JSX or by updating the `tailwind.config.js` file to change global styles, colors, and other design tokens.
### Components
The landing page is built using modular components. You can find these components in the `components` directory. To add new sections or modify existing ones, you can create or edit the corresponding component files.
## Deployment
To deploy your Next.js SaaS starter template, you can use various platforms that support Next.js applications. Here are a few options:
1. [Vercel](https://vercel.com/) (recommended for Next.js apps)
- Connect your GitHub repository to Vercel
- Vercel will automatically detect that you're using Next.js and set up the build configuration
- Deploy with `git push` to your default branch
2. [Netlify](https://www.netlify.com/)
- Connect your GitHub repository to Netlify
- Set the build command to `next build` and the publish directory to `.next`
- Deploy with `git push` to your default branch
3. [AWS Amplify](https://aws.amazon.com/amplify/)
- Connect your GitHub repository to AWS Amplify
- Amplify will automatically detect that you're using Next.js and set up the build configuration
- Deploy with `git push` to your default branch
For more deployment options and detailed instructions, refer to the [Next.js deployment documentation](https://nextjs.org/docs/deployment).
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the project
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgments
- [Next.js Documentation](https://nextjs.org/docs)
- [React Documentation](https://reactjs.org/docs)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [Framer Motion Documentation](https://www.framer.com/motion/)
- [shadcn/ui Documentation](https://ui.shadcn.com/)
## Support
If you have any questions or need help with the template, please open an issue in the GitHub repository