How do I dynamically generate pages with Next.js when route contains special characters?

Question

I'm currently developing af solution with Next.js and Prismic. I have a custom article type and I want to create a "tag" page that shows articles with a given tag. Much like Wordpress and other content management systems. I'm using the built-in tag functionality in Prismic documents.

It works and I can generate the correct paths for ordinary characters. The language of the site is Danish and therefore I'm using the following characters in my tags: æ, ø, å. These are usually translated in URI's in the following way:

æ: ae ø: oe å: aa I would like to display the "encoded" value in the URI but still pass the regular written value as a prop in the generated page.

Example route: /articles/tag/traening Should pass the prop as: træning.

I cannot get this to work. I have created the following logic for getStaticPaths and getStaticProps:

export async function getStaticPaths({ previewData }) {
  const client = createClient({ previewData });
  const articles = await client.getAllByType("artikel");

  let allTags = articles.map((a) => a.tags).flat(1);

  const paths = allTags.map((tag) => ({
    params: {
      tag: tag.toLocaleLowerCase(),
    },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params, previewData }) {
  const client = createClient({ previewData });

  const tag = params.tag;
  const correctTag = tag.charAt(0).toUpperCase() + tag.slice(1);

  const navigation = await client.getSingle("navigation");
  const settings = await client.getSingle("settings");
  const articles = await client.getAllByTag<ArtikelDocument>(correctTag);

  return {
    props: {
      tag,
      articles,
      navigation,
      settings,
    },
  };
}

Do you have any potential solution to this problem? My only solution so far is to use the special character in the URI eg. /article/tag/træning. However, I would like to avoid this.