Setup & Project Structure

Install Node.js

Next.js runs on Node.js. Install the LTS version from nodejs.org. To check that it worked, open a terminal and run:

node --version
npm --version

Both commands should print a version number. Next.js 16 needs Node 20 or newer.

Create a new project

The official scaffolder is create-next-app. Run it in any folder:

npx create-next-app@latest my-app

It will ask a series of questions. For this course, answer No to TypeScript and Yes to the App Router. You can pick whatever style options you like.

Then start the dev server:

cd my-app
npm run dev

Open http://localhost:3000. Edits to your files reload the page automatically.

What's in the folder

my-app/
├─ app/              # your pages and layouts live here
│  ├─ layout.js      # shared shell for every page
│  ├─ page.js        # the home page ('/')
│  └─ globals.css    # global styles
├─ public/           # static files served as-is
├─ next.config.mjs   # framework configuration
├─ package.json      # scripts and dependencies
└─ jsconfig.json     # editor / path aliases (optional)

• **app/** is the only folder you'll spend real time in early on. Files here become pages.
• **public/** is for assets you want at a known URL (favicon, robots.txt, images). A file at public/cat.png is served at /cat.png.
• **next.config.mjs** lets you customize the build. Most apps barely touch it.
• **package.json** has the scripts you'll run most: dev, build, start.