Nuxt.jsの動的ルーティングで起きた404の対策

こんにちは、フロントエンドエンジニアの小山です！
今回はWP REST API + Nuxt.jsを約半年やってみてハマったところとその対策を紹介します。

リロードすると404

とある案件にて WP REST API + Nuxt.js でニュース記事一覧とニュース記事ページを作成していた時のこと。
ローカル環境では特に問題なかったのですが、ビルドしたファイルをサーバに配置して動作確認したところ、ニュース記事ページをリロードすると404エラーになっちゃいました。

原因はNuxt.jsの動的ルーティングに起因するものでした。
Nuxt.jsではpagesディレクトリのツリー構造に沿って自動的にルーティングの設定をしてくれます。

pages
├── news
│ └── index.vue
│ └── _id.vue
└── index.vue

こんな感じにファイルを配置すると

[javascript]
http://localhost:3000/news/9999
[/javascript]

こんな感じのurlでnews/_id.vueを使ったページを表示できます。綺麗なURLですね。
_id.vue内ではURLにある「9999」を$nuxt.$route.query.idとして利用できます。

これ一見普通に動くんですが、リロードした時点で404になっちゃいます。
なんだろなーと思ってNuxt.jsの公式を調べに行くと…
「generate コマンドでは動的なルーティングは無視されます。」
どうやらこれが怪しい。

動的ルーティングを使うにはroutesの設定を

[javascript]
routes: [
‘news/1’,
‘news/2’,
‘news/3’,
]
[/javascript]

このようにして、あらかじめ決めておかなければならないとのこと。
これではページが増えるたびにroutesの設定を書き足さなければなりません。

結果から言うとREST的なURLを諦めました。

まず_id.vueのファイル名をアンスコなしに変更します。

pages
├── news
│ └── index.vue
│ └── id.vue ←アンスコのつかないファイル名
└── index.vue

そしてニュース記事へのリンクをパラメータ付きURLに変更します。

[javascript]
<nuxt-link :to="{path: ‘/news/id/’, query: {id: (ニュース記事のID)}}">ニュース記事</nuxt-link>
[/javascript]

これでなんとかroutesを毎回変更するのを回避しました。
でももうちょっとスマートなやり方がありそう。(routesの設定の中で記事一覧取って来て、そこから記事ID拾って返すとか..?)
もうちょっと勉強してみたいところです。