A modern, production-ready SaaS AI template built with Next.js 14, TypeScript, and Tailwind CSS.
- Clean, modern UI
- Fully responsive design
- Dark/Light mode support
- Customizable color schemes
- Authentication: Login, register, password reset
- Third-party Login: Google, GitHub OAuth integration
- Credits System: Complete credit management with earning, spending, and history
- AI Image Generation: Multi-model AI image generation capabilities
- Admin Management System: User management, billing management with environment variable admin configuration
- Blog System: Markdown-based blog with frontmatter
- Case Studies: Showcase your success stories
- Payment Integration: Stripe-ready payment system
- 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
Complete credit management system supporting user credit earning, spending, and history tracking:
Features:
- New user signup bonus: 50 credits
- Purchase plan rewards: Different credits based on plan tier
- Credit spending: AI image generation and other features consume credits
- Credit history: Complete record of credit earning and spending
- Balance inquiry: Real-time current credit balance
Support for mainstream OAuth providers for quick login:
Supported Providers:
- Google OAuth 2.0
- GitHub OAuth
Features:
- One-click login/registration
- Automatic account linking
- Secure callback handling
- New user signup credit rewards
Configuration Required:
# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
# App Configuration
NEXT_PUBLIC_APP_URL=your-app-urlMulti-model AI image generation capabilities:
Supported Models:
- OpenAI DALL-E 3
- Stability AI (Stable Diffusion)
- Other compatible models
Features:
- Multiple image sizes: 256x256, 512x512, 768x768, 1024x1024, 1024x1792, 1792x1024
- Credit billing system
- Real-time balance checking
- Image preview and download
- Multi-language prompt support
- Error handling and retry mechanism
Usage Flow:
- User inputs prompt
- Select model and size
- System checks credit balance
- Call AI model to generate image
- Deduct corresponding credits
- Return generated image
Environment Variables:
# OpenAI
OPENAI_API_KEY=your-openai-api-key
# Stability AI
STABILITY_API_KEY=your-stability-api-key
# Other AI Providers
# Add corresponding API keys as neededComplete admin management system supporting comprehensive platform administration:
Core Features:
- User Management: View user list, user details, credit management
- Billing Management: View order list, order details, revenue statistics
- Multi-language Support: Chinese and English interface switching
- Responsive Design: Desktop and mobile device compatibility
Admin Configuration:
Configure admin emails through environment variables, supporting multiple administrators:
# Admin email configuration (multiple emails separated by commas)
ADMIN_EMAILS=admin1@example.com,admin2@example.com,admin3@example.comFeatures:
- Environment variable-driven admin permission control
- Secure authentication and authorization mechanisms
- Real-time data statistics and visualization
- Complete user lifecycle management
- Order and payment record tracking
Access:
Administrators can access the admin management system through the /admin path. The system automatically verifies if the email is configured in the ADMIN_EMAILS environment variable.
- Node.js 18+
- npm or yarn
- 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
edgeone pages dev- Open your browser Visit http://localhost:8088 to see your app.
saas-starter-template/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── admin/ # Admin management system pages
│ │ ├── ai/ # AI image generation pages
│ │ ├── 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
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 */
}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.)
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
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...Create new case studies in content/cases/
-
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 NEXT_PUBLIC_SUPABASE_URL=your-supabse-url NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key SUPABASE_SERVICE_ROLE_KEY=your-supabase-anon-service-role-key STRIPE_WEBHOOK_SECRET=your-stripe-webhooksecret STRIPE_SECRET_KEY=your-stripe-secret-key STRIPE_CALLBACK_URL=site-url NEXT_PUBLIC_APP_URL=site-url -
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.
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.
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
- Meta tags optimization
- OpenGraph and Twitter Card support
- Structured data for better search results
- Sitemap generation ready
- Fast loading times
- Mobile-first responsive design
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.
- 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
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with Next.js
- Styled with Tailwind CSS
- Icons from Lucide React
Happy building! 🚀