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

Question

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

P粉786800174 · Answer

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

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

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

/app ディレクトリはコロケーションを受け入れ、ルーティング目的のみに使用される /pages ディレクトリとは異なるため、すべて (すべてのフォルダーとファイル) が /app ディレクトリに配置されます。この方法では、/app ディレクトリが新しい /src ディレクトリであると想定できます。
ルーティングされていないフォルダーはすべて、名前の先頭にアンダースコアを付けることによってプライベートになります (上記のリンクで説明されているように)。これにより、フォルダーがルートの一部ではないことが次のルーターに伝えられます。 (例: _components、_libs、...)
この時点で、アンダースコア (_) を持つすべてのフォルダーはルートではなく、アンダースコアのない他のフォルダーはルーティングシステムの一部であると判断しました (フォルダーに page.tsx または page が含まれている場合でも) .js ファイルはルーティングシステムの一部です) ですが、私は別の Next 13 機能であるルーティンググループを使用しました (上記のリンクで説明したように)。フォルダー名が括弧で囲まれているのは、フォルダーが整理目的 (フォルダーのグループ化) のために表示され、ルートの URL パス (たとえば、route) に含まれないようにするためです。

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

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

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