Navigate Between Pages

[yutabee]

So far, the Next.js app we created only has one page. Websites and web applications generally have many different pages.

Let's explore how to add more pages to our application.

What You’ll Learn in This Lesson

In this lesson, you will:

• Create a new page using the integrated file system routing.
• Learn how to use the Link component to enable client-side navigation between pages.
• Learn about built-in support for code splitting and prefetching.

If you’re looking for detailed documentation on Next.js routing, take a look at the routing documentation.

[yutabee]

Code splitting and prefetching

Next.jsは、自動的にコード分割を行います。これは、各ページが必要なコードのみを読み込み、不要なコードを読み込まないようにすることを意味します。例えば、ホームページをレンダリングするときには、他のページのコードは読み込まれず、ホームページが速く読み込まれます。この仕組みにより、アプリケーションが数百のページを持っていても、ページの読み込み速度が遅くなることを防ぐことができます。

このコード分割は、ページごとに行われます。つまり、各ページが独立して読み込まれるため、あるページでエラーが発生した場合でも、他のページの動作に影響を与えることはありません。これにより、アプリケーション全体が堅牢であるという利点があります。

さらに、Next.jsは、プロダクションビルドでLinkコンポーネントを使用する場合、自動的にリンクされたページのコードを背後で先読みします。これにより、ユーザーがリンクをクリックした瞬間にページが読み込まれ、遷移がほぼ瞬時に行われます。この機能により、ユーザー体験が向上し、アプリケーションのパフォーマンスが向上するという利点があります。