A production-ready, scalable, and actively maintained starter template for building high-quality web apps with Next.js, TypeScript, and Tailwind CSS.
This starter template is designed for developers of all levels — from beginners starting their journey to advanced engineers building scalable applications.
- Next.js 15+ with App Router
- TypeScript – full type safety and custom config
- Tailwind CSS – pre-configured and responsive
- ESLint + Prettier – clean, consistent code
- Scalable folder structure – production standard
- Alias support – easy path management
- Ready for unit & integration testing
- Vercel ready – just push and deploy
Quickly set up your Next.js + TypeScript + TailwindCSS project using the CLI tool:
- 📦 using npm
npx next-ts-app my-awesome-app
- Replace my-awesome-app with your desired project name.
- The CLI will scaffold a fully configured Next.js + TypeScript + TailwindCSS starter for you.
During project creation, you'll be prompted to:
-
Project Name: What's your project name? (e.g.,
my-awesome-app) -
Package Manager: Choose your preferred package manager:
⚡ bun(Recommended - Fastest)🚀 pnpm(Fast & Efficient)🧶 yarn(Reliable)📦 npm(Standard)
-
Husky Integration: Set up Git hooks with Husky for automatic code quality checks:
No(Default - Simpler setup) - Uses thewithout-huskybranch templateYes(Recommended for code quality) - Uses themainbranch template
Without Husky (Default):
⚠️ Git hooks are disabled- ✅ Cleaner setup for simpler projects
- ✅ Uses the
without-huskybranch of the template - 🔧 You can manually add Git hooks later if needed
With Husky (Recommended):
- ✅ Git hooks are automatically configured
- ✅ ESLint and Prettier run on commit
- ✅ Pre-commit hooks ensure code quality
- ✅ Uses the
mainbranch of the template
-
Follow the steps shown: For example, if you choose
bun:cd my-awesome-project bun install bun run devNote: If you pick
bun, make sure Bun is installed (npm install -g bunor visit bun.sh). Forpnpmoryarn, install them first if needed.
The project includes several useful scripts:
# Development
bun run dev # Start development server with Turbopack
bun run build # Create production build
bun run start # Start production server
bun run lint # Run ESLint
bun run lint:fix # Fix ESLint errors
bun run format # Format code with Prettier
bun run format:check # Check code formatting
bun run clear-cache # Clear Next.js cache, reinstall dependencies, and restart dev serverThe clear-cache script is particularly useful when you encounter build issues or need to reset your development environment. It:
- Removes the
.nextdirectory - Reinstalls dependencies without using cache
- Restarts the development server
- For Bun: Install via
npm install -g bun - For pnpm: Install via
npm install -g pnpm - For Yarn: Install via
npm install -g yarn - For npm: Comes with Node.js
After installation, you'll get:
Without Husky (Default - without-husky branch):
- ✅ Next.js 15 with App Router
- ✅ TypeScript configuration
- ✅ Tailwind CSS setup
- ✅ ESLint & Prettier
- ✅ Project structure ready to go
With Husky (main branch):
- ✅ Next.js 15 with App Router
- ✅ TypeScript configuration
- ✅ Tailwind CSS setup
- ✅ ESLint & Prettier configuration
- ✅ Husky Git hooks
- ✅ Pre-commit hooks
- ✅ Project structure ready to go
-
Click Use this template on GitHub.
-
Name your new repository.
-
Click
Create repository. -
Set up locally:
git clone https://github.com/[your-username]/[your-repo].git cd [your-repo] bun install bun run dev
public/ # Public static assets that are served directly
├── assets/ # Static assets directory
│ ├── images/ # Image files (png, jpg, svg, etc.)
│ └── data/ # Static JSON data files
│
src/ # Source code directory
├── app/ # Next.js 13+ App Router directory
│ ├── (landing)/ # Landing page route group (optional)
│ │ ├── _components/ # Page-specific components
│ │ ├── error.tsx # Error boundary for landing page
│ │ ├── loading.tsx # Loading state for landing page
│ │ └── page.tsx # Landing page entry point
│ │
│ ├── (dashboard)/ # Dashboard route group
│ │ ├── _components/ # Dashboard-specific components
│ │ ├── error.tsx # Error boundary for dashboard
│ │ ├── loading.tsx # Loading state for dashboard
│ │ └── page.tsx # Dashboard page entry
│ │
│ ├── layout.tsx # Root layout (shared across all pages)
│ ├── template.tsx # Template for per-page layouts
│ └── providers.tsx # Global context providers (Theme, Auth, etc.)
│
├── components/ # Reusable components directory
│ ├── ui/ # UI primitives (buttons, inputs, cards)
│ │ ├── button.tsx # Button component
│ │ ├── input.tsx # Input component
│ │ └── card.tsx # Card component
│ │
│ ├── layout/ # Layout components
│ │ ├── header.tsx # Header component
│ │ ├── footer.tsx # Footer component
│ │ └── sidebar.tsx # Sidebar component
│ │
│ ├── shared/ # Shared components across features
│ │ ├── ThemeToggle.tsx # Theme toggle component
│ │ └── Analytics.tsx # Analytics component
│ │
│ ├── forms/ # Form-related components
│ │ ├── FormInput.tsx # Form input component
│ │ └── FormSelect.tsx # Form select component
│ │
│ └── icons/ # SVG icon components
│ ├── index.tsx # Icon exports
│ └── SocialIcons/ # Social media icons
│
├── config/ # Application configuration
│ ├── site.ts # Site metadata and configuration
│ ├── routes.ts # Route definitions and constants
│ └── theme.ts # Theme configuration and tokens
│
├── hooks/ # Custom React hooks
│ ├── useAuth.ts # Authentication hook
│ ├── useAnalytics.ts # Analytics hook
│ ├── useDebounce.ts # Debounce utility hook
│ └── useLocalStorage.ts # Local storage hook
│
├── lib/ # Utility libraries and helpers
│ ├── api/ # API client configurations
│ │ ├── axios.ts # Axios instance and interceptors
│ │ └── trpc/ # tRPC client setup
│ │
│ ├── utils/ # Utility functions
│ │ ├── formatter.ts # Data formatting utilities
│ │ └── validators.ts # Validation utilities
│ │
│ └── constants.ts # Application constants
│
├── styles/ # Global styles and CSS
│ ├── globals.css # Global CSS styles
│ ├── theme/ # Theme variables and tokens
│ └── components/ # Component-specific styles
│
├── types/ # TypeScript type definitions
│ ├── index.d.ts # Global type declarations
│ ├── next.d.ts # Next.js type extensions
│ └── custom-types.ts # Custom type definitions
│
├── services/ # Business logic and services
│ ├── auth.service.ts # Authentication service
│ └── analytics.service.ts # Analytics service
│
├── contexts/ # React Context providers
│ ├── ThemeContext.tsx # Theme context
│ └── AuthContext.tsx # Authentication context
│
└── __tests__/ # Test files directory
├── components/ # Component tests
├── hooks/ # Hook tests
├── services/ # Service tests
└── utils/ # Utility function tests
These tools keep your code neat:
- ESLint: Finds code mistakes.
- Prettier: Formats code nicely.
- Tailwind CSS: Organizes styles.
Example rule for imports:
"import/order": [
"error",
{
"groups": ["builtin", "external", "internal"],
"alphabetize": { "order": "asc" }
}
]This template works with:
- Vercel
- Netlify
- AWS
- Docker
Copy .env.example to .env for production settings.
 Salman Ahamed GitHub | LinkedIn | Email |
 Eyachir Arafat GitHub | LinkedIn | Portfolio |
 Md Amzad Hossain GitHub | LinkedIn | Email |
 Hasibul Alam GitHub | LinkedIn | Email |
- New Feature: Interactive Husky selection during project creation
- Template Branches: Support for both
mainandwithout-huskybranches - Enhanced CLI: Better argument handling and help documentation
- Improved UX: Clear feedback about which template is being used
- Better Progress: Enhanced progress indicators and user feedback
- Professional Prompts: Beautiful emojis and improved messaging throughout
- Default Behavior: Husky disabled by default for simpler setup
- Initial Release: Basic CLI functionality
- Package Manager Selection: Support for bun, pnpm, yarn, npm
- Beautiful UI: Progress indicators and colorful output
- Fast Setup: Quick project initialization with degit
Check our CONTRIBUTING GUIDE to contribute.
Free to use under MIT License. See the LICENSE file for details.