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

Developing with Prismic
,
1

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.

3

I've seen people online recommending encodeURI() for URL transformations