microCMS+Nuxt.jsのブログ個別ページでの前後記事へのリンク設定

「_id.vue」 の <script>タグ全体は、下のような感じです。

<script>
import axios from 'axios'
export default {
 async asyncData({ $config, params, error }) {
   try {
     const { data } = await axios.get(`${$config.apiUrl}/blog/${params.id}`, {
       headers: { 'X-API-KEY': $config.apiKey },
     })
     const links = await axios.get(
       `${$config.apiUrl}/blog/?limit=100
     &fields=id,title,`,
       {
         headers: { 'X-API-KEY': $config.apiKey },
       }
     )
     const index = links.data.contents.findIndex((content) => content.id === params.id)
     const prevLink = links.data.contents[index - 1];
     const nextLink = links.data.contents[index + 1];
     return {
       item: data,
       prev: prevLink,
       next: nextLink,
     }
   } catch (err) {
     error({
       errorCode: 404,
     })
   }
 },
 ・・・省略
 </script>

ちなみに、下では、個別記事（「_id.vue」 ）自体の内容を取得しています。

const { data } = await axios.get(`${$config.apiUrl}/blog/${params.id}`,

肝心なのは、下の箇所からです。

const links = await axios.get(
`${$config.apiUrl}/blog/?limit=100
&fields=id,title,`,

最大100件の記事（limit=100）の
各記事のidとtitleだけ（fields=id,title,）を取得し、定数 linksに代入。
※ 「 fields=id,title, 」 最後の「 ,（カンマ）」がないとtitleまで取得できなかったので、追加しています。

そして、

const index = links.data.contents.findIndex((content) => content.id === params.id)

定数 links の中から、現在のブログ個別ページのid名（params.id）と同じ idの配列インデックス番号を取り出して、定数 index に代入します。

そして、

const prevLink = links.data.contents[index - 1];
const nextLink = links.data.contents[index + 1];

定数 prevLink には、個別記事の前の記事のリンクとタイトル
定数 nextLink には、個別記事の次の記事のリンクとタイトルが入ってます。

「_id.vue」 <template>タグでは、

<template>
・・・省略・・・
<li v-if="prev">
<a :href="prev.id" rel="prev">{{ prev.title }}</a>
</li>
<li v-if="next">
<a :href="next.id" rel="next">{{ next.title }}</a>
</li>​
・・・省略・・・
</template>

上のようにしてます。

v-if="prev"、v-if="next"を設定してやることで、
最初のページの前の記事、最後のページの次の記事の
リンクがないことに対応させています。