generateによる動的ルートの生成

今年に入ってから自分の勉強を兼ね、NUXTを使ってホームページを書き直しました。NUXTはサーバ側でページを生成するので、SEOに向いているなどの利点があります。
NUXTは静的なページだけでなく、

  • /pages/blog/_id.vue  = ブログ
  • /pages/samples/_id.vue  = サンプル

のように動的にページを作成することもできます。今回のホームページではブログ、サンプル、書籍を動的ページとして作成しました。コンテンツはcontentfulで作成し、JavaScriptで取得して描画しています。

index.htmlから動的なページに遷移するのは可能ですが、動的なページに直接遷移することはできません。PageNotFoundというエラーになってしまいます。
このような状況を回避するには、サーバサイドでgenerateが実行されたときに、routeを作成しておく必要があります。

今回はnuxt.config.jsに以下の項目を追加しました。

const contentful = require('contentful');
const client = contentful.createClient({
  space: config.CTF_SPACE_ID,
  accessToken: config.CTF_CDA_ACCESS_TOKEN
});
const blogPromise = client.getEntries({
  'content_type': 'blog',
  order: '-sys.createdAt'
});
const samplePromise = client.getEntries({
  'content_type': 'sample',
  order: '-sys.createdAt'
});
…中略…
  generate: {
    async routes() {
      return Promise.all([blogPromise, samplePromise])
      .then(([blogs, samples]) => {
        const r = []
        blogs.items.forEach(item => {
          r.push(`blog/${item.sys.id}`)
        })
        samples.items.forEach(item => {
          r.push(`sample/${item.sys.id}`)
        })
        return r;
      })
    }
  },

Promiseを2つ使っているので、それら両方の処理が終えるのを待機するためPromise.allを使用しています。
これでブログやサンプルの特定の記事に直接遷移することができるようになりました。
#多分これで大丈夫だとおもうのですが、、、