Pricing
PURCHASE OPTIONSโ€‹
PRICING GUIDANCEโ€‹
๐ŸŽ‰ EdgeOne Free Planย Redemption๏ผUnlock the Worldโ€™s First Free CDN with China Access !
Back to Templates

Saas Starter

A modern, production-ready SaaS starter template built with Next.js 14, TypeScript, and Tailwind CSS.

View Demo
FrameworkNext.js
Use CaseSaaS,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.

SaaS Starter TypeScript 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

  1. Clone the repository
git clone https://github.com/your-username/saas-starter-template.git
cd saas-starter-template
  1. Install dependencies
npm install
# or
yarn install
  1. Start development server
npm run dev
# or
yarn dev
  1. 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

  1. 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
    
  2. Configure environment variables:

    # In your .env file
    CONTENTFUL_SPACE_ID=your_space_id
    CONTENTFUL_ACCESS_TOKEN=your_access_token
    CONTENTFUL_ENVIRONMENT=master
    
  3. 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.

  1. Sign up for Google Analytics to get the tracking code
  2. 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

Deploy with EdgeOne Pages

๐Ÿค Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

๐Ÿ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

๐Ÿ™ Acknowledgments

๐Ÿ“ž Support

If you have any questions or need help with the template:


Happy building! ๐Ÿš€