ルーターを使用したNext.jsの動的コンテンツ

Next.jsサイトで動的コンテンツを設定する方法

の中に前の投稿ホームをブログページにリンクする方法を見ました。

ブログはNext.jsの優れたユースケースであり、この章では次のように追加して説明します。ブログ投稿。

ブログ投稿には動的URLがあります。たとえば、「HelloWorld」というタイトルの投稿にURLが含まれている場合があります/blog/hello-world。「私の2番目の投稿」というタイトルの投稿にはURLが含まれている可能性があります/blog/my-second-post。

このコンテンツは動的であり、データベース、マークダウンファイルなどから取得される場合があります。

Next.jsは、に基づいて動的コンテンツを提供できます動的URL。

を使用して動的ページを作成することにより、動的URLを作成します。[]構文。

どうやって？追加しますpages/blog/[id].jsファイル。このファイルは、以下のすべての動的URLを処理します/blog/上記のようなルート：/blog/hello-world、/blog/my-second-postもっと。

ファイル名に、[id]角かっこ内は、動的なものはすべて、idのパラメータクエリプロパティのルーター。

わかりました、それは一度に少し多すぎます。

何ですかルーター？

ルーターはNext.jsが提供するライブラリです。

からインポートしますnext/router：

import { useRouter } from "next/router";

そして一度私達が持っているuseRouter、以下を使用してルーターオブジェクトをインスタンス化します。

const router = useRouter();

このルーターオブジェクトを取得したら、そこから情報を抽出できます。

特に、URLの動的な部分を取得できます。[id].jsアクセスしてファイルrouter.query.id。

それでは、続けて、これらすべてを実際に適用してみましょう。

ファイルを作成するpages/blog/[id].js：

import { useRouter } from "next/router";
export default () => {
const router = useRouter();
return (
<>
<h1>Blog post</h1>
<p>Post id: {router.query.id}</p>
</>
);
};

今、あなたが行くならhttp://localhost:3000/blog/testルーター、あなたはこれを見るはずです：

これが使えますid投稿のリストから投稿を収集するパラメータ。たとえば、データベースから。物事を単純にするために、posts.jsonプロジェクトルートフォルダ内のファイル：

{
  "test": {
    "title": "test post",
    "content": "Hey some post content"
  },
  "second": {
    "title": "second post",
    "content": "Hey this is the second post content"
  }
}

これで、それをインポートして、から投稿を検索できます。idキー：

import { useRouter } from "next/router";
import posts from "../../posts.json";
export default () => {
const router = useRouter();
const post = posts[router.query.id];
return (
<>
<h1>{post.title}</h1>
<p>{post.content}</p>
</>
);
};

ページをリロードすると、次の結果が表示されます。

しかし、そうではありません！代わりに、コンソールでエラーが発生し、ブラウザでもエラーが発生します。

どうして？なぜなら、レンダリング中に、コンポーネントが初期化されるとき、データはまだそこにないからです。次のレッスンでは、getInitialPropsを使用してコンポーネントにデータを提供する方法を説明します。

今のところ、少し追加しますif (!post) return <p></p>JSXを返却する前に確認してください。

import { useRouter } from "next/router";
import posts from "../../posts.json";
export default () => {
const router = useRouter();
const post = posts[router.query.id];
if (!post) return <p></p>;
return (
<>
<h1>{post.title}</h1>
<p>{post.content}</p>
</>
);
};

今、物事はうまくいくはずです。最初に、コンポーネントはダイナミックなしでレンダリングされますrouter.query.id情報。レンダリング後、Next.jsはクエリ値で更新をトリガーし、ページに正しい情報が表示されます。

そして、あなたがソースを見るならば、それは空です<p>HTMLのタグ：

SSRの実装に失敗するこの問題はまもなく修正されます。これは、すでに説明したように、ユーザーの読み込み時間、SEO、ソーシャル共有の両方に悪影響を及ぼします。

これらの投稿をにリストすることで、ブログの例を完成させることができます。pages/blog.js：

import posts from "../posts.json";
const Blog = () => (
<div>
<h1>Blog</h1>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">&gt;</span>
  {Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">posts</span>).<span style="color:#a6e22e">map</span>((<span style="color:#a6e22e">value</span>, <span style="color:#a6e22e">index</span>) =&gt; {
    <span style="color:#66d9ef">return</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">li</span> <span style="color:#a6e22e">key</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">index</span>}<span style="color:#f92672">&gt;</span>{<span style="color:#a6e22e">value</span>[<span style="color:#ae81ff">1</span>].<span style="color:#a6e22e">title</span>}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/li&gt;;</span>
  })}
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/ul&gt;</span>
</div>
);
export default Blog;

そして、インポートすることで、それらを個々の投稿ページにリンクできますLinkからnext/link投稿ループ内で使用します。

import Link from "next/link";
import posts from "../posts.json";
const Blog = () => (
<div>
<h1>Blog</h1>
<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">&gt;</span>
  {Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">posts</span>).<span style="color:#a6e22e">map</span>((<span style="color:#a6e22e">value</span>, <span style="color:#a6e22e">index</span>) =&gt; {
    <span style="color:#66d9ef">return</span> (
      <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">li</span> <span style="color:#a6e22e">key</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">index</span>}<span style="color:#f92672">&gt;</span>
        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/blog/[id]"</span> <span style="color:#a6e22e">as</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">"/blog/"</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">value</span>[<span style="color:#ae81ff">0</span>]}<span style="color:#f92672">&gt;</span>
          <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">a</span><span style="color:#f92672">&gt;</span>{<span style="color:#a6e22e">value</span>[<span style="color:#ae81ff">1</span>].<span style="color:#a6e22e">title</span>}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/a&gt;</span>
        <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/Link&gt;</span>
      <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/li&gt;</span>
    );
  })}
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/ul&gt;</span>
</div>
);
export default Blog;

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

ルーターを使用したNext.jsの動的コンテンツ

Next.jsサイトで動的コンテンツを設定する方法

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