Read the project structure

The important folders are small enough to understand. app contains routes and route-specific files, while public contains files served from the site root.

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

Inside app, ordinary files are also safe to colocate. A folder becomes public only through a special file such as page.tsx or route.ts. Files including 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 application code in folders such as components or lib. This makes ownership visible without inventing one global folder for every kind of file.

Files in public bypass the component and module pipelines and are served from /. The .next directory is generated output: inspect it when debugging, but never treat it as source or edit it by hand.

Replace the generated home page with a heading and short introduction. Add a route-local component beside it and a plain file to public; confirm only the special page file creates a URL and the public file is available from a root-relative path.