Next Template

A production-ready Next.js 15+ starter template with modern UI components, advanced features, and optimized tooling. Perfect for building performant web applications with TypeScript and App Router architecture.

Key Features

✨ Core Stack

• Next.js 15 with Turbopack
• TypeScript 5 + React 19
• Tailwind CSS
• shadcn/ui component library

🚀 Main Features

• App Router architecture
• MDX content support with Shiki syntax highlighting
• Authentication-ready patterns
• Internationalization (i18n) foundations
• Server Actions & API routes examples
• Optimized SEO and metadata
• Built-in theme system

📦 UI Toolkit

• 40+ pre-configured shadcn/ui components
• Customizable theme system with CSS variables
• Animated components (Hover, Loading, etc)
• Data Table with sorting/filtering
• Form validation with React Hook Form
• Sonner toast notifications

⚙️ Dev Experience

• Strict ESLint/TypeScript config
• Pre-commit hooks
• Docker production setup
• CI/CD ready configuration
• Component auto-imports
• Utilities for path aliases

Layouts and Pages

src/app/
  ├── (auth)/                       # 认证相关页面 (Route Groups)
  │   ├── login/                    # 登录
  │   │   ├── page.tsx              # 登录页面
  │   │   └──.../
  │   ├── register/                 # 注册
  │   │   ├── page.tsx              # 注册页面
  │   │   └──.../
  │   └──.../
  ├── (home)/        	            # 首页 (Route Groups)
  │   ├── example/                  # 示例
  │   │   ├── [slug]/page.tsx       # Dynamic route
  │   │   ├── layout.tsx            # 示例 layout
  │   │   ├── page.tsx              # 示例 pay
  │   │   └── .../                  # 其他子目录
  │   ├── layout.tsx                # 首页 layout
  │   ├── page.tsx                  # 首页 page
  │   └── .../
  └── layout.tsx                    # 根 layout

• 根 layout：Layout
• 首页 layout：HomeLayout
• 示例 layout：ExampleLayout

UI

UI 库：shadcn/ui
项目配置文件：components-json

Theming

Docs
修改 css 变量自定义主题颜色：globals.css

Icons

Lucide

Fetching Data

/example/fetching-data/page.tsx

MDX

/example/mdx/page.mdx

Authentication

• Login route
• auth.config.ts
• auth.ts
• middleware.ts
• LoginForm
• Logout

Setting up NextAuth.js

openssl rand -base64 32

Then, in your auth.config.ts, add your generated key to the secret field:

trustHost: true,
secret: your-secret-key

Form

• Form
• LoginForm

MySQL (Prisma)

• .env
• prisma/schema.prisma
• prisma.ts
• mysql-demo.ts
• Dockerfile

rm -rf node_modules/.prisma
npx prisma migrate dev --name init
npx prisma generate

Middleware

• middleware.ts

Parallel Routes

• layout.tsx

Intercepting Routes

• layout.tsx