Next Starter Template

English | 简体中文

A production-ready Next.js starter template with React, TypeScript, Tailwind CSS, shadcn/ui, Prisma, and Docker support.

Features

• Next.js 16 - Latest App Router with React Server Components
• TypeScript - Full type safety with strict mode
• Tailwind CSS v4 - Utility-first styling
• shadcn/ui - Beautiful, accessible components
• Framer Motion - Smooth animations
• Lucide Icons - Beautiful icon library
• Prisma - Type-safe database ORM
• Docker - Containerized deployments
• Rich Text Editor - Tiptap-powered editor with preview modes
• Internal Messages - Admin-created messages with user inbox + read status
• Theme & Locale - Light/dark theme toggle + locale switcher
• Multi-Platform - Deploy to Vercel, Cloudflare, Netlify, Railway, Fly.io, and more

Quick Start

# Clone the repository
npx create-next-app -e https://github.com/h7ml/next-starter next-starter
# Navigate to projectcd next-starter
# Install dependencies
npm install
# Set up environment
cp .env.example .env
# Start development server
npm run dev

Database Setup

# Generate Prisma client
npx prisma generate
# Generate Prisma field type definitions (d.ts)
npm run prisma:types
# Push schema to database
npx prisma db push
# Open Prisma Studio
npx prisma studio

Generated type definitions are written to types/prisma.d.ts.

Internal Messages

• Admins can create and manage internal messages, targeting all users, by role, by status, or by specific user list.
• Users can read messages in /{locale}/dashboard/messages, with read/unread status tracking.
• The dashboard bell surfaces the latest message and links to the inbox.

Admin & Dashboard Features

• Dashboard: overview, posts management, analytics, settings, internal message inbox.
• Admin: user management, post moderation, analytics, settings, internal message management (create/edit/revoke).
• Auth: session-based login, admin-only routes, role checks enforced on server.
• Theme: theme toggle available in header and dashboard.
• Locale: locale switcher in header and dashboard.

Code Quality

# Format code
npm run format
# Check formatting
npm run format:check
# Lint (ESLint + TSLint)
npm run lint
# Fix lint issues
npm run lint:fix
# Type check
npm run typecheck
# One-click fix then full checks
npm run fix:check

Docker Deployment

# Build and run with Docker Compose
docker compose up -d
# Or build manually
docker build -t next-starter .
docker run -p 3000:3000 next-starter

Project Structure

├── app/ # Next.js App Router
│ ├── api/ # API routes
│ ├── docs/ # Documentation page
│ └── page.tsx # Home page
├── components/ # React components
│ ├── layout/ # Layout components
│ ├── sections/ # Page sections
│ ├── providers/ # Context providers
│ └── ui/ # shadcn/ui components
├── lib/ # Utilities
│ ├── db.ts # Prisma client
│ ├── env.ts # Environment validation
│ └── utils.ts # Helper functions
├── types/ # Generated Prisma d.ts types
├── prisma/ # Database
│ └── schema.prisma # Prisma schema
├── Dockerfile # Docker configuration
├── docker-compose.yml # Docker Compose config
├── fly.toml # Fly.io config
├── netlify.toml # Netlify config
├── railway.yaml # Railway config
└── vercel.json # Vercel config

Deploy

Platform	Guide
Vercel	Deploy
Cloudflare Pages	Deploy
Netlify	Deploy
Railway	Deploy
Fly.io	fly launch && fly deploy
Deno Deploy	Deploy

License

MIT License - feel free to use this template for any project.