ベスト プラクティス: NextJS 13 フォルダー構造

Question

私は NextJS の使い方を学んでいて、App Router の最新バージョンを使用しています。現在、登録ページとログイン ページとそのフォルダー構造をどこに配置するか、一般的にはどこに配置するかなど、ルーティングの方法で行き詰まっています。コンポーネントの配置と、他の関連コンポーネントを組み合わせる方法について教えてください。このトピックに少し光を当てて、できるだけシンプルにしてください。まだ学習中なので、いくつか例を挙げてください。助けていただければ幸いです。ありがとうございます。

Answer 1

次のドキュメントのこのセクションを読むと、プロジェクト フォルダーを整理するのに役立つと思います。

https://nextjs.org/docs/app/building-your-app/route/hosting

さまざまな構造を試しましたが、最終的にこれに落ち着きました:

1. /app ディレクトリはコロケーションを受け入れ、ルーティング目的のみに使用される /pages ディレクトリとは異なるため、すべて (すべてのフォルダーとファイル) が /app ディレクトリに配置されます。この方法では、/app ディレクトリが新しい /src ディレクトリであると想定できます。

2. ルーティングされていないフォルダーはすべて、名前の先頭にアンダースコアを付けることによってプライベートになります (上記のリンクで説明されているように)。これにより、フォルダーがルートの一部ではないことが次のルーターに伝えられます。 (例: _components、_libs、...)

3. この時点で、アンダースコア (_) を持つすべてのフォルダーはルートではなく、アンダースコアのない他のフォルダーはルーティング システムの一部であると判断しました (フォルダーに page.tsx または page が含まれている場合でも) .js ファイルはルーティング システムの一部です) ですが、私は別の Next 13 機能であるルーティング グループを使用しました (上記のリンクで説明したように)。フォルダー名が括弧で囲まれているのは、フォルダーが整理目的 (フォルダーのグループ化) のために表示され、ルートの URL パス (たとえば、route) に含まれないようにするためです。

これらの原則に基づいて、必要なフォルダーをすべて /app ディレクトリに配置し、ルーティング グループを使用してすべてのルートを「(routes)」フォルダーにグループ化し、プライベート フォルダーを非ルート ファイル プレフィックスに配置して使用しました。アンダースコアが付いたフォルダーとすべてのコンテンツが分離されます。

下の図は、上記のすべての点をまとめたものです。

このリンクと私のプロジェクト フォルダーの整理方法がお役に立てば幸いです。