World Hacker（ぎょうざブログ） 2024-03-21
【Next.js】decodeURI(”hoge”) hoge日本語を含んだ文字列
【前提】
Notionで記事を管理し、Next.jsでフロントエンドを構築されている方。
【現象】
日本語を含んだURLは、getStaticPathsでルーティングがうまくいかないことがあります。
【原因&解決策】
URLエンコードされない文字列だけを想定して開発されているのでれば
例として、以下のようなコードでURLのルーティングが可能になります。
export const getStaticPaths: GetStaticPaths = async () => {
const { results }: { results: Record<string, any>[] } = await fetchPages({});
const pathSet: Set<string> = new Set();
for (const page of results) {
for (const tag of getMultiSelect(page.properties.tags.multi_select)) {
pathSet.add(tag);
}
}
const paths = Array.from(pathSet).map((tag) => {
return {
params: {
tag: tag,
},
};
});
return {
paths: paths,
fallback: "blocking",
};
};▼
export const getStaticPaths: GetStaticPaths = async () => {
// 中略
const paths = Array.from(pathSet).map((tag) => {
return {
params: {
tag: decodeURI(tag),
},
};
});
// 中略
};