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フォルダーがあります。

これは現在グーグルでこれを検索するときの最初の結果なので、おそらくその決定の背後にある理由を説明することは有益でしょう@timneutkens ？

@brainkimによると、jusはパッケージのjsonスクリプトに./srcを追加します。 また、次のdistフォルダーを構成することもできます（ルートにdistが必要でした）。

フォルダの前に../が付いていることに注意してください。

// 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リクエスト（インポートフェーズでエラーなし）。 それを修正する方法はありますか？

ルートに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のスクリプトで、「npm run dev」の場合は（next）ではなく、フォルダー（next ./client）を指定してください。ビルドスクリプトについても同じようにしてください。
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

次のようにログを提供するためにデバッグを有効にしました（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 ます。

:)私はモノレポを設定したので、私が尋ねていた質問は他の複雑さによって複雑になりました

それ以来、私たちは何をすべきかを正確に理解しましたが、サンプルコードに感謝します。 それでも便利です！ ありがとう ：）

@armenrモノレポに関する回避策は何ですか？ 私は自分のプロジェクトをlernaでセットアップしましたが、それでも制約を受けていました。

@ anoop-gupt

Lerna、monorepo、yarnワークスペース、および個別の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',メソッドは、Typescriptとカスタマーサーバーを使用するNext9では機能しなくなりました。 問題は、 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