動的ルーティングを導入した際に出会す 404 エラー
とある静的サイトを製作・立ち上げた際、動的ルーティングを導入したページ遷移の場面でその影響を受けたので簡単に書いておく。
static モード
Nuxt 2.13 以降より使える機能で API レスポンスも合わせた完全な静的化を実現できるのが特徴。
内部的にクローリング処理が行われており全てのリンク先を自動検出してページ生成してくれる。
すなわちこれまでにやっていたルーティング拡張をしなくて済む。
generate: {
async routes() {
const page = 0
const displayedFavoriteImages = await axios.get(
Endpoints.FAVORITE_IMAGE_LIST(page)
)
return [
...displayedFavoriteImages.data.map((image) => {
return { route: `gallery/${image.id}`, payload: image }
})
]
}
}
変更方法
デフォルト値が server を static に変更すれば良い。
export default {
target: 'static',
}
最後に
Next.js でも同様の Full Static Generation 機能は既に実現されているとのこと。
Next.js や Nuxt.js がありとあらゆることをこなしており、ブラックボックス化していることを改めて痛感させられた。