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' ファイルが生成されます。このファイルは、ルートのレイアウトを定義するために使用されますが、詳細は今後のビデオで説明される予定です。

Outlines

00:00

📂 ファイルベースのルーティングの基本

この段落では、Next.jsのルーティング機能について説明しています。Next.jsはファイルベースのルーティングメカニズムを提供しており、プロジェクトの構造に基づいてURLパスが定義されます。まず、新しいNext.jsプロジェクトを作成し、`app`フォルダ内にルーティング用のファイルを配置します。ルーティングには、Next.jsのフレームワークに従って特定の規則に従う必要があります。例えば、すべてのルートは`app`フォルダ内に置かれ、各ファイルは`page.js`または`page.tsx`という名前でなければなりません。また、各フォルダはブラウザのURLのセグメントに対応します。デフォルトでは、`page.tsx`ファイルがルートドメインに対応付けられ、`localhost:3000`にアクセスすると、"Welcome home"というメッセージが表示されます。

05:02

🔗 フォルダ名に基づくルーティングの詳細

この段落では、Next.jsのルーティングについてさらに詳しく説明しています。ルーティングはファイルとフォルダの構造によって決まります。例えば、`about`フォルダ内の`page.tsx`ファイルは`/about`にマップされ、`profile`フォルダ内のファイルは`/profile`に対応します。また、存在しないURLにアクセスした場合、Next.jsは自動的に404 Not Foundエラーを返します。これは、ルーティングのためのコードを書く必要がないことを意味します。ファイルとフォルダの構造がルーティングを決定するNext.jsのアプローチである、規約優先の構成方法を示しています。

Keywords

The video is abnormal, and we are working hard to fix it.
Please replace the link and try again.

Highlights

Nix offers a file system-based routing mechanism.

URL paths in the browser are defined by files and folders within your code base.

All routes must be placed inside the 'app' folder.

Files representing routes should be named 'page.js' or 'page.tsx'.

Folders correspond to URL segments when certain conventions are followed.

The 'app' folder is created by default for routing.

A simple React component can be exported to create a route.

Running 'npm run dev' starts the development server.

The 'page.tsx' file within the 'app' folder maps to the root of your domain.

The 'layout.tsx' file is automatically created and populated by Next.js.

Additional routes can be created by adding folders and 'page.tsx' files within the 'app' folder.

Each folder within 'app' corresponds to a URL segment.

If a URL cannot map to a file, Next.js automatically responds with a 404 not found.

File and folder structure determines the routes, following the 'convention over configuration' approach.

There's no need to install and configure a router with code.

Next.js routing is an innovative method that simplifies the process of creating and managing routes.

The video provides a practical demonstration of setting up and understanding Next.js routing.

The 'app' folder and its conventions are central to the routing system in Next.js.

Next.js allows for a clean and straightforward approach to defining routes in a project.

Transcripts

now that we know how to create a new

next year's project and what the project

structure looks like it is time to dive

into the different features that Nix shs

offers in this section we will explore

the routing feature offered by Nix shes

specifically focusing on the app

router next implements a file system

based routing mechanism where the URL

paths accessible in the browser are

defined by files and folders within your

code base let's dive into the code code

and understand with an

example I have opened vs code and as you

can see I have created a new next year's

project using the

command npx create hyphen next hyphen

app at latest and the project name is

routing hyphen

demo once the command is executed you

should have a project similar to mine

open the project and navigate to The

Source

folder for a fresh start delete the app

folder as we will learn how to create

routes in next Shar from

scratch now I already mention that Nexes

has a file based routing

mechanism but does that mean every file

in our app corresponds to a route well

no if you remember from the intro video

I mentioned that nexs is a framework

where we need to follow certain

conventions routing is one such feature

where we have to heavily follow the

framework

conventions what are those conventions

well let's understand with a few

different

scenarios first all routes must be

placed inside the app

folder second every file that represents

a route should be named page.js or page.

TSX depending on whether typescript is

used or not third each folder

corresponds to a part segment in the

browser

URL when these conventions are followed

the file automatically becomes available

as a

route for scenario one let's add a route

that needs to be rendered when a user

visits our website our website is of

course localhost 3000 so if the user

navigates to Local Host Port 3000 we

want to display a message

homepage let's head back to vs code and

implement this

scenario the first important convention

you should know is that by default all

routes must be placed within a folder

called app which will exist within the

source folder let's create a new

folder called app within

Source the second important convention

you should know is that every file that

corresponds to a route in the browser

should be named page.

TSX page is a name of the file and TSX

is the file

extension within the app

folder let me create page.

TSX in this file I'm going to default

export a very simple react

component export default function home

and we return an each one tag that says

homepage the text of course can be

anything you want to for example well

welcome

home and believe it or not we have

created our very first route in next

shares we can now run the

command npm run

Dev and when you open Local Host Port

3000 you should see the text welcome

home so this is the first point to keep

in mind about routing in next

shares the page. TSX file within the app

folder maps to the root of your

domain scenario one has been

successfully

implemented now before we proceed let's

discuss the layout. TSX file although we

deleted this file along with the app

folder next automatically creates and

populates it when we load the root route

we will cover layouts in detail in

future videos but it is important to be

aware of this file being magically

created next let's move on to scenario 2

in this scenario we need two additional

routes one route to render when the user

visits the about page and another to

render when the user visits the profile

page let's head back to vs code and

Define the two new

routes in the app folder I'm going to

create a another

folder about in

lowercase within the folder I'm going to

define a new page. TSX

file in this file I'm going to default

export a react

component similarly let's create yet

another folder in the app folder called

profile create a new page. TSX

file copy the react component and change

about to

profile and the

text to my

profile if you now save both the files

and head back to the

browser the homepage should still be

displayed at the root route however if

you navigate to localhost 3000

slab you will see the about me page

similarly changing the URL to slash

profile will render the my profile page

scenario 2 has been

implemented therefore the second point

to remember is that routes are

associated with a file based on the

containing folders name within the app

folder page. TSX within the about folder

Maps toabout

while page. TSX within the profile

folder Maps to/

profile here is a visualization of what

we have learned so far page. TSX within

the app folder is the root route and

then each folder corresponds to a URL

segment now what happens if you enter a

URL that cannot map to a file in the app

folder for

example SL dashboard board well next shs

will automatically respond with a 404

not found response you don't have to

explicitly handle a non-matching

route hopefully the concept of file

based routing should now make more sense

to you there is no need to install and

configure a router with code your file

and folder structure determines the

routes this represents next year's

approach of convention over

configuration for routing

we still have more to learn about

routing so let's continue in the next

video thank you for watching and please

consider subscribing to the channel for

more content on

nexts