Next.js WordPress Starter国际化支持：多语言网站构建完整指南-育师

Next.js WordPress Starter国际化支持：多语言网站构建完整指南

【免费下载链接】nextjs-wordpress-starterA headless starter for WordPress powered by Next.js.项目地址: https://gitcode.com/gh_mirrors/ne/nextjs-wordpress-starter

Next.js WordPress Starter是一个功能强大的无头CMS解决方案，它将WordPress的内容管理能力与Next.js的现代前端框架完美结合。本教程将带你了解如何为这个强大的 starter 项目添加全面的国际化支持，轻松构建面向全球用户的多语言网站。

国际化架构概览：前后端协同方案

Next.js WordPress Starter的国际化实现需要前端和后端的协同工作。WordPress作为内容管理后端，负责多语言内容的创建和管理；Next.js作为前端框架，则处理语言切换、路由国际化和内容展示。

图：Next.js WordPress Starter前后端架构展示，国际化支持需要两边协同配置

核心实现组件

后端：WordPress多语言插件 + WP GraphQL国际化扩展
前端：Next.js国际化路由 + 翻译管理库
数据传输：GraphQL查询多语言内容

后端配置：WordPress多语言内容管理

内容翻译工作流

在Polylang设置中配置网站支持的语言（如中文、英文、日文等）
为每种语言创建对应的菜单，确保导航也支持多语言切换

图：在WordPress后台设置多语言菜单，确保不同语言版本有独立导航结构

创建或编辑内容时，使用Polylang提供的翻译功能为每种语言创建对应内容

前端实现：Next.js国际化配置

安装国际化依赖

首先，需要安装Next.js国际化相关的依赖包。在项目根目录执行以下命令：

npm install next-translate react-i18next i18next

配置国际化文件

在项目根目录创建i18n.json配置文件：

{ "locales": ["zh-CN", "en", "ja"], "defaultLocale": "zh-CN", "pages": { "*": ["common"], "/": ["home"], "/about": ["about"] } }

/public/locales/ /zh-CN/ common.json home.json /en/ common.json home.json /ja/ common.json home.json

配置环境变量

在Vercel或本地开发环境中添加国际化相关的环境变量：

图：在Vercel后台配置国际化相关环境变量

添加以下环境变量：

NEXT_PUBLIC_SUPPORTED_LANGUAGES=zh-CN,en,ja NEXT_PUBLIC_DEFAULT_LANGUAGE=zh-CN

实现国际化路由

修改next.config.js文件，添加国际化配置：

const nextConfig = { i18n: { locales: ['zh-CN', 'en', 'ja'], defaultLocale: 'zh-CN', }, // 其他配置... }

数据获取：多语言内容查询

GraphQL查询多语言内容

在lib/wordpress/connector.js中配置GraphQL客户端，添加语言参数支持：

const query = gql` query GetPageBySlug($slug: ID!, $language: String!) { page(id: $slug, idType: URI, language: $language) { title content slug language { code } } } `;

页面组件中使用多语言数据

在页面组件中，通过语言参数获取对应语言的内容：

export async function getStaticProps({ locale }) { const { data } = await client.query({ query: GET_PAGE, variables: { slug: 'home', language: locale }, }); return { props: { page: data.page, locale, }, }; }

语言切换组件实现

创建一个语言切换组件，放在导航栏中：

// components/molecules/Navigation/LanguageSwitcher.js import { useRouter } from 'next/router'; const LanguageSwitcher = () => { const router = useRouter(); const { locales, locale: currentLocale } = router; return ( <div className="language-switcher"> {locales.map((locale) => ( <button key={locale} onClick={() => router.push(router.asPath, router.asPath, { locale })} disabled={locale === currentLocale} > {locale} </button> ))} </div> ); }; export default LanguageSwitcher;

将此组件添加到导航组件中，位置在components/molecules/Navigation/Navigation.js。

测试与部署

本地测试

启动开发服务器进行测试：

npm run dev

访问不同语言版本的网站，验证内容是否正确切换：

中文：http://localhost:3000
英文：http://localhost:3000/en
日文：http://localhost:3000/ja

部署注意事项

确保所有翻译文件都已提交到代码仓库
在部署平台（如Vercel）中正确配置环境变量
测试生产环境中的语言切换功能和内容加载

高级优化：提升国际化用户体验

自动检测用户语言

在_app.js中添加语言自动检测逻辑：

import { useEffect } from 'react'; import { useRouter } from 'next/router'; function MyApp({ Component, pageProps }) { const router = useRouter(); useEffect(() => { // 仅在首次加载且未指定语言时运行 if (!router.query.lang) { const userLang = navigator.language || navigator.userLanguage; const supportedLangs = process.env.NEXT_PUBLIC_SUPPORTED_LANGUAGES.split(','); // 检查用户语言是否受支持 const defaultLang = process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE; const lang = supportedLangs.includes(userLang) ? userLang : defaultLang; if (lang !== defaultLang) { router.push(`/${lang}`); } } }, []); return <Component {...pageProps} />; }

SEO优化

为多语言页面添加hreflang标签，在components/common/Meta.js中实现：

import Head from 'next/head'; const Meta = ({ page, locale }) => { const supportedLangs = process.env.NEXT_PUBLIC_SUPPORTED_LANGUAGES.split(','); return ( <Head> {/* 其他meta标签 */} {supportedLangs.map(lang => ( <link key={lang} rel="alternate" hreflang={lang} href={`https://yourdomain.com/${lang === process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE ? '' : lang}/${page.slug}`} /> ))} </Head> ); };