{/* 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. */}

作为在项目根目录中使用特殊的 Next.js `app` 或 `pages` 目录的替代方案，Next.js 也支持将应用程序代码置于 `src` 文件夹下的常见模式。

这将应用程序代码与主要位于项目根目录下的项目配置文件分离开来，这种做法受到一些个人和团队的青睐。

要使用 `src` 文件夹，请将 `app` 路由文件夹或 `pages` 路由文件夹分别移动到 `src/app` 或 `src/pages`。

<Image
  alt="一个包含 `src` 文件夹的示例文件结构"
  srcLight="/JS/docs/next.js/latest/light/project-organization-src-directory.png"
  srcDark="/JS/docs/next.js/latest/dark/project-organization-src-directory.png"
  width="1600"
  height="687"
/>

> **需要注意**:
>
> - `/public` 目录应保留在项目的根目录中。
> - 诸如 `package.json`、`next.config.js` 和 `tsconfig.json` 等配置文件应保留在项目的根目录中。
> - `.env.*` 文件应保留在项目的根目录中。
> - 如果根目录中存在 `app` 或 `pages`，则 `src/app` 或 `src/pages` 将被忽略。
> - 如果您正在使用 `src`，您可能还需要移动其他应用程序文件夹，例如 `/components` 或 `/lib`。
> - 如果您正在使用 Proxy，请确保将其放置在 `src` 文件夹内。
> - 如果您正在使用 Tailwind CSS，您需要在 `tailwind.config.js` 文件的 [内容部分](https://tailwindcss.com/docs/content-configuration) 中添加 `/src` 前缀。
> - 如果您正在使用 TypeScript 路径进行诸如 `@/*` 的导入，您应该更新 `tsconfig.json` 中的 `paths` 对象以包含 `src/`。