Read the project structure

The important folders are small enough to learn in one pass. app holds routes and route-specific files. public holds files served from the site root.

app/layout.tsx is the required root layout. app/page.tsx is the home page. app/globals.css holds global styles. next.config.ts changes framework behavior. tsconfig.json configures TypeScript and path aliases. package.json records scripts and dependencies. Files outside app do not become routes just because they export components.

Inside app, you can colocate helpers safely. A folder becomes public only through a special file such as page.tsx or route.ts. Files like layout.tsx, loading.tsx, error.tsx, and not-found.tsx add behavior to a route segment instead of creating separate URLs.

Keep route-specific components and data functions near the route until another route genuinely shares them. Put broadly shared code in folders like components or lib. That makes ownership visible without one global dumping ground for every file type.

Files in public bypass the component pipeline and are served from /. Drop public/logo.svg and open http://localhost:3000/logo.svg. You get the raw file. The .next directory is generated output: inspect it when debugging, but never edit it by hand.

Replace the generated home page with a heading and short intro. Add a route-local component beside page.tsx and a plain file to public. Confirm only the page.tsx file creates a URL and the public file loads from a root-relative path.

Open package.json and run npm run dev once from memory before you need it in production. The scripts block is the map for every later lesson that mentions build or start commands.