Skip to main content

源目录

作为在项目根目录中使用特殊 Next.js apppages 目录的替代方案,Next.js 还支持将应用代码放置在 src 目录下的常见模式。

¥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.

要使用 src 目录,请将 app Router 文件夹或 pages Router 文件夹分别移动到 src/appsrc/pages

¥To use the src directory, move the app Router folder or pages Router folder to src/app or src/pages respectively.

很高兴知道

¥Good to know

  • /public 目录应保留在项目的根目录中。

    ¥The /public directory should remain in the root of your project.

  • package.jsonnext.config.jstsconfig.json 等配置文件应保留在项目的根目录中。

    ¥Config files like package.json, next.config.js and tsconfig.json should remain in the root of your project.

  • .env.* 文件应保留在项目的根目录中。

    ¥.env.* files should remain in the root of your project.

  • 如果根目录中存在 apppages,则 src/appsrc/pages 将被忽略。

    ¥src/app or src/pages will be ignored if app or pages are present in the root directory.

  • 如果你使用的是 src,你可能还会移动其他应用文件夹,例如 /components/lib

    ¥If you're using src, you'll probably also move other application folders such as /components or /lib.

  • 如果你使用中间件,请确保将其放置在 src 目录中。

    ¥If you're using Middleware, ensure it is placed inside the src directory.

  • 如果你使用的是 Tailwind CSS,则需要将 /src 前缀添加到 内容部分 中的 tailwind.config.js 文件中。

    ¥If you're using Tailwind CSS, you'll need to add the /src prefix to the tailwind.config.js file in the content section.

  • 如果你使用 TypeScript 路径进行导入(例如 @/*),则应更新 tsconfig.json 中的 paths 对象以包含 src/

    ¥If you are using TypeScript paths for imports such as @/*, you should update the paths object in tsconfig.json to include src/.