日本語スラッグをNext.js＋Supabaseで正しく扱うポイント

ブログ記事やCMSを構築する際、URLに使う「スラッグ」をどう扱うかは重要なテーマです。一般的にはアルファベットやハイフンを組み合わせたものを使うことが多いですが、ユーザーにとってわかりやすいのは日本語スラッグの場合もあります。例えば /posts/新規投稿画面を作成しました というURLの方が、内容が直感的に伝わりやすいですよね。しかし実際にNext.jsとSupabaseを組み合わせて日本語スラッグを利用すると、意外な落とし穴に直面しました。

404エラーの原因

問題は「404エラー」です。投稿は確かにDBに保存されているのに、リンクをクリックすると 「This page could not be found」 と表示されてしまう。原因を調べてみると、日本語文字列がURLに入った時点で自動的に パーセントエンコード され、DBに保存した値と一致しなくなることがわかりました。さらに、日本語の一部文字には複数の表現方法があり（例：濁点付きかな）、同じ「ガ」でも内部的には別物として扱われるケースがあるのです。

解決策：正規化とエンコード

この問題を解決する鍵が 文字列の正規化（normalize） と エンコード処理 です。

保存時：slug.normalize('NFC')
遷移時：encodeURIComponent(slug)
取得時：decodeURIComponent(params.slug).normalize('NFC')

これにより、DBとURLの差異がなくなり、日本語スラッグを安定して運用できるようになりました。

デバッグのコツ

DB取得には single() より maybeSingle() を推奨
実際に渡っている raw の値やDBのデータを console.log で確認

404に悩まされている場合は、まずここをチェックしてみるのがおすすめです。

まとめ

日本語スラッグはSEO的にも強みがありますし、ユーザーにとっても理解しやすいURLになります。正規化とエンコードを意識して実装すれば、Next.jsとSupabaseでも安心して日本語スラッグを活用できます。