A modern, feature-rich starter template for building web applications with Next.js, TypeScript, Tailwind CSS, Shadcn UI, Prettier, and ESLint.
- Next.js 14 - The React framework for production
- React 19 - The library for web and native user interfaces
- TypeScript - Strongly typed programming language that builds on JavaScript
- Tailwind CSS - A utility-first CSS framework
- Shadcn UI - Re-usable components built with Radix UI and Tailwind CSS
- ESLint - Pluggable JavaScript linter
- Prettier - Opinionated code formatter
- App Router - Next.js App Router for file-based routing
- Dark Mode Support - Built-in dark mode support
- Client & Server Components - Properly structured for Next.js App Router
- Node.js 18.17 or later
- npm, yarn, pnpm, or bun
-
Clone this repository:
git clone https://github.com/yourusername/next-typescript-template.git my-project cd my-project -
Install dependencies:
npm install # or yarn install # or pnpm install # or bun install
-
Start the development server:
npm run dev # or yarn dev # or pnpm dev # or bun dev
-
Open http://localhost:3000 with your browser to see the result.
next-typescript-template/
├── public/ # Static assets
├── src/
│ ├── app/ # App router pages
│ ├── components/ # React components
│ │ └── ui/ # Shadcn UI components
│ └── lib/ # Utility functions
├── .eslintrc.js # ESLint configuration
├── .prettierrc # Prettier configuration
├── next.config.js # Next.js configuration
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
This template uses Shadcn UI for UI components. You can add more components using the CLI:
npx shadcn@latest add [component-name]For example:
npx shadcn@latest add dropdown-menu
npx shadcn@latest add avatarThis template uses Tailwind CSS for styling. You can customize the theme in tailwind.config.js.
TypeScript configuration is in tsconfig.json. You can customize it to fit your project's needs.
This template includes a consolidated GitHub workflow to automate common tasks:
The CI/CD workflow runs the following tasks in parallel:
- Lint: Automatically runs ESLint to check code quality
- TypeCheck: Verifies TypeScript types
- Build: Ensures the project builds successfully
All tasks are visualized in a matrix in the GitHub Actions UI, making it easy to see which tasks passed or failed.
- Dependabot: Automatically creates pull requests for dependency updates weekly
- Groups minor and patch updates together
- Ignores major updates to avoid breaking changes
To use these workflows, make sure your repository has the appropriate permissions:
- Go to Settings > Actions > General
- Ensure "Read and write permissions" is selected under "Workflow permissions"
This template follows Next.js App Router's model of using Server Components by default, with Client Components where needed for interactivity.
- Render on the server
- Don't include client-side JavaScript
- Can't use hooks or event handlers
- Better performance for static content
- Include the
'use client'directive at the top - Support interactivity with hooks and event handlers
- Used for interactive UI elements
When adding interactivity:
- Create a Client Component with the
'use client'directive - Add your interactive logic (event handlers, hooks)
- Import and use it within your Server Components
For more information, see the Next.js documentation on Client and Server Components.
You can deploy this template to any platform that supports Next.js, such as:
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
This project is licensed under the MIT License - see the LICENSE file for details.