NextJS dynamic routing in Korean

While developing my personal blog, I wanted to slugify Korean text as well. However, Next.js threw a routing error, stating "Not Found.”

Despite searching extensively on GitHub, Google, and Stack Overflow, I couldn’t figure out the cause. Eventually, I found a post explaining that Korean characters are automatically URL-encoded when passed as parameters through the routing system. This happens because browsers and web servers often encode non-ASCII characters (such as Korean) to ensure safe transmission over the network, as URLs are generally designed to work with ASCII characters.

The solution was to use decodeURIComponent. By decoding the parameter as shown below, the issue was resolved:


export default async function Page({ params }: { params: { category: string } }) {
  const categoryList: CategoryModel[] = await getCategoryList();
  const decodedCategorySlug = decodeURIComponent(params.category);
  ...
}

After decoding the parameter with decodeURIComponent, Next.js correctly handled Korean paths.

However, this will only work in a local development environment if you set dynamicParams = false.