Next.js 14+ + Tailwind CSS 3+ + TypeScript Starter

⚡ next-seed-template

Next.js + Tailwind CSS + TypeScript starter with developer tools.

Features

Developer experience first tools only without UI boilerplate:

• 🔋 Next.js with App Router support
• 📘 Type checking TypeScript
• 💄 Integrate with Tailwind CSS
• ⚛️ React 18 with Strict mode
• 📏 Linter with ESLint
• 🚀 Code Formatter with Prettier
• 🐶 Husky for Git Hooks script
• 📐 Lint-staged for running linters and formatter on Git staged files
• 👀 Lint git commit with Commitlint
• ⚙️ Consistent coding styles across editors and IDEs with EditorConfig
• 🃏 Unit Testing with Jest and React Testing Library
• API Mock with MSW v2

Requirements

• Node.js 20+ and pnpm

Use this template

npx degit Kadphol/next-seed-template <APP NAME>

or using with Create next app

npx create-next-app --example https://github.com/Kadphol/next-seed-template <YOUR_APP_NAME>

Getting started

Run the following command on your local environment:

git clone --depth=1 https://github.com/Kadphol/next-seed-template.git my-project-name
cd my-project-name
pnpm install

To run development mode:

pnpm dev

Open http://localhost:3000 with your favorite browser to see your project.

Project structure

.
├── README.md                       # README file
├── .github                         # GitHub folder
├── .gitlab                         # GitLab folder
├── .husky                          # Husky configuration
├── public                          # Public assets folder
├── src
│   ├── app                         # Next JS App (App Router)
│   ├── components                  # Shared components folder
│   ├── libs                        # Library and utility function folder
│   ├── mocks                       # Mock data and server folder
│   ├── modules                     # Modules components folder
│   ├── styles                      # Styles folder
│   └── types                       # Type definitions
├── .eslintrc.json                  # ESLint configuration
├── .prettierrc                     # Prettier configuration
├── jest.config.ts                  # Jest configuration
├── tailwind.config.js              # Tailwind CSS configuration
├── Dockerfile                      # Dockerfile
└── tsconfig.json                   # TypeScript configuration