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
• React
• Tailwind CSS
• Framer Motion
• shadcn/ui
• Lucide React

Getting Started

Prerequisites

• Node.js 14.6.0 or newer
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/nextjs-saas-starter.git
   cd nextjs-saas-starter
   

2. Install the dependencies:

   npm install
   # or
   yarn install
   

3. Run the development server:

   npm run dev
   # or
   yarn dev
   

4. Open 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 (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

   • 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

   • 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.

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 file for details.

Acknowledgments

• Next.js Documentation
• React Documentation
• Tailwind CSS Documentation
• Framer Motion Documentation
• shadcn/ui Documentation

Support

If you have any questions or need help with the template, please open an issue in the GitHub repository