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パス構造の関係を明確にし、ドキュメント化することが重要です。また、ルートグループの使用方法やプロジェクトの整理方針について、チーム全体で共有と理解を深めることも役立ちます。
プロジェクトのルートを整理する際に、ルートグループ以外にもどのような方法がありますか？
-プロジェクトのルートを整理する際には、ルートグループ以外にも、ディレクトリ構造を整理し、命名規則を統一化する方法があります。また、プロジェクトのドキュメント化や、ルートの分類と階層化を行うことで、プロジェクトの整理を促進することができます。

Outlines

00:00

📂 プロジェクトの整理: ルートグループの活用

このビデオでは、NEXが提供するプロジェクトの整理に関するもう一つの機能であるルートグループについて学びます。ルートグループは、URLパス構造に影響を与えずに、ルートとプロジェクトファイルを論理的にグループ化できる機能です。まずは認証ルートを実装しましょう。VS Codeを使用して、アプリフォルダ内にregister、login、forgot passwordという3つの新しいフォルダを作成し、それぞれのフォルダ内に簡単なReactコンポーネントを定義します。ブラウザでlocalhost 3000 SLを通じて、register、login、forgot passwordの各ページを表示します。しかし、これらの認証ルートが散らばっているため、チームで作業する際には、ルートとプロジェクトファイルをセクションや意図に基づいてグループ化することが重要です。appフォルダ内にauフォルダを作成し、すべての認証関連ルートを含めます。これにより、プロジェクトの構造が整理され、新しい開発者がチームに参加しやすくなります。しかし、ブラウザに戻ると、ルートが機能しなくなっていることに気づきます。これは、アプリディレクトリ内のネストされたフォルダがURLの一部にマップされるためです。ルートグループを使用することで、URLパスからフォルダ名を除外することができます。これにより、URLはスラッシュで始まり、追加のセグメントが含まれなくなります。

05:02

🎨 レイアウトの活用: ページ間の統一感を高める

次に、レイアウトについて学びます。レイアウトを使用することで、ページ間の統一感を高めることができます。これにより、ユーザーがサイトを移動する際の体験が向上し、ブランドのイメージを強化されます。レイアウトは、共通のヘッダー、フッター、サイドバーなどの要素を定義し、ページごとに異なるコンテンツを表示できるようにします。これにより、開発者は、ページ間の一貫性を確保しながら、必要な情報だけを表示することができます。レイアウトの活用は、ウェブアプリケーションのユーザーインターフェイスの質を向上させるための重要な要素です。

Mindmap

Keywords

💡NEX

NEXは、本ビデオで紹介されているプロジェクト組織化機能を提供するプラットフォームです。ビデオのテーマは、NEXのルートグループ機能を使ってプロジェクトを整理する方法についてです。

💡ルートグループ

ルートグループは、URLパス構造に影響を与えずに、ルートとプロジェクトファイルを論理的にグループ化する機能です。ビデオの中心テーマは、ルートグループを使ってプロジェクトを整理し、他の開発者がプロジェクトを理解しやすくすることです。

💡認証ルート

認証ルートは、登録、ログイン、パスワード忘れなど、ユーザー認証に関連するルートのことを指します。ビデオでは、これらのルートを作成し、ルートグループを使って整理する方法が説明されています。

💡VS Code

VS Codeは、ビデオで使用されるテキストエディタであり、新しいフォルダーやファイルをプロジェクトに追加するために使用されます。ビデオのプロセスには、VS Code内でファイルとフォルダーを作成して整理することが含まれています。

💡Reactコンポーネント

Reactコンポーネントは、ユーザーインターフェイスを構築する単一の部品です。ビデオでは、各認証ルートに対してシンプルなReactコンポーネントを作成し、ブラウザに表示されるようにしています。

💡ページ.tsx

ページ.tsxは、Next.jsのページコンポーネントで、ウェブページを定義するために使用されます。ビデオでは、各認証ルートに対してページ.tsxファイルを作成し、その中にReactコンポーネントをエクスポートしています。

💡localhost 3000

localhost 3000は、ビデオで使用される開発サーバーのアドレスであり、作成したルートをブラウザで確認するために使用されます。ビデオのデモンストレーションでは、このアドレスを使ってルートが正しく機能しているかを確認しています。

💡プロジェクトの整理

プロジェクトの整理は、ビデオの主要なテーマの一つであり、ルートグループを使って行われます。整理されたプロジェクトは、新しい開発者がプロジェクトを理解しやすくなり、チームでの作業を円滑に進めることができます。

💡URLパス

URLパスは、ウェブページにアクセスするための一意のアドレスです。ビデオでは、ルートグループを使ってURLパスを整理し、不要なセグメントを省略して整理されたルート構造を作成する方法が説明されています。

💡ネストされたルートグループ

ネストされたルートグループは、ルートグループをさらに整理するために使用される機能です。ビデオでは、必要に応じて複数のレベルのルートグループをネストできることが示されています。これは、プロジェクトのセクションに基づいてさらに細かく整理することができることを意味します。

💡レイアウト

レイアウトは、ウェブページの構造を定義するコンセプトであり、ビデオの次のサブセクションで説明される予定です。レイアウトは、ルートグループと組み合わせて使用することで、一貫性のあるユーザーインターフェイスを提供し、プロジェクト全体の見た目を統一することができます。

Highlights

Explore the feature of route groups in NEX to organize projects

Route groups allow logical grouping of routes and files without affecting URL path

Create authentication routes for register, login, and forgot password

Create a simple React component for each authentication route

Navigate to localhost 3000 to see the authentication routes in the browser

Scattered authentication routes can be problematic for team collaboration

Create an 'auth' folder to group authentication routes for better organization

Next.js automatically updates imports when moving folders

Nested folders in the app directory are mapped to URL parts by default

Adding an additional segment to the URL may not be ideal for some route groups

Route groups allow excluding a folder from the URL path

Wrap the folder name in parentheses to create a route group

The folder name within parentheses is omitted from the URL path

Route groups help organize code and improve developer experience

Multiple levels of nested route groups can be used if needed

Next.js app router provides powerful routing features

Learn about layouts in the next subsection of the routing section

Subscribe to the channel for more informative videos