Printing and PDF export are disabled for this content. View it online at Full Stack Learning Simplified.

Next.js Project Structure

When create-next-app finishes, you get a folder full of files. Here are the ones that matter.

The main folders and files

folder layout

my-app/
├─ app/                 # your pages and layouts live here
│  ├─ layout.tsx        # the shared shell around every page
│  ├─ page.tsx          # the home page ("/")
│  └─ globals.css       # global styles
├─ public/              # static files: images, icons, robots.txt
├─ next.config.ts       # Next.js settings
├─ package.json         # scripts and dependencies
└─ tsconfig.json        # TypeScript settings

What each part does

File / folder	What it is for
app/	The heart of your app. Folders here become URLs (this is the App Router).
app/layout.tsx	Wraps every page — put your `<html>`, `<body>`, header and footer here.
app/page.tsx	The page shown at the site root, `/`.
public/	Files served as-is. `public/logo.png` is available at `/logo.png`.
next.config.ts	Turn features on or off, configure images, and more.
package.json	Lists your dependencies and the `dev`, `build`, and `start` commands.

The scripts you will use

Inside package.json you will find these commands. Run them with npm run <name>:

Command	What it does
npm run dev	Start the development server (with Turbopack).
npm run build	Build an optimised version for production.
npm run start	Run the built production app.

Note: You will spend most of your time inside the app folder. The next chapters are all about what you can put there.

Next.js Architecture Takeaway: Next.js App Router uses Server Components by default, rendering HTML on the server to minimize client JavaScript bundle size.

Next.js Performance Tip: Only mark components with 'use client' when they require browser interactivity, state (useState), or browser APIs.

Free preview. Sign in and subscribe to unlock all 982 lessons across 31 courses.

Loading lesson…

Printing and PDF export are disabled for this content. View it online at Full Stack Learning Simplified.

Next.jsNext.js 16.2 Pro

Next.js Project Structure

When create-next-app finishes, you get a folder full of files. Here are the ones that matter.

The main folders and files

folder layout

my-app/
├─ app/                 # your pages and layouts live here
│  ├─ layout.tsx        # the shared shell around every page
│  ├─ page.tsx          # the home page ("/")
│  └─ globals.css       # global styles
├─ public/              # static files: images, icons, robots.txt
├─ next.config.ts       # Next.js settings
├─ package.json         # scripts and dependencies
└─ tsconfig.json        # TypeScript settings

What each part does

File / folder	What it is for
app/	The heart of your app. Folders here become URLs (this is the App Router).
app/layout.tsx	Wraps every page — put your `<html>`, `<body>`, header and footer here.
app/page.tsx	The page shown at the site root, `/`.
public/	Files served as-is. `public/logo.png` is available at `/logo.png`.
next.config.ts	Turn features on or off, configure images, and more.
package.json	Lists your dependencies and the `dev`, `build`, and `start` commands.

The scripts you will use

Inside package.json you will find these commands. Run them with npm run <name>:

Command	What it does
npm run dev	Start the development server (with Turbopack).
npm run build	Build an optimised version for production.
npm run start	Run the built production app.

Note: You will spend most of your time inside the app folder. The next chapters are all about what you can put there.

Next.js Architecture Takeaway: Next.js App Router uses Server Components by default, rendering HTML on the server to minimize client JavaScript bundle size.

Next.js Performance Tip: Only mark components with 'use client' when they require browser interactivity, state (useState), or browser APIs.

Free preview. Sign in and subscribe to unlock all 982 lessons across 31 courses.