A modern, production-ready Next.js 16 template with shadcn/ui, Tailwind CSS v4, TypeScript, and Biome. Features internationalization (i18n), a global UI framework, and comprehensive developer tooling.
- Next.js 16 - Latest React 19 features with App Router & Streaming.
- Internationalization (i18n) - Full support with
next-intl, localized routing, and automatic language detection. - Global UI Framework - Responsive Navbar with localized links, user profile dropdown, and a sticky Footer.
- User Authentication - Next-Auth v4 integration with shared config and middleware protection.
- UX Enhancements - Navigation progress bar (
nextjs-toploader) and rich global notifications (sonner). - Standardized States - Global
loading.tsx(Skeletons) anderror.tsx(Error Boundaries) for a polished experience. - Tailwind CSS v4 - Utility-first CSS with modern oklch color spaces and theming.
- Custom Hooks Library - Built-in hooks for
useDebounce,useLocalStorage,useMediaQuery, etc. - SEO Optimized - Dynamic
sitemap.xml,robots.txt, and automatedhreflangmetadata. - Docker Support - Optimized multi-stage
Dockerfilewith standalone output. - CI/CD - Automated GitHub Actions for linting, testing, and building.
- Conventional Commits - Enforced with Husky and Commitlint.
- Testing - Vitest with React Testing Library and fully typed configuration.
- Node.js 20+
- pnpm (recommended)
- Clone the repository:
git clone https://github.com/Super1Windcloud/next-shadcn-template.git- Install dependencies:
pnpm install-
Configure environment variables (copy
.env.exampleto.env.local). -
Run the development server:
pnpm devpnpm dev- Start development server (port 33333)pnpm build- Build for productionpnpm start- Build and start production serverpnpm lint- Lint code with Biomepnpm fix- Auto-fix formatting/lint issuespnpm test- Run unit tests with Vitestpnpm shadcn- Add new shadcn/ui components
βββ .github/workflows/ # CI/CD (GitHub Actions)
βββ app/[locale]/ # Localized pages (en, zh)
β βββ layout.tsx # Unified layout (Navbar, Footer, Toaster)
β βββ loading.tsx # Global skeleton loading
β βββ error.tsx # Global error handling
βββ i18n/ # i18n routing & request config
βββ messages/ # Translation JSON files (en, zh)
βββ components/
β βββ ui/ # shadcn/ui primitives
β βββ Navbar.tsx # Global navigation
β βββ UserAccountNav.tsx # Auth status & menu
β βββ ModeToggle.tsx # Theme switcher
βββ hooks/ # Custom hooks (debounce, storage, etc.)
βββ lib/ # Shared utilities & configs
βββ proxy.ts # Next.js 16 Interceptor (Auth & i18n)
βββ Dockerfile # Optimized production image
βββ commitlint.config.ts # Commit message rules
This template uses next-intl for localized routing.
- Default Locale:
en - Supported Locales:
en,zh - Routing: Routes are automatically prefixed (e.g.,
/en/dashboard). - Configuration: Easily add public routes in
proxy.tsto skip authentication.
Build the optimized production image:
docker build -t next-shadcn-template .The image leverages Next.js standalone output to ensure the smallest possible footprint.
This project enforces Conventional Commits. Please follow the format:
feat: ...for new featuresfix: ...for bug fixeschore: ...for maintenance
MIT License - see LICENSE for details.