A starter boilerplate with Next.js, TypeScript, Tailwind CSS, Prettier, ESLint, Husky, Lint-Staged, and CommitLint — designed to help you write consistent, clean, and maintainable code with a smooth development workflow.
- TypeScript – static type checking for JavaScript
- Tailwind CSS – utility-first CSS framework
- Prettier – consistent code formatting
- ESLint – pluggable JavaScript/TypeScript linter
- Husky – Git hooks made easy
- Lint-Staged – run scripts on staged files
- CommitLint – enforce conventional commit messages
This setup enforces consistent code style, prevents common errors, and keeps your commit history clean—streamlining your development workflow.
This boilerplate supports both routing strategies:
- Pages Router setup: see
pages-router-setup/ - App Router setup: see
app-router-setup/
Both folders include the same development tooling and configuration. Choose the one that fits your project needs.
- Node.js 18+ installed on your machine
- Git installed
- Your preferred code editor (VS Code recommended)
- Clone the repository
git clone https://github.com/Timonwa/next-tailwind-ts-linting-boilerplate.git
cd next-tailwind-ts-linting-boilerplate-
Choose your routing strategy
Navigate to either the Pages Router or App Router setup:
# For Pages Router
cd pages-router-setup
# OR for App Router
cd app-router-setup- Install dependencies
npm install- Start the development server
npm run dev-
Open your browser
Visit http://localhost:3000 to see your app running!
- Pre-commit hooks will automatically lint and format your code when you commit
- Commit messages will be validated to follow conventional commit standards
- TypeScript will check for type errors as you code
- ESLint will catch potential bugs and enforce code quality
- Prettier will format your code consistently
Feel free to customize the configuration files to match your preferences:
- ESLint rules:
eslint.config.mjs - Prettier settings:
.prettierrc - TypeScript config:
tsconfig.json - Commit message rules:
commitlint.config.ts
- Next.js Documentation – Learn about Next.js features and API
- TypeScript Documentation – TypeScript handbook and reference
- Tailwind CSS Documentation – Utility classes and customization
- ESLint Documentation – Linting rules and configuration
- Prettier Documentation – Code formatting options
- Next.js Learn Course – Interactive Next.js tutorial
- Conventional Commits – Commit message specification
- Husky Documentation – Git hooks setup and usage
- TypeScript with React – React TypeScript patterns
Want to know how this boilerplate was built from scratch? Check out GUIDE.md for a detailed step-by-step walkthrough of every tool and configuration.
- Issues: Found a bug or have a suggestion? Open an issue
- Email: For other inquiries, contact [email protected]
If this boilerplate helped you save time and build better applications, please give it a star! It helps other developers discover this resource.
This project is open source and available under the MIT License.
Built with ❤️ by Timonwa