Saas Starter
A modern, production-ready SaaS starter template built with Next.js 14, TypeScript, and Tailwind CSS.
SaaS Starter Template
A modern, production-ready SaaS starter template built with Next.js 14, TypeScript, and Tailwind CSS.
โจ Features
๐จ Beautiful Design System
- Clean, modern UI
- Fully responsive design
- Dark/Light mode support
- Customizable color schemes
- Beautiful animations and transitions
๐ง Essential SaaS Components
- Authentication: Login, register, password reset
- Landing Pages: Hero, features, pricing, testimonials, FAQ
- Blog System: Markdown-based blog with frontmatter
- Case Studies: Showcase your success stories
- Dashboard: User dashboard and analytics
- Payment Integration: Stripe-ready payment system
๐ Developer Experience
- TypeScript: Full type safety
- Next.js 14: Latest App Router with SSG support
- Tailwind CSS: Utility-first CSS framework
- Component Library: Reusable UI components
- ESLint & Prettier: Code formatting and linting
- Responsive Design: Mobile-first approach
๐ Content Management
- Markdown Blog: Easy content creation with frontmatter
- Case Studies: Showcase client work and results
- SEO Optimized: Meta tags, structured data
- Fast Performance: Optimized for speed and SEO
๐ Quick Start
Prerequisites
- Node.js 18+
- npm or yarn
Installation
- Clone the repository
git clone https://github.com/your-username/saas-starter-template.git
cd saas-starter-template
- Install dependencies
npm install
# or
yarn install
- Start development server
npm run dev
# or
yarn dev
- Open your browser Visit http://localhost:3000 to see your app.
๐ Project Structure
saas-starter-template/
โโโ src/
โ โโโ app/ # Next.js App Router
โ โ โโโ about/ # About page
โ โ โโโ blog/ # Blog pages
โ โ โโโ cases/ # Case studies
โ โ โโโ globals.css # Global styles
โ โ โโโ layout.tsx # Root layout
โ โ โโโ page.tsx # Homepage
โ โโโ components/ # React components
โ โ โโโ ui/ # Basic UI components
โ โ โโโ layout/ # Layout components
โ โ โโโ sections/ # Page sections
โ โโโ lib/ # Utility functions
โโโ content/ # Markdown content
โ โโโ blog/ # Blog posts
โ โโโ cases/ # Case studies
โโโ public/ # Static assets
โโโ package.json
โโโ tailwind.config.js
โโโ tsconfig.json
โโโ next.config.js
๐จ Customization
Colors and Theming
The template uses CSS custom properties for theming. You can customize colors in src/app/globals.css
:
:root {
--primary: 142 76% 36%; /* Green primary color */
--primary-foreground: 355 7% 97%;
--secondary: 240 4.8% 95.9%;
/* ... more variables */
}
Components
All components are built with TypeScript and Tailwind CSS. They're located in src/components/
:
ui/
- Basic UI components (Button, Card, Badge, etc.)layout/
- Layout components (Header, Footer)sections/
- Page sections (Hero, Features, Pricing, etc.)
AI Assistance
You can modify the code through dialogue in Cursor.
Here are some example Prompts:
- Change the theme color: Change the project's primary color to pink
- Add language support: Add French support to the project
- Modify the page: Modify the homepage, removing the xx module
Local Content Management
Blog Posts
Create new blog posts in content/blog/
with frontmatter:
---
title: "Your Blog Post Title"
date: "2024-01-15"
excerpt: "A brief description of your post"
author: "Your Name"
tags: ["SaaS", "Next.js", "Tutorial"]
readTime: "5 min read"
---
# Your Blog Post Content
Write your content here in Markdown...
Case Studies
Create new case studies in content/cases/
Contentful Integration
Quick Setup
-
Import data structure to your Contentful space:
# Install Contentful CLI npm install -g contentful-cli # Login to Contentful contentful login # Import provided data models contentful space import --config cms/contentful/contentful-models-config.json
-
Configure environment variables:
# In your .env file CONTENTFUL_SPACE_ID=your_space_id CONTENTFUL_ACCESS_TOKEN=your_access_token CONTENTFUL_ENVIRONMENT=master
-
Export content to local markdown:
npm run contentful:export
What's included:
- Data Models: Pre-configured Blog and Case content types
- Multi-language: Support for English (
en-US
) and Chinese (zh-CN
) - Rich Content: RichText conversion to Markdown
- Asset Management: Automatic image download and localization
- Language Mapping:
en
โen-US
,zh
โzh-CN
Output structure:
content/
โโโ en/blog/*.md # English blog posts
โโโ zh/blog/*.md # Chinese blog posts
public/images/contentful/ # Downloaded images
For detailed setup and configuration, see cms/contentful/README.md
.
Internationalization
Our project supports multiple languages, you can find all the translation files in the dictionaries/
directory. For detailed internationalization setup and configuration, please see dictionaries/README.md
.
Data Analytics
The project has built-in support for Google Analytics data analytics.
- Sign up for Google Analytics to get the tracking code
- Set the tracking code in the environment variables
NEXT_PUBLIC_GA_ID=G-xxxxx
๐ฑ Pages Included
- Homepage (
/
) - Complete landing page with all sections - About (
/about
) - About page with team and company info - Blog (
/blog
) - Blog listing and individual post pages - Cases (
/cases
) - Case studies and success stories - Pricing - Included in homepage with anchor links
๐ฏ SEO Features
- Meta tags optimization
- OpenGraph and Twitter Card support
- Structured data for better search results
- Sitemap generation ready
- Fast loading times
- Mobile-first responsive design
robot.txt and sitemap.xml
The project provides scripts to automatically generate robot.txt and sitemap.xml.
You only need to modify the SITE_URL in the gen:seo command in package.json to your own site address, then run:
npm run gen:seo
to generate them.
๐ Deploy
๐ค Contributing
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add some amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
๐ License
This project is licensed under the MIT License - see the LICENSE file for details.
๐ Acknowledgments
- Built with Next.js
- Styled with Tailwind CSS
- Icons from Lucide React
๐ Support
If you have any questions or need help with the template:
- Create an issue on GitHub
- Email us at support@saas-starter.com
- Join our Discord community
Happy building! ๐