Project Structure

Project Structure

Project Structure and Import Aliases

The generator leaves a small tree. Everything in it is a route, a configuration file, or a static asset:

bookshelf-web after create-next-app, with two routes addedTSX

bookshelf-web/
├─ src/
│  ├─ app/               routes; every folder here is a URL segment
│  │  ├─ layout.tsx      root layout: <html> and <body>, wraps every page
│  │  ├─ page.tsx        the / route,  globals.css  its stylesheet
│  │  └─ books/
│  │     ├─ page.tsx       the /books route
│  │     └─ [id]/page.tsx  /books/1, /books/2, ...
│  └─ lib/books.ts       plain modules; no route is created here
├─ public/               copied verbatim; public/next.svg is /next.svg
├─ next.config.ts        framework configuration (Section 5.12.3)
└─ tsconfig.json         import aliases and the generated route types

Two rules explain the layout. First, only src/app/ creates routes, and inside it only the reserved file names — page, layout, route, loading, error and the rest of Routing with the App Router — are reachable. A folder holding nothing but components is invisible to the router, which is why colocation works: keep a route's components, tests and CSS module beside its page.tsx and nothing leaks into the URL space. Second, public/ is copied byte for byte and served from the root, so public/logo.png is /logo.png, never /public/logo.png.

Import aliases

--import-alias "@/*" wrote a paths entry into tsconfig.json. Next.js 10,514 reads paths and baseUrl from tsconfig.json — or jsconfig.json — directly, so there is no separate bundler alias to keep in sync:

The generated alias, plus one of your ownJSON

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@ui/*": ["./src/components/ui/*"]
    }
  }
}

With the first entry alone, import { books } from "@/lib/books" resolves from anywhere in the project, and moving a component between route folders no longer breaks a chain of ../../.. prefixes. Keep one alias unless a real problem forces more.

Two paths are missing from the tree because they are generated and ignored by Git 1,932 : next-env.d.ts, holding the framework's ambient types, and .next/types/, the source of the PageProps<"/books/[id]"> and LayoutProps<"/"> helpers that type a page's props.

MENU

Import aliases