日本語スラッグの投稿がNext.jsで404になった話

ヘッドレスWordPress + Next.jsで実績ページ(/projects/[slug])を作っていたとき、一覧からリンクをクリックすると404になる不具合に遭遇しました。

原因#

WordPress側の投稿スラッグを日本語のまま(例: 「wordpressオリジナルテーマ作成」)にしていたことが原因でした。一覧ページのリンクはブラウザによってURLエンコードされるため、実際のリンク先は次のようになります。

/projects/wordpress%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%E3%83%86%E3%83%BC%E3%83%9E%E4%BD%9C%E6%88%90

Next.jsのApp Routerはこの値を自動でデコードしてくれると思い込んでいましたが、実行環境によってはparams.slugがエンコードされたまま渡ってくるケースがあり、WordPress側のGraphQL(nodeByUri)に渡すURIと文字列が一致せず、該当データが見つからない(＝404)という結果になっていました。

対処#

1. WordPress側の投稿スラッグをローマ字(例: wordpress-theme)に変更した(パーマリンクが読みやすくなる副次効果もある)
2. 念のためNext.js側でもdecodeURIComponent(params.slug)を通してからGraphQLに渡すようにし、日本語スラッグの投稿が増えても壊れないよう防御的にした

日本語タイトルの投稿を作るときは、パーマリンク欄でスラッグをローマ字に直す一手間を忘れないようにしたいです。