A modern, feature-rich template with Next.js 15, shadcn/ui, Zustand, next-themes, and next-intl internationalization. Perfect for kickstarting your next project with powerful built-in features.
Built by LIKEDREAMWALKER with love ❤️
Check out the live demo: nextjs-shadcn-template-alpha.vercel.app
- 🎯 Next.js 15 - Latest React framework with App Router
- 🎨 shadcn/ui - Beautiful and accessible UI components
- 📦 Zustand - Simple and scalable state management
- 🌙 next-themes - Perfect dark mode support
- 🌍 next-intl - Complete internationalization (English & Chinese)
- 💼 TypeScript - Full type safety out of the box
- 🎨 Tailwind CSS - Utility-first CSS framework
- 📱 Responsive Design - Mobile-first approach
- ⚡ Turbopack - Ultra-fast development server
| Technology | Purpose | Version |
|---|---|---|
| Next.js | React Framework | 15.5.0 |
| shadcn/ui | UI Component Library | Latest |
| Zustand | State Management | 5.0.8 |
| next-themes | Theme Management | 0.4.6 |
| next-intl | Internationalization | 4.3.4 |
| TypeScript | Type Safety | 5.x |
| Tailwind CSS | Styling | 4.x |
- Node.js 18.17 or later
- pnpm (recommended) or npm/yarn
-
Clone this repository
git clone https://github.com/ldw-templates/nextjs-shadcn-template.git cd nextjs-shadcn-template -
Install dependencies
pnpm install # or npm install -
Run the development server
pnpm dev # or npm run dev -
Open your browser
Visit http://localhost:3000 to see the result.
nextjs-shadcn-template/
├── src/
│ ├── app/ # App Router (Next.js 13+)
│ │ ├── [locale]/ # Internationalized routes
│ │ ├── layout.tsx # Root layout
│ │ └── globals.css # Global styles
│ ├── components/ # Reusable components
│ │ ├── ui/ # shadcn/ui components
│ │ ├── demo-card/ # Demo showcase component
│ │ ├── theme-button/ # Theme toggle component
│ │ └── language-selector/ # Language switcher
│ ├── providers/ # Context providers
│ │ ├── store-provider.tsx # Zustand store provider
│ │ └── theme-provider.tsx # Theme provider
│ ├── stores/ # Zustand stores
│ │ └── store.ts # Main app store
│ ├── i18n/ # Internationalization
│ │ ├── routing.ts # Locale routing config
│ │ └── request.ts # Request configuration
│ └── lib/ # Utility functions
│ └── utils.ts # Shared utilities
├── messages/ # Translation files
│ ├── en.json # English translations
│ └── zh.json # Chinese translations
└── public/ # Static assets
-
Add the locale to
src/i18n/routing.ts:locales: ["en", "zh", "your-locale"];
-
Create translation file
messages/your-locale.json -
Update the language selector in
src/components/language-selector/index.tsx
Use shadcn/ui CLI to add components:
pnpm dlx shadcn@latest add button
# or
npx shadcn@latest add buttonEdit src/stores/store.ts to add your state and actions:
export type AppState = {
count: number;
// Add your state here
};
export type AppActions = {
incrementCount: () => void;
// Add your actions here
};pnpm dev- Start development serverpnpm build- Build for productionpnpm start- Start production serverpnpm lint- Run ESLint
The easiest way to deploy is using Vercel Platform:
Or deploy to other platforms:
Contributions are welcome! Please feel free to submit a Pull Request.
LIKEDREAMWALKER
- 🏠 Homepage: https://ldwid.com
- 🐙 GitHub: @LikeDreamwalker
- 📁 Templates: @ldw-templates
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js team for the amazing framework
- shadcn for the beautiful UI components
- Vercel for the hosting platform
- All the open-source contributors who made this possible
⭐ If you find this template helpful, please consider giving it a star!