🧱 1. Create the project
npx create-next-app@latest your-project-name \
--typescript \
--app \
--tailwind \
--eslint \
--src-dir \
--import-alias "@/*"
This command sets up a modern and clean base including:
- ✅ App Router
- ✅ TypeScript support
- ✅ TailwindCSS for styling
- ✅ ESLint for clean code
- ✅
src/
as root directory - ✅
@/
alias for cleaner imports
📁 2. Suggested folder structure
/app ← routes using App Router
/src
├── components ← reusable UI components
├── data ← mock data
├── context ← global state
├── hooks ← reusable logic
├── types ← TypeScript types
└── styles ← global styles
/public
└── images ← local assets
🧪 3. First commit
git init
git add .
git commit -m "chore: initialize Next.js app with TypeScript and Tailwind"
💡 This setup is ready to scale. It works for MVPs, real-world products.
✍️ Part of my devlog at buildlogmmd — clear structure, focused progress.