結論

OK

nuxt.config.js

  generate: {
    async routes() {
      const pages = await axios
        .get(
          //APIリクエスト
        )
        .then((res) =>
          res.data.contents.map((content) => ({
            route: `/${content.id}`,
            payload: content,
          }))
        );
      return pages;
    },
  },

NG

nuxt.config.js

  generate: {
    async routes() {
      const pages = await axios
        .get(
          //APIリクエスト
        )
        .then((res) =>
          res.data.contents.map((content) => ({
            //スラッシュが。。。ない。。。（便宜上、無意味なテンプレートリテラルを使っています）
            route: `${content.id}`,
            payload: content,
          }))
        );
      return pages;
    },
  },

これで1週間くらい悩んだお話。

何が起きたのか

なんてことのない凡ミスなのですが、ここが原因と気づくのにかなり悩みました。

上記コードの通り、nuxtとheadless CMSの組み合わせで開発をしており、nuxt generateの設定で動的ルーティングの記述をしていました。

サンプルコードですが、実際の記事ページを以下のようなコードだと想定します。

/pages/_id/index.vue

<template>
  <div class="article">
    <p>{{ content.title }}</p>
  </div>
</template>

<script>
export default {
  name: "",
  async asyncData({ payload }) {
    if (payload) {
      return {
        content: payload,
      };
    }
  },
};
</script>
<style lang="scss">
</style>

そして、実際にnuxt generateしてページにアクセスした画面が以下のような感じです。

画面上には正しくcontent.titleが表示されているにも関わらず、コンソールにJSエラーが出ており、contentが未定義だと怒られています。

これ、説明できる方がいらしたらぜひコメントいただきたいのですが、とても不可解でした。

「generateのルーティング設定でパスの頭にスラッシュの記述を忘れると、ブラウザ上でvueのデータが再評価されてエラーを出力する」という現象だと思うのですが、理論的に原因が説明できません。。。

今回はカルーセルといったJavaScriptコードが動かなくなってしまい、解消に苦戦しました。

同じところでつまづいた方が少しでも楽に解決できればと、もやもやを残しながら投稿させていただきました。

以上です。