🧱 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.