Next.js 14 Tutorial - 13 - Route Groups
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
📂 プロジェクトの整理: ルートグループの活用
このビデオでは、NEXが提供するプロジェクトの整理に関するもう一つの機能であるルートグループについて学びます。ルートグループは、URLパス構造に影響を与えずに、ルートとプロジェクトファイルを論理的にグループ化できる機能です。まずは認証ルートを実装しましょう。VS Codeを使用して、アプリフォルダ内にregister、login、forgot passwordという3つの新しいフォルダを作成し、それぞれのフォルダ内に簡単なReactコンポーネントを定義します。ブラウザでlocalhost 3000 SLを通じて、register、login、forgot passwordの各ページを表示します。しかし、これらの認証ルートが散らばっているため、チームで作業する際には、ルートとプロジェクトファイルをセクションや意図に基づいてグループ化することが重要です。appフォルダ内にauフォルダを作成し、すべての認証関連ルートを含めます。これにより、プロジェクトの構造が整理され、新しい開発者がチームに参加しやすくなります。しかし、ブラウザに戻ると、ルートが機能しなくなっていることに気づきます。これは、アプリディレクトリ内のネストされたフォルダがURLの一部にマップされるためです。ルートグループを使用することで、URLパスからフォルダ名を除外することができます。これにより、URLはスラッシュで始まり、追加のセグメントが含まれなくなります。
🎨 レイアウトの活用: ページ間の統一感を高める
次に、レイアウトについて学びます。レイアウトを使用することで、ページ間の統一感を高めることができます。これにより、ユーザーがサイトを移動する際の体験が向上し、ブランドのイメージを強化されます。レイアウトは、共通のヘッダー、フッター、サイドバーなどの要素を定義し、ページごとに異なるコンテンツを表示できるようにします。これにより、開発者は、ページ間の一貫性を確保しながら、必要な情報だけを表示することができます。レイアウトの活用は、ウェブアプリケーションのユーザーインターフェイスの質を向上させるための重要な要素です。
Mindmap
Keywords
💡NEX
💡ルートグループ
💡認証ルート
💡VS Code
💡Reactコンポーネント
💡ページ.tsx
💡localhost 3000
💡プロジェクトの整理
💡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
Transcripts
welcome back in this video we will
explore another feature that NEX offers
to help us organize our projects namely
route groups this feature allows us to
logically group our routes and project
files without affecting the URL path
structure to understand route groups
let's Implement authentication routes we
will create routes for register login
and forgot
password in vs code within the app
folder create three new
folders
register
login and forgot
password within each folder create a
file and Define a simple react component
with a heading to display in the
browser so page. TSX and we default
export a component called register which
renders an H1
register
similarly within the login folder create
page.
TSX and default export a login
component finally in forgot
password page.
TSX and default export a component
called forgot
password now if you go to the browser
and navigate to localhost 3000 SL
register we will see
register and similarly navigating to
slash
login displace
login and go into slash forgot
password display forgot password
everything works fine but if we go back
to V
code we can see that the authentication
routes are scattered all over the place
the this may be manageable if you're the
only developer on the project as you
know all the authentication routes
however when working in a team it is
crucial to ensure a good developer
experience one way to improve this
experience is by organizing routes and
project files into groups based on
sections or intent for example we can
create an au folder within the app
folder to contain all authentication
related
routes move the register login and
forgot password folders into the O
folder
now next J does update the Imports in
the next folder page. TS files but
Simply Save the files and close
them as you can see this Au folder
creates a more structured and organized
project making it easier for new
developers joining the
team however if we go back to the
browser we will notice that our routes
no longer work this is expected because
by default nested folders in the app
directory are mapped to URL Parts
consequently register becomes
sl/
register login becomes sl/ login and
forgot password becomes
sl/ forgot
password adding this additional segment
o to the URL might be acceptable for
authentication routes but it may not be
ideal for other groups like marketing or
analytics so what is the solution route
groups we can Mark a folder as a route
group to exclude it from the routes URL
path to create a route group simply wrap
the folder's name in
parenthesis so rename a
folder to a within parentheses
this informs next sh that o folder
should be treated as a route group and
its name will be omitted from the URL
path if we head back to the
browser we now
have slash
register slash login and slash forgot
password and the odd segment is no
longer part of the
URL o serves as a folder to help
organize our code it's also worth noting
that you can have multiple levels of
nested route groups if
needed with that we have covered the
fundamentals of routing with pages in
the app router for the next subsection
within the routing section let's learn
all about layouts thank you for watching
please do consider subscribing to the
channel and I'll see you in the next
one
5.0 / 5 (0 votes)