As an alternative to having the special Next.js
pages directories in the root of your project, Next.js also supports the common pattern of placing application code under the
This separates application code from project configuration files which mostly live in the root of a project, which is preferred by some individuals and teams.
To use the
src directory, move the
app Router folder or
pages Router folder to
Good to know
/publicdirectory should remain in the root of your project.
- Config files like
tsconfig.jsonshould remain in the root of your project.
.env.*files should remain in the root of your project.
src/pageswill be ignored if
pagesare present in the root directory.
- If you're using
src, you'll probably also move other application folders such as
- If you're using Middleware, ensure it is placed inside the
- If you're using Tailwind CSS, you'll need to add the
/srcprefix to the
tailwind.config.jsfile in the content section.