Next.js with the `src` Directory: Setup and Tradeoffs

The Next.js src directory is an optional layout that separates application code from config files. Instead of keeping the app folder at the root, you move it under src, so src/app holds the router. The change is purely organizational, and the routes and URLs work exactly the same.

text

my-app/
  src/
    app/
      page.tsx
  public/
  next.config.ts

Everything under src is application code. The public folder and the config files stay at the root, which is the point of the layout: a clear split between code and configuration.

How to switch to src

Switching is one file move, and it only takes a moment. Move the router folder with a single command, then restart the dev server:

bash

mv app src/app

Next.js finds the router in src/app automatically. If an app folder also exists at the root, the root one wins and src/app is ignored, so delete the old folder after the move. The move takes seconds, and every route keeps its URL, so nothing about the site changes for visitors.

What stays at the root

The public folder, package.json, next.config.ts, tsconfig.json, and the .env files all stay at the project root. Moving them into src breaks the build, because Next.js resolves them from the top level of the project. The same rule applies to the eslint and gitignore files.

Proxy is the one exception. If you use a proxy.ts file, it belongs inside the src folder. And if you use TypeScript path aliases like @/*, update the paths in tsconfig.json to point into src.

The tradeoffs

The main benefit is clarity: your code sits under one folder and configuration under another, which larger teams often prefer. The cost is one more nesting level, and a few tools need updating.

Tailwind CSS needs a /src prefix in its content config, and import paths may shift after the move. If your project is mostly pages, the extra nesting adds little, but with many config files at the root the separation pays off. For a solo project either layout is fine, so pick whichever keeps your editor tidy.

Verify the move

After the move, run the dev server and then open the home page in your browser:

bash

npm run dev

If the home page loads, Next.js found the router in src/app. If an old app folder still exists at the root, delete it, because it takes priority over src/app.

For the full layout, read Next.js Project Structure Explained. To fix TypeScript paths after switching, read Setting Up Next.js with TypeScript from Scratch.