Next.js Project Structure Explained: Files and Folders

The Next.js project structure is small and predictable. create-next-app generates a standard layout where the app directory holds your routes and the files at the project root configure the build, TypeScript, and dependencies. This walkthrough covers each part so you can find files quickly and know where new ones belong.

A fresh project starts with this top level:

text

my-app/
  app/
  public/
  next.config.ts
  package.json
  tsconfig.json

Two folders hold your work, and the files at the root configure the rest. A next-env.d.ts file also appears after the first dev run, generated and managed by Next.js.

The app directory

The app directory is where the App Router reads your routes. Every folder inside it maps to a URL segment, and a file named page.tsx turns a segment into something a browser can open.

App.tsx

// app/page.tsx
export default function HomePage() {
  return <h1>Home</h1>;
}

This file creates the home route at /. A page.tsx must default-export a React component, and that component becomes the page for its folder. A layout.tsx at the same root is the required root layout that wraps every page.

Routing files at a glance

Next.js recognizes a small set of file names. Each one adds a different layer of UI to a route.

The page and route files are the two that make a segment public. The others shape how the page is presented, and each is optional except for the root layout that is required at the top of the app directory.

Root config files

The files at the project root configure the tooling. package.json lists dependencies and the dev, build, and start scripts.

The next.config.ts file holds build options, and tsconfig.json holds TypeScript settings. The generated next-env.d.ts file exposes Next.js types and should not be edited by hand.

public and src

The public folder stores static assets such as images and fonts, and files there are served from the root path. A file at public/profile.png is available at /profile.png. The optional src folder can hold the app directory when you want to separate application code from config files.

For a closer look at the route folder itself, read Understanding the app Directory and Its Conventions. To see how layouts nest across routes, read Layouts in Next.js: Root Layouts and Nested Layouts Explained.