create-next-app and Project Structure

Bootstrapping a Next.js Project

The official way to start a Next.js project is create-next-app. It sets up TypeScript, ESLint, Tailwind CSS, and the App Router with sensible defaults in seconds.

npx create-next-app@latest my-app
cd my-app
npm run dev

Key Directories

• src/app/ — App Router: every folder can be a route segment.
• src/app/layout.tsx — Root layout, wraps every page.
• src/app/page.tsx — The / homepage.
• src/components/ — Shared UI components.
• src/lib/ — Utility functions, data helpers.
• public/ — Static assets served at /.
• next.config.ts — Framework configuration.
• .env.local — Local environment variables (never commit).

my-app/
  src/
    app/
      layout.tsx
      page.tsx
      about/
        page.tsx
  public/
  next.config.ts
  package.json