多语言 Headless 方案：无头架构下的语言处理

引言：前后端分离后语言怎么走

Headless 把 WP 当纯数据后端，前端框架管渲染。语言逻辑移到前端：路由带语言、API 按 lang 取数、hreflang 在前端 输出。

原理分析：架构分工

• 后端 WP：用 WPML/Polylang 存译文，REST/GraphQL 按 lang 供（见上篇）。
• 前端：用 i18n 库（next-intl、react-i18next）管界面文字；路由 /[lang]/...；切换语言改路由并重新取数。
• SEO：前端每语言页输出 hreflang + canonical（见 hreflang 篇）。

保姆级实操

Next.js 路由：

// app/[lang]/page.jsx
export default function Page({ params }) {
  const { lang } = params;
  // 拉取对应 lang 数据
  return <article>...</article>;
}
// 在 layout 输出 hreflang
<link rel="alternate" hreflang={lang} href={`/...`} />

WP 端点按 lang 返 JSON。

常见坑

1. 前端 hreflang 漏，收录错。
2. API 不按 lang，前端串语。
3. 案例：某站 Next.js + WP 无头，前端路由带 lang + 后端按 lang 供数，hreflang 前端输出，多语言收录正常。
4. canonical 在前端错指向，冲突。
5. 界面文字没 i18n，硬写死。

总结

判断标准：后端按 lang 供数 + 前端路由/i18n + 前端输出 hreflang。行动清单：API 按 lang → 前端路由 → i18n 界面 → hreflang 前端 → 验收录。详见多语言 REST API 输出。