Next.js 14 Tutorial - 13 - Route Groups

Codevolution

14 Nov 202305:36

Summary

TLDRこのビデオでは、NEXが提供するプロジェクトの整理に役立つもう一つの機能である「ルートグループ」について探求します。ルートグループを使用すると、URLパス構造に影響を与えずに、ルートとプロジェクトファイルを論理的にグループ化できます。認証ルートを実装するために、VS Code内で登録、ログイン、パスワード忘れ用のルートを作成し、それぞれのフォルダに単純なReactコンポーネントを定義します。ブラウザでlocalhost 3000にアクセスすると、各認証ページが表示されますが、これらのルートが散らばってしまっています。チームで作業する際には、良い開発者体験を確保することが重要です。ルートとプロジェクトファイルをセクションや意図に基づいてグループ化することで、開発者の体験を向上させることができます。ルートグループを使用すると、URLパスから除外してコードを整理し、新しい開発者がチームに参加する際にプロジェクトを理解しやすくなります。また、必要に応じて、複数のネストされたルートグループを持つことができます。これで、app routerでのルーティングの基礎について学びました。次に、レイアウトについて学ぶセクションに進みましょう。チャンネルを購読してくださると嬉しいです。次のビデオでお会いしましょう。

Takeaways

📂 ネクスト.js（NEX）では、プロジェクトを整理するためにルートグループという機能を使用できます。これにより、URLパス構造に影響を与えずに、ルートとプロジェクトファイルを論理的にグループ化できます。
🛠️ 認証ルートを実装する際には、登録、ログイン、パスワード忘れ用のルートを作成し、それぞれのフォルダー内に単純なReactコンポーネントを定義します。
📄 VS Codeで`app`フォルダー内に`register`、`login`、`forgot password`という3つの新しいフォルダーを作成し、それぞれのフォルダー内に`page.tsx`ファイルを作成します。
🔄 フォルダーを移動することで、プロジェクトの構造を整理し、チームで作業する際の開発者の経験を向上させることができます。
📈 ルートグループを使用すると、URLパスに含まれないようにフォルダーをマークできます。例えば、`(a)uth`フォルダーは、`au`という文字列がURLに含まれないようにします。
🌐 ルートグループを使用すると、URLパスに追加のセグメントを追加することなく、コードを整理できます。
📝 ルートグループは、プロジェクト内の他のグループ（マーケティングや分析など）に対して理想的でない場合でも、認証ルートに対しては許容できる場合があります。
🏞️ ルートグループは、必要に応じて複数のネストされたレベルを持つことができます。
🔗 フォルダー名をカッコで囲むことで、そのフォルダーをルートグループとしてマークし、URLパスから省略されます。
📁 `(a)`フォルダーは、コードを整理するのに役立つフォルダーであり、プロジェクトの構造を明確に保つのに役立ちます。
🎯 ルートグループを使用することで、新しい開発者がプロジェクトに参加する際に、コードの整理と理解を容易にします。
➡️ 次のセクションでは、レイアウトについて学ぶ予定です。

Q & A

NEXが提供するプロジェクトの整理に役立つ機能とは何ですか？
-NEXが提供するプロジェクトの整理に役立つ機能は、ルートグループです。これは、URLパス構造に影響を与えずに、ルートとプロジェクトファイルを論理的にグループ化することができます。
ルートグループを使用するとどのような利点がありますか？
-ルートグループを使用することで、プロジェクト内のルートとファイルが整理され、チームで作業する際に新しい開発者がプロジェクトを理解しやすくなります。また、URLパス構造に影響を与えないため、プロジェクトのURL構造をシンプルに保ちながら整理することができます。
認証ルートを作成するために必要な手順は何ですか？
-まず、VS Code内でappフォルダーにregister、login、forgot passwordという3つの新しいフォルダーを作成します。それぞれのフォルダー内にpage.tsxファイルを作成し、簡単なReactコンポーネントを定義して、ブラウザに表示される見出しを設定します。その後、それぞれのフォルダー内にregister、login、forgot passwordと名前のついたコンポーネントをエクスポートします。
ルートグループをどのようにして作成しますか？
-ルートグループを作成するには、フォルダー名を括弧で囲みます。たとえば、authというフォルダーを(au)と名前変更することで、Next.jsにそのフォルダーをルートグループとして扱うように指示します。これにより、URLパスからそのフォルダー名が省略されます。
ルートグループを使用しない場合、どのような問題が発生しますか？
-ルートグループを使用しない場合、ネストされたフォルダーはURLの一部として扱われ、追加のセグメントがURLに含まれることになります。これは認証ルートには問題ないかもしれませんが、マーケティングや分析などの他のグループには適切でない場合があります。
ルートグループを使用してURLパスが変わると、どのように対処しますか？
-ルートグループを使用すると、URLパスからフォルダー名が省略されますが、ブラウザでアクセスする際には、スラッシュで区切られたルート名（例: /register、/login、/forgot-password）を使用してアクセスすることができます。
ルートグループはどのようにしてプロジェクトの構造を改善しますか？
-ルートグループは、プロジェクト内のルートとファイルを論理的にグループ化し、プロジェクトの構造を整理し、新しい開発者がプロジェクトに参加する際の理解を助けます。また、複数のネストされたルートグループを持つこともできるため、必要に応じて柔軟な整理が可能です。
ルートグループを使用する際には、どのような注意点がありますか？
-ルートグループを使用する際には、フォルダー名を正しく括弧で囲む必要があります。また、ルートグループを使用する前に、プロジェクトのURL構造に影響がないことを確認し、必要に応じて適切な名前を付けることが重要です。
ルートグループを使用した後、ページがブラウザで表示されないのはなぜですか？
-ルートグループを使用した後、ページがブラウザで表示されない理由は、URLパスに追加のセグメントが含まれるためです。ルートグループを使用することで、そのフォルダー名がURLパスから省略されますが、ブラウザでアクセスする際には、省略されたフォルダー名を含まないパスを使用する必要があります。
ルートグループを使用する前に、どのような準備が必要ですか？
-ルートグループを使用する前に、プロジェクト内のルートとファイルがどのように整理されるべきかを計画し、それぞれのルートグループが表すセクションや意図を明確にします。また、ルートグループを使用することで得られる利点をチームに説明し、同意を得ることも重要です。
ルートグループを使用する際に、他の開発者が混乱を避けるためにどのようなアプローチをとりますか？
-ルートグループを使用する際に、他の開発者が混乱を避けるためには、プロジェクトのディレクトリ構造とURLパス構造の関係を明確にし、ドキュメント化することが重要です。また、ルートグループの使用方法やプロジェクトの整理方針について、チーム全体で共有と理解を深めることも役立ちます。
プロジェクトのルートを整理する際に、ルートグループ以外にもどのような方法がありますか？
-プロジェクトのルートを整理する際には、ルートグループ以外にも、ディレクトリ構造を整理し、命名規則を統一化する方法があります。また、プロジェクトのドキュメント化や、ルートの分類と階層化を行うことで、プロジェクトの整理を促進することができます。