ルーターを使用した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ハンドブック


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