複数回にわたってNuxt.jsとヘッドレスCMSのWordPressを使った静的サイト作成についてまとめていますが、今回も前回記事「ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃3：動的ページ（投稿一覧）の実装」に引き続き、動的ページの作成を行っていきますが、一覧ページの次は個別の投稿詳細ページを作成していきます。   一覧ページではルーティングが静的に決まっている中で、ページ内に非同期で読み込んだ投稿データを展開する形でしたが、個別ページの場合にはルーティングが動的になるという点で大きな違いがあります。ここでは動的ルーティングの作成についても触れていきたいと思います。   ヘッドレスCMSの構築、またNuxt.jsでの静的ページ作成については過去記事にもまとめていますのでご参考に。 （過去記事） ・ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃3：動的ページ（投稿一覧）の実装 ・ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃2：フロントエンドでのサイト制作 ・ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃1：ヘッドレスCMSの構築   プロジェクト内のファイル構成ですが、前回の一覧ページの続きで詳細ページ用に必要なコンポーネントやページファイルを確認していきます。まず詳細ページのテンプレートですが、動的なルーティングになるため、pagesディレクトリにアンダーバーを先頭につけた名前にしておきます。ここではidをルーティングにするため「_id.vue」としています。あとは詳細ページ内に前後の投稿ページへのリンクを出力するためのコンポーネントをcomponentsディレクトリに追加しています。

/SRC_DIR
  ┣ ......
  ┣ components
    ┣ ......
    ┣ PostArchive.vue
    ┣ Pagenation.vue
    ┣ PostDetail.vue
    ┗ PageLinks.vue
  ┣ pages
    ┣ index.vue
    ......
    ┗ blog
      ┣ index.vue
      ┗ _id.vue
  ┗ store
    ┣ index.js
    ┗ blog.js

  詳細ページの内容を見ていきます。今回はサンプルのため、必要最小限の内容になっていますので、デザインや仕様に合わせて適宜調整してください。ここでは詳細ページ内で投稿データをコンテンツとして表示させるコンポーネントを読み込む形にしています。テンプレート側で読み込んでおきます。そしてスクリプト側では、個別の投稿データを扱う処理を実装していきます。一覧ページ同様にAxiosを使って非同期で投稿データを読み込みます。そして取得したデータを直接コンポーネント内に展開していくのですがfetchメソッドではなく「asyncDataメソッド」でデータを取得するようにします。（参考記事「Nuxt.jsでasyncDataやfetchを使って外部からのデータを非同期で取得してコンポーネントに出力する」）理由としてはasyncDataを使うことで静的ジェネレート時にAPIで取得したデータをペイロードファイルとして生成し静的なデータとしてpayloadの引数を使って扱うことができるようになります。こちらについては、また後日記事で詳しく解説いたします。そして取得データは変数に格納し、コンテンツ表示用のコンポーネントにpropsの値として渡します。これでコンポーネント内で投稿データを扱うことができます。また詳細ページ用のページコンポーネントでは、タイトルやOGP情報など各種meta設定を行うこともあると思いますので、APIで取得したデータをheadメソッドを使ってmeta情報を更新しておくといいですね。 【pages/blog/_id.vue】

<template>
  <div>
    <post-detail :post-data="posts" />
  </div>
</template>

<script>
  import { $axios } from 'axios';
  import PostDetail from '~/components/PostDetail.vue';
  export default {
    components: {
      PostDetail
    },
    async asyncData({ app }) {
      const response = await app.$axios.get(`https://example.com/api/blog/${Number(params.id)}`)
      return {
        posts: {
          nextPost: response.data[0],
          currentPost: response.data[1],
          prevPost: response.data[2]
        }
      }
    }
    ......
    head() {
      return {
        title: this.posts.currentPost.title,
        ......
      }
    }
  }
</script>

  APIのエンドポイントですが、ここでは末尾にIDにパラメーターを指定することで対応した個別記事のデータおよびその前後の投稿データを取得できるという前提になっています。API側のエンドポイント設定については過去記事「WP REST APIで独自エンドポイントにパラメーターを使ってキーワード検索や個別記事を取得できるようにする」などをご参考ください。そのため、動的ルーティングに対応させるため、APIのエンドポイントにルーティングで扱うidのパラメーターが入るようにします。こうすることで、投稿IDのURLにアクセスしたときにそのIDに対応した投稿データを取得できるようになります。  

投稿詳細ページのコンテンツとしてデータを表示させる

続いて投稿詳細ページのコンテンツを表示していきます。今回はコンテンツ表示用のコンポーネントとしてページコンポーネント内で読み込み、APIで取得したデータをpropsでコンポーネントに受け渡しています。コンポーネント側では、受け取った値をそのまま展開していきます。受け取った値は基本的にそのまま利用する場合には特に処理などは必要ありませんので、そのままテンプレート内に表示させていきます。ただ、今回は現在の投稿とその前後の投稿を合わせて受け取っている状態になるので、いったんコンポーネント内のdataにて分割しておくと扱いやすいですね。取得したデータにあわせて投稿タイトルや投稿日付、本文などを出力していきます。投稿の本文などはHTMLも埋め込まれていることを想定して「v-html」ディレクティブを使って展開するといいですね。 【components/PostDetail.vue】

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <span>{{ post.date }}</span>
    <div v-html="post.content"></div>
    <page-links page-data="{ next, prev }"/>
  </div>
</template>

<script>
  import PageLinks from '~/components/PageLinks.vue';
  export default {
    name: 'PostDetail',
    components: {
      PageLinks
    },
    props: [
      postData: {
        type: Object,
        default: () => {}
      }
    ],
    data() {
      return {
        post: this.postData.currentPost,
        next: this.postData.nextPost,
        prev: this.postData.prevPost
      }
    }
  }
</script>

  そして、現在の投稿の前後の投稿に移動できるページリンクのコンポーネントを読み込んでおき、そのコンポーネントには前後投稿のデータをpropsで受け渡していきます。これでコンポーネント側で前後投稿ページの情報を扱うことができます。  

前後投稿のページリンク実装

最後に前後ページに遷移するページリンクを実装していきます。先ほどの投稿データコンテンツ用のコンポーネントから、前後投稿のデータをpropsで受け取っているので、そのデータを扱ってリンクURLなどの設置を行います。URLには動的ルーティングで投稿データに対応したIDが当て振られるようにしていますので、そのまま投稿データからIDが出力されるようにしています。 【components/PageLinks.vue】

<template>
  <ul>
    <li>
      <nuxt-link 
        v-if="next.ID !== null && next.ID !== undefined"
        :to="`/blog/${next.ID}`"
        :title="next.title 
      >次の記事へ</nuxt-link>
    </li>
    <li>
      <nuxt-link 
        v-if="prev.ID !== null && prev.ID !== undefined"
        :to="`/blog/${prev.ID}`"
        :title="prev.title 
      >前の記事へ</nuxt-link>
    </li>
  </ul>
</template>

<script>
  export default {
    name: 'PageLinks',
    props: [
      next: {
        type: Object,
        default: () => {}
      },
      prev: {
        type: Object,
        default: () => {}
      }
    ]
  }
</script>

  リンクの出力についてですが、先頭の投稿や末尾の投稿の場合で前後ページが両方存在しないケースも想定し、投稿情報がない場合には出力されないようにv-ifディレクティブで分岐させておくといいですね。そのためにAPI側のエンドポイント設定で前後の投稿が存在しない場合にはnullを返すようにしておくなどの工夫が必要です。  

---

  これで投稿一覧と投稿詳細の動的ページが完成しました。SSRの場合にはこのままビルドしていきますが、今回は完全な静的サイトとして進めていきますので、もう少し設定などが必要になります。次回はその辺りをまとめていきたいと思います。   （過去記事） ・ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃3：動的ページ（投稿一覧）の実装 ・ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃2：フロントエンドでのサイト制作 ・ヘッドレスCMSのWordPressとNuxt.jsのSSGでJamstackなサイトを作成してみる ＃1：ヘッドレスCMSの構築