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ハンドブック


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