Next.js の SSG で日本語 tag を dynamic routes でマッチさせる

Netlify, Next.js, MDX で SSG ブログを作った の時に [tag].jsx 中の getStaticPaths で tag の routes を定義していたが、日本語の対応が漏れていた。

内容としては、encodeURIComponent を実行した状態で tag を設定するだけで終わり。

export async function getStaticPaths() {
    /* mdx compiler */
    const fs = require('fs');
    const fm = require('front-matter');
    const glob = require('glob');
    const dateFormat = require('dateformat');

    let tags = new Set();
    glob.sync('./**/*.mdx').map((path) => {
        const file = fs.readFileSync(path, 'utf8');
        const content = fm(file).attributes;

        content.tags.map((tag) => {
            // params に追加する tag をエンコードしておく
            tags.add(encodeURIComponent(tag));
        });
    });

    const paths = [...tags].map((tag) => {
        return {
            params: {
                tag
            }
        };
    });

    return { paths, fallback: false };
}

ついつい日本語でタグ付けする可能性を忘れてしまっていたけど、さっきブログ書いている時に日本語タグ見て動作確認したら動いていなかったので修正。

ルーティング確認時にブラウザ上での URL Route を確認する事が頭から抜けていたのが敗因だった。