You are currently viewing documentation for the canary channel of Next.js.
src Directory
As an alternative to having the special Next.js app
or pages
directories in the root of your project, Next.js also supports the common pattern of placing application code under the src
directory.
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 src/app
or src/pages
respectively.
Good to know:
- The
/public
directory should remain in the root of your project.- Config files like
package.json
,next.config.js
andtsconfig.json
should remain in the root of your project..env.*
files should remain in the root of your project.src/app
orsrc/pages
will be ignored ifapp
orpages
are present in the root directory.- If you're using
src
, you'll probably also move other application folders such as/components
or/lib
.- If you're using Middleware, ensure it is placed inside the
src
directory.- If you're using Tailwind CSS, you'll need to add the
/src
prefix to thetailwind.config.js
file in the content section.- If you are using TypeScript paths for imports such as
@/*
, you should update thepaths
object intsconfig.json
to includesrc/
.
Was this helpful?