Next.js App Router + Crystallize CMS动态国际化路径适配方案咨询

针对你遇到的「多语言环境下Crystallize路径与本地英文文件夹不匹配」的问题，以下是几个实用的解决思路：

方案1：优化i18n路径映射表 #

这是你提到的思路的落地优化版本，核心是用JSON维护不同语言的路径与本地文件夹的对应关系：

• 新建i18n-path-mapping.json文件：

{
  "en": {
    "about-us": "about-us"
  },
  "no": {
    "om-oss": "about-us"
  }
}

• 在动态路由页面app/[lang]/[...slug]/page.tsx中做匹配：
  1. 解析当前请求的lang和slug参数
  2. 从映射表中找到对应语言下，该slug对应的本地文件夹名称
  3. 调用Crystallize API获取对应语言的内容，同时渲染目标文件夹下的page.tsx组件
• 补充重定向逻辑：如果请求的slug在当前语言映射中不存在，直接返回404或跳转到默认语言的对应路径

方案2：用Next.js中间件做路径重写 #

通过中间件拦截请求，在后台重写路径，用户看到的URL保持本地化路径，实际渲染的是英文文件夹的组件：

• 新建middleware.ts文件：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

// 维护语言到路径的映射
const pathRewrites = {
  no: {
    '/om-oss': '/about-us'
  }
};

export function middleware(request: NextRequest) {
  const urlParts = request.nextUrl.pathname.split('/');
  const lang = urlParts[1]; // 假设语言前缀在路径第一位，如/no/om-oss
  const currentPath = `/${urlParts.slice(2).join('/')}`;

  // 检查是否需要重写路径
  if (pathRewrites[lang] && pathRewrites[lang][currentPath]) {
    const targetPath = `/${lang}${pathRewrites[lang][currentPath]}`;
    return NextResponse.rewrite(new URL(targetPath, request.url));
  }

  return NextResponse.next();
}

// 匹配所有带语言前缀的路径
export const config = {
  matcher: ['/:lang/:path*'],
};

• 效果：用户访问/no/om-oss时，URL不变，但实际会渲染about-us/page.tsx组件，同时你可以正常调用挪威语的Crystallize API

方案3：基于Crystallize内容结构的动态匹配 #

完全依托Crystallize的多语言内容节点，摆脱本地文件夹名称的限制：

• 在app/[lang]/[...slug]/page.tsx中，根据当前lang和slug调用Crystallize的GraphQL API，查询对应语言的内容节点
• 维护一个组件映射表，比如根据节点的类型或ID，匹配到对应的本地组件（如AboutUsPage）
• 直接渲染匹配到的组件，并传入Crystallize返回的多语言内容
• 优势：不需要硬编码路径映射，后续新增语言或页面时，只需在Crystallize中配置内容即可，扩展性更强

额外提示 #

• 语言切换链接生成：切换语言时，根据当前路径和目标语言，从映射表或Crystallize内容中获取对应的本地化slug，确保跳转路径正确
• 404处理：当请求的路径在对应语言下无匹配内容时，返回自定义404页面，提升用户体验

内容的提问来源于stack exchange，提问作者Elias.E