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ハンドブック
その他の次のチュートリアル:
- Next.jsの使用を開始する
- Next.js vs Gatsby vs create-react-app
- Next.jsをインストールする方法
- Linkを使用してNext.jsの2つのページをリンクする
- ルーターを使用したNext.jsの動的コンテンツ
- getInitialPropsを使用してNext.jsコンポーネントにデータをフィードします
- CSSを使用したNext.jsコンポーネントのスタイリング
- Next.jsでコンテンツをプリフェッチする
- ルーターを使用してNext.jsでアクティブなリンクを検出する
- ソースを表示して、SSRがNext.jsで機能していることを確認します
- Next.js:ヘッドタグにカスタムタグを入力します
- Next.jsアプリケーションをNowにデプロイする
- Next.js:Next.jsのサーバー側またはクライアント側でのみコードを実行します
- Next.jsアプリを本番環境にデプロイする
- Next.jsアプリバンドルを分析する方法
- Next.jsでの遅延読み込みモジュール
- Next.jsアプリにラッパーコンポーネントを追加する
- Next.jsによってアプリに追加されたアイコン
- Next.jsアプリバンドル
- Next.jsルーターの使用方法
- Next.jsAPIルートの使用方法
- Next.jsアプリでサーバー側のCookieを取得する方法
- Next.jsアプリのポートを変更する方法