How do you create a new Next.js app, and what is in the project structure?

Q: How do you create a new Next.js app, and what is in the project structure?

**Target Audience:** Beginners preparing for Next.js interviews — no prior Next.js knowledge assumed, basic React helps. **Difficulty:** Easy > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the **Verified** section, against a real run of `create-next-app@16.4.2`, `next build` and `next start` in a lab. ## 1. Why This Even Matters — A Story First Imagine moving into a new flat. You could buy every pipe, socket and shelf yourself and spend a week assembling them, or you could get a flat where the kitchen, the wiring and the shelves are already in place, labelled, and you just start living there. `create-next-app` is the second option. One command gives you a working website with routing, styling, type checking and a development server already connected. The interview question is really two questions: can you get started q

The problem

Question presented to candidate: "You are starting a brand-new Next.js project today. Walk me through how you create it, and then explain what each folder and file in the generated project is for."

What a strong answer should cover:

npx create-next-app@latest (or the pnpm, yarn and bun equivalents), the --yes shortcut for recommended defaults, and the Node.js 20.9 minimum.
The defaults: TypeScript, Tailwind CSS, ESLint, App Router, Turbopack, the @/* import alias and an AGENTS.md file; recent versions also turn on Cache Components in next.config.ts.
The app/ folder is the router: layout.tsx (required root layout with html and body), page.tsx (the / route), globals.css, favicon.ico.
public/ for static files served from /, next.config.ts for framework settings, tsconfig.json with the @/* alias, next-env.d.ts and .next/ as generated files that are not committed.
The scripts dev, build, start, lint and what each does at a high level.

Clarifying questions expected:

"Do we want the src/ folder layout, and do we need Tailwind?" — both are create-next-app choices.
"Is this a new app or are we adding Next.js to an existing React project?" — the second case is a manual install.

Code / implementation expected: Yes — the create command, plus a minimal root layout and page.

nextjs
setup
app-router
project-structure

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners preparing for Next.js interviews — no prior Next.js knowledge assumed, basic React helps. Difficulty: Easy

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the Verified section, against a real run of create-next-app@16.4.2, next build and next start in a lab.

1. Why This Even Matters — A Story First

Imagine moving into a new flat. You could buy every pipe, socket and shelf yourself and spend a week assembling them, or you could get a flat where the kitchen, the wiring and the shelves are already in place, labelled, and you just start living there. create-next-app is the second option. One command gives you a working website with routing, styling, type checking and a develop

The solution is hidden so you can try first

9 min read · 8 sections

Read the code

Creating and running a new app

# Requires Node.js 20.9 or newer
node -v

# Create a project with the recommended defaults (no prompts)
npx create-next-app@latest my-app --yes

# Or choose options explicitly
npx create-next-app@latest my-app --ts --app --src-dir --no-tailwind --eslint --import-alias "@/*"

cd my-app
npm run dev      # next dev   -> http://localhost:3000, hot reload
npm run build    # next build -> optimized production build in .next/
npm run start    # next start -> serves that build

The two files every App Router app needs

// app/layout.tsx — the root layout: required, and the only place for <html> and <body>
import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "My App",
  description: "Built with Next.js",
};

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

// app/page.tsx — the page for the URL "/"
export default function Home() {
  return <h1>Hello, Next.js!</h1>;
}

// app/about/page.tsx — a folder plus a page file makes the URL "/about"
export default function About() {
  return <h1>About us</h1>;
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.