Next.js: 如何更改 Next 查找页面的位置？

AFAIK，你不能。 您可以通过next.config.js禁用文件系统路由。

根据文档， dir指定项目的位置，因此正确的方法是将其设置为./src ：

const next = require('next')({
  dev,
  dir: './src'
})

但它仅用于编程 API（带有自定义服务器），并且还会影响其他文件的假定位置（我相信，例如next.config.js和static目录）。

不知道这些其他评论在说什么，但您可以配置 next.js 从命令行查找页面的目录：

$ next ./src
$ next dev ./src
$ next build ./src
$ next start ./src -p 8080

您无法更改目录，我们不打算更改此目录，请在发布问题之前在问题跟踪器上搜索问题（包括已关闭的问题），因为此问题已出现多次.

@timneutkens不像 moment.js 的维护者，他拒绝对客户端应用程序进行优化，这导致了很多项目中的自定义配置，甚至在 CRA 中也是如此。
许多项目样板文件都有一个src文件夹，文件存放在该文件夹中。

由于这是目前在 google 上搜索此内容时的第一个结果，也许解释该决定背后的原因@timneutkens会有所帮助？

正如@brainkim所说，请使用

请注意，我们在文件夹前面加上了 ../。

// src/next.config.js
module.exports = {
  distDir: '../dist'
}

// package.json
  "scripts": {
    "dev": "next ./src",
    "build": "next build ./src",
    "start": "next start ./src",
    ..
  },

@msegers我正在尝试遵循此设置并收到大量这样的错误：

Cannot find module 'next/document'
Cannot find module 'next/error'
...

在 HTTP 请求上（在导入阶段没有错误）。 知道如何解决这个问题吗？

在 root 中拥有pages的要求真的让我发疯——对于任何现实的大事，事情开始不受控制地堆积在根上：样式、组件、客户端存储、配置文件等。希望有一个解决方法。

另外：尝试将pages符号链接到client/pages 。 除了热重载之外，大多数东西似乎都有效。 伤心:(

@msegers建议对我

如果您使用 next-i18next，请确保在 NextI18 配置中设置正确的 localePath： localePath: 'src/static/locales/',

像这样 ：

NextI18NextInstance = new NextI18Next({
  defaultLanguage: 'en',
  otherLanguages: ['en'],
  debug: true,
  localePath: 'src/static/locales/',
});

似乎对此很有兴趣 - 希望能够配置查找我的顶级页面的位置。

@malimccalla你可以在这里查看： https :

警告

据我所知你不能更改文件夹的名称，需要保留“页面”

如何

查看客户端文件夹，注意有一些关键的事情需要做到这一点。 我展示的示例是针对自定义服务器场景 + 打字稿，但其基本相同，核心内容是。

1. 在 package.json 中的脚本中，确保指向文件夹 ( next ./client ) 而不是 ( next ) 用于“npm run dev”/对构建脚本执行相同操作
2. 在该文件夹 ( ./client ) 中，您将需要一个 next.config.js 文件。 然后只需在其中包含以下内容：

module.exports = {
    distDir: '../.next' // so that you can tell it to go up a folder for the dev and prod files.
}

如果您有任何问题，请随时给我发电子邮件，或者这里也可以。

更新：我刚刚注意到上面@brainkim给出了完全相同的解释.. 抱歉，我会保留这个，因为链接的示例为寻求此类示例的任何人显示了一个更复杂的用例。

感谢这个@slaterbbx

我的问题是我试图将概念上相关的代码放在一起。 我有以下结构

├── components
|   ├──  GridItem.tsx
|   ├──  Avatar.tsx
|   └──  Button.tsx
├── pages
|   └── profile
|       └── components
|       |   ├── CoverPhoto.tsx
|       |   └── UserInterests.tsx
|       ├── data.ts
|       ├── styles.ts
|       └── index.tsx

这种方法的问题（正如@timneutkens 所指出的）是pages中的所有文件都被视为 webpack 入口点，因此又会考虑用于 commonchunks 配置。 目前，Next 仅支持pages内的顶级页面组件。 如果我可以配置查找页面的位置，我可以保留这种（合理的？）结构。 我在配置中想象这样的事情

pages: ["./pages/*/index.tsx"]

它还可以用于在多个位置存储页面的项目

pages: ["./pages/*", "./admin-pages/*"]

或希望将其顶级组件存储在以不同名称命名的文件夹中的项目

pages: ["./views/*"]

或者只是想自定义路径的项目

pages: ["./src/custom/path/to/pages/*"]

我相信这是一个公平的特性，它不像是一个激进的模式（纱线工作区使用相同的模式来定位workspaces ，Next.js 本身实现的模式）。

@malimccalla啊，是的，完全理解你的悲伤，我也想要一个完全灵活的解决方案。 可能也有一些值得付出努力的东西，但我读到他们对提供解决方案不感兴趣（某处，但不要引用我的话）所以我担心将这些时间投入到这样的功能上可能会失败。 当然，除非他们确认他们对这样的贡献感兴趣，否则可能是一个考虑进行的项目🙋‍♂️

@malimccalla您是否能够很好地使用您想要的项目结构，还是您最终将pages目录弄平并将页面子组件存储在其他地方？

@joncursi我设法通过将pages目录重命名views然后创建一个新的pages目录来解决这个问题，该目录的唯一目的是导出顶级页面组件。

例如pages/profile.tsx现在看起来像这样：

export { default } from "../views/profile"  

这绝不是理想的，但允许我保持我想要的项目结构

@folofse在扫描目录时更改 i18n localePath 有效。 但是在解析语言文件时，它会再次删除 src。 该怎么办？

我启用了调试以提供如下日志（i18next）

...
  localePath: 'src/static/locales',
  localeStructure: '{{lng}}/{{ns}}',
  localeSubpaths: 'foreign',
  backend:
   { loadPath:
      'V:/dev/some-project/static/locales/{{lng}}/{{ns}}.json',
     addPath:
      'V:/dev/some-project/static/locales/{{lng}}/{{ns}}.missing.json' },
  allLanguages: [ 'de', 'de' ],

loadPath 设置为*\static\locales但它应该是*\src\static\locales 。

问题：

我们在/projectRoot/next-web/server.js有一个自定义服务器文件

它像这样挂载/projectRoop/next-renderer-universal/client ：

// in /projectRoot/next-web/server.js
const nextApp = next({
  dev: NODE_ENV !== 'production',
  dir: APP_DIR,
  quiet: false,
});

我们到底是如何构建和运送这个的:)？

@armenr 我的这个小应用程序可能会有所帮助。 它使用自定义入口点（ src/server.ts ），以下是它如何调用next() ：
https://gitlab.com/kachkaev/website-frontend/blob/e1c7106cf63811f6341c4bd47dd2354eb2546914/src/server.ts#L11 -18

在 Next.js 中，将所有源文件保存在PROJECT_ROOT/src （或其他子目录）下是非常具有挑战性的。 由于在 Next 9 中添加了自动 TS 集成，事情甚至变得更加混乱😔我希望https://github.com/zeit/next.js/issues/4315重新开放。

:) 我建立了一个 monorepo，所以我问的问题因其他复杂性而复杂化

从那以后，我们已经弄清楚该怎么做，但我很欣赏示例代码。 还是有用的！ 谢谢 ：）

@armenr您对 monorepo 的解决方法是什么？ 我用 lerna 建立了我的项目，但仍然受到它的约束。

@anoop-gupt

Lerna、monorepo、纱线工作区和单独的packages.

我将所有前端代码放入一个文件夹中，我称之为renderer-universal 。 然后我有一个名为next-web ，我将在其中保留自定义的下一个服务器。 我还有另一个包，我保存nextron （下一个 + 电子...优秀项目，在 GitHub 上查找）。

在 nextron 和 next-web 的 server.js 文件中，我使用：

const nextApp = next({
  dev: NODE_ENV !== 'production',
  dir: APP_DIR,
  quiet: false,
});

我通过 ENV 变量将渲染器通用包的目录位置传递给这些服务器文件。

我还有一堆我们编写的微服务，它们也驻留在 monorepo 的其他 lerna 包中。

不需要自定义 webpack/babel 配置或符号链接解析。

通常，我更喜欢这个项目结构：

  - api
  - pages
  - utils

顶级src文件夹是正常的，许多项目都使用它。 为什么不 ？

@revskill10 是的，即使我更喜欢这种结构。

我们正在将我们的应用程序和服务 + NextJS 分发到桌面/云混合以及 Web 构建中。

包管理 - node_modules 重复，需要使用 Next 的自定义 serverJS 文件，以及不同微服务之间的共享模块和库使得很难分解所有内容或遵循传统/更简单的目录结构。

为了为我的团队提供易于管理的设置，我必须想出一种模式，让我们能够同时在桌面和 Web 版本上工作，并解耦所有微服务并对它们之间的所有共享库和模块进行重复数据删除。 唯一真正“正确”的方法是通过我描述的设置。

对于普通项目的入门来说，这太过分了。 在我们的案例中，我们对我们的初始需求和我们需要构建的内容有相当清晰的理解，所以我只是在回答这个问题。

就其价值而言，我们正在考虑摆脱自定义 server.js 文件，转而使用已在 Next9 中实现的 /api 布局。 目前尚不清楚，这是否仍能让我们轻松地以简单的方式同时开发/构建 web + nextron。

@armenr可以告诉我您的存储库位置吗？ 这似乎是一个很好的解决方案。

distDir: '../dist',方法在带有打字稿和客户服务器的 Next 9 中不再有效。 问题是它在src目录中创建了一个tsconfig.json 。

花了几个小时试图解决这个问题，但不得不将所有内容移到根目录中......真是一团糟😞

花了几个小时试图解决这个问题，但不得不将所有内容移到根目录中......真是一团糟😞

如果您尝试弄乱路径解析或修改 tsconfig.json 中的入口点文件，没有任何变化

这是自 2017 年以来的请求。我们如何帮助发布此功能？

@timneutkens请重新打开此问题并重新考虑

@janhesters https://github.com/zeit/next.js/issues/8415

回复到这里，打算锁定这个问题。
https://github.com/zeit/next.js/issues/4315#issuecomment -522263598