Starting a New Project with Next.js + TypeScript

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