Next.js+MDX博客：多词/西里尔字母标签动态路由适配

核心思路 #

统一前后端的标签转译逻辑，确保动态路由生成的路径和文章列表中链接的路径完全一致，同时在静态生成时正确映射转译后的标签与原标签的对应关系。

步骤1：抽离统一的标签转译函数 #

先把标签转译逻辑抽成单独的工具函数，避免前后端实现不一致：

// utils/tagUtils.js
import _ from 'lodash';
import transliterate from 'transliteration';

export const formatTagForUrl = (tag) => {
  return _.kebabCase(transliterate(tag));
};

// 处理转译后标签的反向映射，用于匹配原标签
export const getTagMap = (allTags) => {
  return allTags.reduce((map, tag) => {
    const formatted = formatTagForUrl(tag);
    // 避免重复覆盖，保留第一个出现的原标签
    if (!map[formatted]) {
      map[formatted] = tag;
    }
    return map;
  }, {});
};

步骤2：修改pages/blog/tag/[tag].js中的getStaticPaths #

生成静态路径时，用转译后的标签作为路由参数：

// pages/blog/tag/[tag].js
import { getAllTags } from '../../lib/posts'; // 假设你有获取所有唯一标签的方法
import { formatTagForUrl } from '../../utils/tagUtils';

export async function getStaticPaths() {
  const allTags = getAllTags();
  const paths = allTags.map((tag) => ({
    params: {
      tag: formatTagForUrl(tag), // 用转译后的标签生成合法路径
    },
  }));

  return {
    paths,
    fallback: false, // 按需设置为true以支持动态新增标签
  };
}

步骤3：修改getStaticProps匹配原标签 #

接收转译后的路由参数，反向匹配原标签并筛选对应文章：

// pages/blog/tag/[tag].js
import { getAllPosts } from '../../lib/posts';
import { getTagMap } from '../../utils/tagUtils';

export async function getStaticProps({ params }) {
  const allPosts = getAllPosts();
  const allTags = allPosts.flatMap(post => post.frontmatter.tags);
  const tagMap = getTagMap(allTags);
  
  // 从转译后的标签获取原标签
  const originalTag = tagMap[params.tag];
  // 筛选包含原标签的文章
  const postsWithTag = allPosts.filter(post => 
    post.frontmatter.tags.includes(originalTag)
  );

  // 无匹配文章时返回404
  if (!postsWithTag.length) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      posts: postsWithTag,
      currentTag: originalTag, // 传递原标签用于页面展示
    },
  };
}

步骤4：确保文章列表的标签链接一致 #

在所有渲染标签链接的地方，使用同一个转译函数：

// 文章列表或详情页组件
import { formatTagForUrl } from '../utils/tagUtils';

// 渲染标签链接示例
{post.frontmatter.tags.map((tag) => (
  <a key={tag} href={`/blog/tag/${formatTagForUrl(tag)}`}>
    {tag}
  </a>
))}

注意事项 #

• 若存在不同原标签转译后结果相同的情况，需在getTagMap中自定义冲突处理规则（比如添加后缀区分）
• 若开启fallback: true，需在getStaticProps中兼容动态请求的转译逻辑，确保一致性

内容的提问来源于stack exchange，提问作者Л</think_never_used_51bce0c785ca2f68081bfa7d91973934>