Next.jsReactSaaS启动器

next-shadcn-clerk-starter — Next.js SaaS模板

作者 fedilayoub

基于 Next.js 的 SaaS 启动器模板，集成 Clerk 自定义认证流程与 shadcn/ui 组件，包含登录、注册、密码重置、邮箱验证和暗色/亮色主题。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-01查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

使用 Clerk 自定义认证组件实现登录、注册、密码重置与邮箱验证

02

提供受保护路由和认证状态管理，可直接扩展为多角色 SaaS 应用

03

UI 基于 shadcn/ui 与 Radix UI 原语，配合 Tailwind CSS 和 Lucide 图标

04

内置暗色/亮色主题切换，使用 next-themes 实现

05

包含多个演示页面，覆盖常见 SaaS 页面结构

06

使用 TypeScript 与 ESLint，开发脚本基于 pnpm 并启用 Turbopack

模板详细介绍

这是一个面向 SaaS 场景的 Next.js 启动器模板，核心是把认证流程和 UI 组件预先搭好。仓库资料显示，它使用 Clerk 实现自定义的认证组件，覆盖登录、注册、密码重置和邮箱验证，并提供受保护路由与认证状态管理。UI 层基于 shadcn/ui 与 Radix UI 原语构建，使用 Tailwind CSS 做样式，Lucide React 提供图标，next-themes 负责暗色/亮色主题切换，整体为响应式设计。模板包含多个演示页面，可直接在此基础上改造成具体产品页面。

开发侧使用 TypeScript 与 ESLint，脚本基于 pnpm，开发服务器启用 Turbopack。使用前需要自行准备 Clerk 凭据，在 .env.local 中配置 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY 与 CLERK_SECRET_KEY，否则认证相关页面无法正常工作。模板采用 MIT 许可，可免费使用、修改和分发，但演示图片、字体、图标等第三方素材需单独核对许可，Clerk 等外部服务也可能产生费用。

Next.jsSaaS启动器

适合你的项目吗？

适用场景

  • 快速搭建需要邮箱密码认证与邮箱验证的 SaaS 产品原型
  • 作为学习 Clerk 自定义认证流程与 shadcn/ui 组件集成的参考项目
  • 在已有演示页面上替换文案与组件，改造成具体业务的管理后台
  • 需要暗色/亮色主题和响应式布局的 Web 应用起步

适合人群

  • 熟悉 Next.js 与 TypeScript、希望跳过认证样板代码的开发者
  • 计划使用 Clerk 作为认证服务并接受其外部依赖的团队
  • 需要 shadcn/ui 组件库与 Tailwind CSS 样式体系的 SaaS 项目
  • 希望以 MIT 许可代码为基础进行二次开发的个人或团队

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    克隆仓库后使用 pnpm install 安装依赖

  2. 2

    在 .env.local 中配置 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY 与 CLERK_SECRET_KEY，凭据需从 Clerk 获取

  3. 3

    使用 pnpm run dev 启动开发服务器，构建与生产启动分别使用 pnpm run build 和 pnpm run start

  4. 4

    Clerk 等外部服务可能产生费用，演示图片、字体、图标等第三方素材需单独核对许可

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 使用前必须自行注册 Clerk 并配置 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY 与 CLERK_SECRET_KEY，否则认证相关页面无法正常工作；Clerk 为外部服务，可能产生费用。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Create a `.env.local` file with your Clerk credentials

README 原文
https://github.com/fedilayoub/next-shadcn-clerk-starter/blob/master/LICENSEhttps://github.com/fedilayoub/next-shadcn-clerk-starter/blob/master/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 92 / 100
技术栈
Next.js · React
网站类型
SaaS · 启动器
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-09-26
截图检查日期
2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 3edbf993d6fdb68dbbd675dd8461e7f42e8fab2b7147eb8f012c2878a517f5da

2026-10-01T00:22:36.096Z

来源文件 / 仓库
# Next.js SAAS Starter Template 

A modern starter template built with Next.js 16, Clerk, and shadcn/ui components. This template provides everything you need to quickly bootstrap a web application with secure authentication, beautiful UI components, and best practices built-in.

![starter](https://github.com/user-attachments/assets/ea030114-653d-4a8b-88e3-d52bb772e553)


## Overview

This starter template solves common authentication challenges and provides a solid foundation for building web applications. It includes:

- Complete authentication flows (Sign In, Sign Up, Password Reset) using custom clerk auth components
- Email verification system
- Responsive and accessible UI components
- Multiple demo pages ready to customize for your specific needs
- Dark/Light mode theming
- TypeScript support
- Modern development tools

  ![starter_dash](https://github.com/user-attachments/assets/eeda326a-15b5-4eea-aa77-a16ec48a73f9)


## Tech Stack

- **Framework**: Next.js 16
- **Authentication**: Clerk
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui + Radix UI primitives
- **Icons**: Lucide React
- **Theme**: next-themes for dark/light mode
- **Development**: TypeScript, ESLint

## Getting Started

1. Clone the repository
2. Install dependencies:
   ```bash
   pnpm install
   ```
3. Set up your environment variables:
   Create a `.env.local` file with your Clerk credentials:
   ```
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
   CLERK_SECRET_KEY=your_secret_key
   ```

4. Run the development server:
   ```bash
   pnpm run dev
   ```

## Available Scripts

- `pnpm run dev` - Starts development server with Turbopack
- `pnpm run build` - Creates production build
- `pnpm run start` - Starts production server
- `pnpm run lint` - Runs ESLint

## Features

### Authentication
- Email/Password authentication
- Email verification flow
- Password reset functionality
- Protected routes
- Authentication state management

### UI/UX
- Responsive design for all screen sizes
- Dark/Light mode support
- Loading states and animations
- Clean and modern UI components
- Accessible components using Radix UI

### Development
- TypeScript for type safety
- ESLint configuration
- Modern development setup with Turbopack
- Organized project structure
- Ready-to-use UI components

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

This project is open source and available under the MIT license.
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

ai-website-cloner-template

ai-website-cloner-template

Clone any website with one command using AI coding agents

Next.js · 启动器

Next.js SaaS Starter

Next.js SaaS Starter

Next.js SaaS Starter 是 Next.js 官方维护的 SaaS 起点模板，定位介于学习资源和可直接部署的脚手架之间。

Next.js · SaaS

Next.js Commerce

Next.js Commerce

Next.js Commerce 是 Vercel 团队维护的电商启动模板，基于 Next.js App Router 构建，采用服务端渲染、React Server Components、Server Actions …

Next.js · 电商

Next-js-Boilerplate

Next-js-Boilerplate

Next-js-Boilerplate 是一个面向 Next.js 16、Tailwind CSS 4 和 TypeScript 的启动器，核心定位是开发者体验优先。

Next.js · 启动器

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog 是一个面向个人技术博客的 Next.js 与 Tailwind CSS 启动模板，其 v2 版本基于 App Router 与 React Server Comp…

Next.js · 博客

next-forge

next-forge

Production-grade Turborepo template for Next.js apps.

Next.js · 启动器