āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š nextjs/app/api-reference/file-conventions/src-folder ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
src folder as an alternative to the root pages directory.
related:
links:
- app/getting-started/project-structure{/* The content of this doc is shared between the app and pages router. You can use the <PagesOnly>Content</PagesOnly> component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
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 folder.
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 folder, move the app Router folder or pages Router folder to src/app or src/pages respectively.
<Image alt="An example folder structure with the `src` folder" srcLight="/nextjs/light/project-organization-src-directory.png" srcDark="/nextjs/dark/project-organization-src-directory.png" width="1600" height="687" />
Good to know:
- The
/publicdirectory should remain in the root of your project.- Config files like
package.json,next.config.jsandtsconfig.jsonshould remain in the root of your project..env.*files should remain in the root of your project.src/apporsrc/pageswill be ignored ifapporpagesare present in the root directory.- If you're using
src, you'll probably also move other application folders such as/componentsor/lib.- If you're using Proxy, ensure it is placed inside the
srcfolder.- If you're using Tailwind CSS, you'll need to add the
/srcprefix to thetailwind.config.jsfile in the content section.- If you are using TypeScript paths for imports such as
@/*, you should update thepathsobject intsconfig.jsonto includesrc/.
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā