Create a Next.js App

The official way to start is create-next-app. It scaffolds a project with sensible defaults.

  npx create-next-app@latest my-next-app

The CLI prompts you for options:

  ✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … No
✔ Would you like to use App Router? … Yes
✔ Would you like to use Turbopack for `next dev`? … Yes

Always choose App Router — it is the current standard. The older Pages Router still works but is not recommended for new projects.

Run the Development Server 

  cd my-next-app
npm run dev

Open http://localhost:3000. Edit app/page.tsx and save — changes appear instantly with hot reload.

Project Structure (Initial) 

  my-next-app/
├── app/
│   ├── layout.tsx       # Root layout (wraps all pages)
│   ├── page.tsx         # Home page → /
│   ├── globals.css      # Global styles
│   └── favicon.ico
├── public/              # Static assets (images, fonts)
├── next.config.ts       # Next.js configuration
├── package.json
├── tsconfig.json
└── tailwind.config.ts   # If Tailwind was selected

Key Files

app/layout.tsx — root HTML shell:

  export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="en">
            <body>{children}</body>
        </html>
    );
}

app/page.tsx — home page:

  export default function Home() {
    return (
        <main>
            <h1>Hello, Next.js!</h1>
            <p>Welcome to JS Code Camp</p>
        </main>
    );
}

npm Scripts 

  {
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}
  
  npm run dev      # Development server (port 3000)
npm run build    # Production build
npm run start    # Serve production build
npm run lint     # Run ESLint

TypeScript vs JavaScript

TypeScript is recommended. If you skipped it during setup, rename .tsx files to .jsx and remove type annotations. For new projects, stick with TypeScript — Next.js has excellent built-in support.

Environment Variables

Create .env.local for secrets (never commit this file):

  DATABASE_URL=postgresql://localhost:5432/mydb
NEXT_PUBLIC_API_URL=https://api.example.com
  • Variables without NEXT_PUBLIC_ are server-only
  • Variables with NEXT_PUBLIC_ are exposed to the browser
  // Server component — both work
const dbUrl = process.env.DATABASE_URL;

// Client component — only NEXT_PUBLIC_ vars
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

Useful CLI Flags

Skip prompts with flags:

  npx create-next-app@latest my-app --typescript --tailwind --eslint --app --no-src-dir

You’re ready to explore the project structure and build your first routes.