nextjs-init

Next.js Project Scaffold

Create a production-ready Next.js project with App Router, TypeScript, and Tailwind CSS. If the user provides a target, use it as the project name. Otherwise, ask.

Step 1: Run create-next-app

Execute this command, replacing <project-name> with the target:

npx create-next-app@latest <project-name> \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*" \
  --use-pnpm

If the user prefers npm or yarn, swap --use-pnpm accordingly. Default to pnpm.

Step 2: Set Up Directory Structure

Create these directories inside src/:

src/
  app/                  # Routes and layouts (created by create-next-app)
    (auth)/             # Auth route group
    (dashboard)/        # Main app route group
    api/                # API routes
    layout.tsx          # Root layout
    page.tsx            # Landing page
  components/
    ui/                 # Reusable primitives (Button, Input, Card)
    forms/              # Form components
    layout/             # Header, Footer, Sidebar, Nav
  lib/
    utils.ts            # Shared utility functions
    constants.ts        # App-wide constants
  types/
    index.ts            # Shared TypeScript types
  hooks/                # Custom React hooks
  styles/
    globals.css         # Already created by create-next-app

mkdir -p src/{components/{ui,forms,layout},lib,types,hooks,app/{\\(auth\\),\\(dashboard\\),api}}

Step 3: Configure TypeScript

Verify tsconfig.json has these settings. Patch if missing:

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "forceConsistentCasingInFileNames": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Setting	Why
strict: true	Catches type errors early. Non-negotiable.
noUncheckedIndexedAccess	Forces handling of undefined from array/object access
forceConsistentCasingInFileNames	Prevents deploy failures on case-sensitive Linux servers