Next.js 14 Tutorial - 5 - Routing

Summary

このビデオスクリプトでは、Nixというフレームワークが提供するルーティング機能について詳しく説明されています。Nixでは、ファイルベースのルーティングメカニズムが採用されており、ブラウザでアクセス可能なURLパスは、コードベース内のファイルとフォルダによって定義されます。プロジェクト構造を理解した後、具体的な例を通じて、ルーティングの基本的な規則と、どのようにルートが作成されるかを学びます。まず、ルーティング用のファイルはすべて「app」という名前のフォルダ内に置かれ、ページを表すファイルは「page.js」または「page.tsx」という名前でなければならず、それぞれのフォルダはブラウザのURLのセグメントに対応します。また、デフォルトでルートが「app」フォルダ内にあり、その下のフォルダ名がURLのパスに対応します。例えば、「about」フォルダ内の「page.tsx」は「/about」にマップされ、「profile」フォルダ内の「page.tsx」は「/profile」にマップされます。URLとファイルが一致しない場合、Nixは自動的に404エラーを返します。このビデオスクリプトは、Nixのルーティング機能を理解し、実装するための基本的な情報を提供しています。

Takeaways

• 🔍 Nix shs（Next.js）は、ファイルシステムベースのルーティングメカニズムを採用しており、ブラウザでアクセス可能なURLパスはコードベース内のファイルとフォルダによって定義されます。
• 🛠️ プロジェクトは「npx create-next-app@latest」コマンドを使用してセットアップされ、'routing-demo'という名前でプロジェクトが作成されます。
• 📁 全てのルートはソースフォルダ内の'app'フォルダに配置する必要があり、この構造はフレームワークの規約に従います。
• 📄 ルートを表すファイルは、TypeScriptを使用している場合は'page.tsx'という名前でなければなりません。
• 🌐 'app'フォルダ内の'page.tsx'ファイルはドメインのルートにマッピングされ、'localhost:3000'にアクセスすると'Welcome Home'が表示されます。
• 🔗 各フォルダはブラウザURLの一部としてマッピングされ、'about'や'profile'などの追加ルートも同様に設定できます。
• 🔄 存在しないURLへのアクセスは自動的に404エラーを返し、これには追加のルータ設定やコードが不要です。
• ⚙️ Next.jsは「規約より設定」（convention over configuration）のアプローチを採用しており、ファイルとフォルダの構造がルーティングを決定します。
• 📚 このビデオではルーティングについて詳細を解説しており、将来のビデオでレイアウトについても詳しく説明する予定です。
• 📺 チャンネル登録をお勧めし、Next.jsに関する更なるコンテンツを提供します。

Q & A

次に克斯はどのようなプロジェクト構造を使用していますか？

次にクスはファイルベースのルーティングメカニズムを使用しており、プロジェクト構造は、ルーティングに必要な特定の規約に従う必要があります。

次にクスでルートを作成するために必要なディレクトリは何ですか？

次にクスでルートを作成するためには、ソースフォルダ内の 'app' という名前のディレクトリが必要です。

ページに対応するファイルはどのように命名する必要がありますか？

ページに対応するファイルは、TypeScriptを使用しているかどうかに応じて、'page.js' または 'page.tsx' という名前で命名する必要があります。

ブラウザのURLパスは、プロジェクト内のファイルとどのように関連していますか？

ブラウザのURLパスは、プロジェクト内の 'app' フォルダ内のファイルとフォルダの構造によって定義されます。各フォルダは、ブラウザのURLのセグメントに対応します。

ルートがブラウザで表示されるためには、どのような規約に従う必要がありますか？

ルートがブラウザで表示されるためには、ファイルが 'app' フォルダ内にあり、ファイル名が 'page.js' または 'page.tsx' で、またフォルダ名がURLのセグメントに対応している必要があります。

次にクスでルートが見つからない場合、どうなりますか？

次にクスでルートが見つからない場合、自動的に404 Not Foundエラーが返されます。開発者が明示的に非一致のルートを処理する必要はありません。

次にクスのルーティングにはどのようなアプローチが採用されていますか？

次にクスのルーティングには、設定よりも規約を重視するアプローチが採用されています。ファイルやフォルダの構造がルートを決定するため、外部のルーターのインストールや設定は必要ありません。

次にクスでルートを作成する際に、どのようなコマンドを使用しますか？

次にクスでルートを作成する際には、まず 'npx create-next-app' コマンドを使用してプロジェクトを作成し、その後 'npm run dev' コマンドでローカル開発サーバーを実行します。

次にクスでルートがどのように機能するのかを説明してください。

次にクスでは、ファイルベースのルーティングを使用して、プロジェクト内のファイルとフォルダ構造に基づいてURLルートが自動的に作成されます。これにより、開発者はルートの設定をコードで記述する必要がなくなります。

次にクスでルートを作成する際に必要なファイルの拡張子は何ですか？

次にクスでルートを作成する際に必要なファイルの拡張子は、JavaScriptの場合は '.js' で、TypeScriptの場合は '.tsx' です。

次にクスでルートがどのようにブラウザに表示されるのかを説明してください。

次にクスでルートがブラウザに表示されると、'app' フォルダ内のファイル構造に基づいてURLが形成されます。例えば、'app' フォルダ内に 'page.tsx' ファイルがある場合、そのファイルはルートのルートとして表示されます。

次にクスでルートを作成する際に、レイアウトファイルとは何ですか？

次にクスでは、ルートが作成されると自動的に 'layout.tsx' ファイルが生成されます。このファイルは、ルートのレイアウトを定義するために使用されますが、詳細は今後のビデオで説明される予定です。