A Tour of Your Project

Get oriented in the files create-next-app generated — what app/, page.js, layout.js, public/, and package.json each do.

Step 1 of 3

What create-next-app made for you

Open the my-first-next-app folder in your code editor (VS Code is free and popular: open it, then File → Open Folder). It can look like a lot, but only a few files matter to start. Here are the ones you'll touch most:

app/ — your routes live here. This is where you'll spend almost all your time.
app/page.js — the home page, shown at /.
app/layout.js — the shared shell wrapped around every page (it holds the <html> and <body> tags).
app/globals.css — global styles for the whole site.
public/ — static files like images, served from the site root (/).
package.json — lists your dependencies and the npm scripts (dev, build, start).

You can safely ignore node_modules/ (the downloaded packages) and .next/ (build output) — Next.js manages those for you.

Web Standard — folder structure is your URL structure

Everything inside app/ maps to a URL. A folder is a path segment; a page.js inside it is the page shown at that path. This file-system routing is the heart of Next.js — once it clicks, the whole framework feels simple.

Learn more on MDN

Next.js — Project structure

TYPESCRIPTREAD ONLY