Messing with RSS feed recently (as NextJS do not have any official RSS parser plugin) , I realised Chinese URL links generated were not validated. UTF-8 encoded Chinese characters were not considered as valid.

What I've Learned

Punycode is a special encoding used to convert Unicode characters to ASCII, which is a smaller, restricted character set. Punycode is used to encode internationalized domain names (IDN).

How to recreate the problem?

Punycode is available to encode strings of Unicode to ASCII symbols, however, the returned URL is not working as expected. For example, a Chinese blog link like個指明地方納入強制檢測公告-004959684.html was converted into instead of

Action Items

Following code does not work as expected. Only the variable was converted instead of the whole URI string.

  .map((fileName) => {
    // we need the full path of the file to be able to read it
    const fullPath = path.join(blogPostDir, fileName);
    // read the file so we can grab the front matter
    const file = fs.readFileSync(fullPath, "utf8");
    // for the RSS feed we don't need the html, we
    // just want the attributes
    const { data: frontmatter, content } = matter(file);
    const excerpt = getExcerpt(content, 800);
    const url = CONFIG.URL + `/posts/` + fileName.replace(".md", "") + `/`;
    // console.log(excerpt);
    // I want access to the fileName later on so we save it to our object
    return { ...frontmatter, fileName, excerpt, url };
  // sort the items by date in descending order, feel free
  // to customize this as needed to sort your RSS items properly
  .filter((post) => post.draft === false)
  .sort((a, b) => +new Date( - +new Date(
  // loop over each blog post and add it to our RSS feed
  .forEach(({ title, date, tags, category, fileName, excerpt, url }) => {
    // title, description, and date are properties of my front matter
    // attributes. Yours might be different depending on your data structure
      description: excerpt,
      url: punycode.encode(url),
      author: CONFIG.AUTHOR_NAME,
      categories: tags,
Last Updated February 11, 2022

Related posts

    Figma Best Practices

    Figma Best Practice introduces the best industry practice created by Figma team.

    Unsplash Instant as New Tab

    Recently I have reinstalled my computer. Previously, I used Mustsee as my default Chrome new tab with amazing tourist spots around the world. Now I have switched to Unsplash Instant with the feature s