Next.js 15 国际化与多区域部署：i18n 路由、地理分发与 SEO 一体化实践概述构建面向全球用户的站点需要同时解决语言、地区、性能与搜索引擎友好性。本文给出 Next.js 15 在 App Router 下的 i18n 路由、边缘地理分发、PPR 与 SEO 的一体化落地方案。技术背景App Router 强化了 RSC、PPR 与缓存标签；Edge Middleware 支持基于地理信息的路由选择；Metadata API 提供标准化 SEO 输出；`next.config.js` 的 i18n 配置管理多语言与区域路径。核心内容i18n 路由与区域设置// next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { i18n: { locales: ['en-US', 'zh-CN', 'ja-JP', 'de-DE'], defaultLocale: 'en-US', domains: [ { domain: 'example.com', defaultLocale: 'en-US' }, { domain: 'example.cn', defaultLocale: 'zh-CN' }, { domain: 'example.jp', defaultLocale: 'ja-JP' } ] }, experimental: { ppr: true } } module.exports = nextConfig // app/[locale]/layout.tsx export default function LocaleLayout({ children, params }: { children: React.ReactNode; params: { locale: string } }) { const dir = params.locale.startsWith('ar') ? 'rtl' : 'ltr' return ( <html lang={params.locale} dir={dir}> <body>{children}</body> </html> ) } 边缘地理分发与重定向// middleware.ts import { NextResponse } from 'next/server' import type { NextRequest } from 'next/server' export function middleware(req: NextRequest) { const { geo } = req const country = geo?.country || 'US' const acceptLang = req.headers.get('accept-language') || '' const preferredLocale = acceptLang.includes('zh') ? 'zh-CN' : 'en-US' const url = req.nextUrl.clone() if (!url.pathname.startsWith('/en-US') && !url.pathname.startsWith('/zh-CN')) { // 基于国家与接受语言选择默认路径 const target = country === 'CN' ? 'zh-CN' : preferredLocale url.pathname = `/${target}${url.pathname}` return NextResponse.redirect(url) } return NextResponse.next() } export const config = { matcher: ['/((?!_next|api|static).*)'] } SEO 与 Metadata 一体化// app/[locale]/[slug]/page.tsx import type { Metadata } from 'next' export async function generateMetadata({ params }: { params: { locale: string; slug: string } }): Promise<Metadata> { const title = params.locale === 'zh-CN' ? '产品页面' : 'Product Page' const alternates = { canonical: `https://example.com/${params.locale}/${params.slug}`, languages: { 'en-US': `https://example.com/en-US/${params.slug}`, 'zh-CN': `https://example.com/zh-CN/${params.slug}` } } return { title, description: 'Localized product page', alternates, robots: { index: true, follow: true }, openGraph: { locale: params.locale, type: 'website', url: alternates.canonical, title, description: 'Localized product page' } } } PPR 与区域缓存策略// app/[locale]/page.tsx export const dynamic = 'force-static' export const revalidate = 3600 // 1 小时 export default async function Home({ params }: { params: { locale: string } }) { return ( <main> <h1>{params.locale === 'zh-CN' ? '欢迎' : 'Welcome'}</h1> </main> ) } Server Actions 与多语言表单// app/[locale]/actions.ts 'use server' import { z } from 'zod' const schema = z.object({ name: z.string().min(1), email: z.string().email() }) export async function submit(formData: FormData) { const data = Object.fromEntries(formData) const parsed = schema.safeParse(data) if (!parsed.success) return { ok: false, errors: parsed.error.flatten() } // TODO: 持久化到区域数据库或多区域写入队列 return { ok: true } } 技术参数与验证操作系统: Windows 11 / macOS 14 / Ubuntu 22.04Node.js: 20.x浏览器: Chrome 120+, Firefox 120+, Safari 17+边缘平台: Vercel Edge / Cloudflare Workers（地理信息 `req.geo` 验证）指标：首屏 LCP < 2.5s（CN/US 双区域），PPR 命中率 > 85%，国际化路由覆盖 4 语言应用场景电商站点全球化交付内容门户多语言 SEOSaaS 产品区域就近访问注意事项规范 `accept-language` 与 Geo 的优先级；避免循环重定向确保 `alternates.languages` 覆盖所有语言版本，生成 `hreflang`数据写入采用多区域一致性策略与队列重试常见问题Q: Edge Middleware 是否影响缓存？A: 会影响路径与缓存键，应结合标签失效与 PPR 策略设计。参考资料Next.js App Router DocsVercel Edge Middleware DocsRFCs: hreflang 与多语言 SEO---发布信息：已发布 · 技术验证 · 阅读 35 分钟 · CC BY-SA 4.0
投稿
微信公众账号
微信扫一扫加关注
评论 返回
顶部
发表评论 取消回复