Linkを使用してNext.jsの2つのページをリンクする

Next.jsで2つ以上のページをリンクする方法

このチュートリアルは、最初のNext.jsチュートリアルやめた。 1ページのサイトを構築しました：

このウェブサイトに2ページ目のブログ投稿リストを追加したいと思います。に提供されます/blog、そして当分の間、最初のように、単純な静的ページが含まれるだけですindex.js成分：

新しいファイルを保存した後、npm run devすでに実行されているプロセスは、ページを再起動することなく、ページをレンダリングすることができます。

URLにアクセスしたときhttp：// localhost：3000 / blog新しいページがあります：

そして、これがターミナルが私たちに言ったことです：

今、URLが/blogファイル名とその下の位置だけに依存しますpagesフォルダ。

あなたは作成することができますpages/hey/hoページ、およびそのページはURLに表示されますhttp：// localhost：3000 / hey / ho。

URLの目的で重要ではないのは、ファイル内のコンポーネント名です。

ページのソースにアクセスして表示してみてください。サーバーから読み込まれると、リストが表示されます。/_next/static/development/pages/blog.jsロードされたバンドルの1つとしてではなく、/_next/static/development/pages/index.jsホームページのように。これは、自動コード分割のおかげで、ホームページを提供するバンドルが必要ないためです。ブログページを提供するバンドルだけです。

から匿名関数をエクスポートすることもできますblog.js：

export default () => (
  <div>
    <h1>Blog</h1>
  </div>
)

または、矢印以外の関数構文を使用する場合：

export default function() {
  return (
    <div>
      <h1>Blog</h1>
    </div>
  )
}

これで、次のように定義された2つのページができました。index.jsそしてblog.js、リンクをご紹介します。

ページ内の通常のHTMLリンクは、a鬼ごっこ：

<a href="/blog">Blog</a>

Next.jsではそれを行うことはできません。

どうして？私たちは技術的にできるもちろん、これはWebであり、Web上では物事は決して壊れません（それが私たちがまだ使用できる理由です<marquee>鬼ごっこ。ただし、Nextを使用する主な利点の1つは、ページが読み込まれると、クライアント側のレンダリングのおかげで他のページへの遷移が非常に高速になることです。

プレーンを使用する場合aリンク：

const Index = () => (
  <div>
    <h1>Home page</h1>
    <a href='/blog'>Blog</a>
  </div>
)
export default Index

今開いてDevTools、そしてそのネットワークパネル特に。初めてロードするときhttp://localhost:3000/すべてのページバンドルが読み込まれます。

ここで、[ログの保存]ボタンをクリックして（[ネットワーク]パネルがクリアされないようにするため）、[ブログ]リンクをクリックすると、次のようになります。

もう一度、サーバーからすべてのJavaScriptを取得しました。しかし..すでにJavaScriptを入手している場合は、JavaScriptをすべて必要としません。必要なのはblog.jsページバンドル、ページに新しい唯一のもの。

この問題を修正するために、リンクと呼ばれるNextが提供するコンポーネントを使用します。

インポートします：

import Link from 'next/link'

次に、次のようにリンクをラップするために使用します。

import Link from 'next/link'
const Index = () => (
<div>
<h1>Home page</h1>
<Link href=’/blog’>
<a>Blog</a>
</Link>
</div>
)
export default Index

以前に行ったことを再試行すると、それだけが表示されます。blog.jsブログページに移動すると、バンドルが読み込まれます。

また、ページの読み込みが以前よりも速くなったため、タブのブラウザの通常のスピナーも表示されませんでした。ご覧のとおり、URLは変更されました。これはブラウザとシームレスに連携しています履歴API。

これは、実際のクライアント側のレンダリングです。

戻るボタンを押すとどうなりますか？ブラウザにはまだ古いものがあるため、何もロードされていませんindex.jsバンドルして、ロードする準備ができました/indexルート。それはすべて自動です！

Next.jsでリンクを処理する方法はこれだけではありませんが、最も簡単な方法だと思います。

私の無料ダウンロードNext.jsハンドブック

Linkを使用してNext.jsの2つのページをリンクする

Next.jsで2つ以上のページをリンクする方法

その他の次のチュートリアル：