SaaS AI Template

A modern, production-ready SaaS AI 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

🔧 Essential SaaS Components

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
Blog System: Markdown-based blog with frontmatter
Case Studies: Showcase your success stories
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

🚀 Core Features Overview

💳 Credits System

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

🔐 Third-party Authentication

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-url

🎨 AI Image Generation

Multi-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 needed

🚀 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

edgeone pages dev

Open your browser Visit http://localhost:8088 to see your app.

📁 Project Structure

saas-starter-template/
├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── 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

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

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

🎯 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

Happy building! 🚀

Framework	Next.js
Use Case	SaaS,Starter

Framework	Next.js
Use Case	SaaS,Starter