NextJS多语言

NextJS多语言

前面的步骤AI辅助下完成,但是会有些坑,记录一下

step1 : 首先,安装next-intl

shell 复制代码
npm install next-intl

step2 : 在 /src/app 目录下创建一个 [locale] 文件夹

step3: 创建一个 messages 文件夹(在==/src== 目录下),用于存储不同语言的翻译文件。例如:

json 复制代码
{
  "Index": {
    "title": "Welcome to our app",
    "editFile": "Edit this file to get started"
  }
}

en.json

json 复制代码
{
  "Index": {
    "title": "你好",
    "editFile": "是的"
  }
}

zh.json **step4**: 在 /src/app 目录下创建一个 i18n.js 文件:

js 复制代码
import {getRequestConfig} from 'next-intl/server';
 
export default getRequestConfig(async ({locale}) => ({
  messages: (await import(`../messages/${locale}.json`)).default
}));

// -------人工修正后----------------,locale参数被弃用,会一直warn
import {getRequestConfig} from 'next-intl/server';

export default getRequestConfig(async ({requestLocale}) => {
  // 等待 Promise 解析以获取实际的 locale 值
  const locale = await requestLocale;
  // console.log('getRequestConfig', locale);
  
  return {
    messages: (await import(`../messages/${locale}.json`)).default
  };
});

step5: 修改 next.config.mjs 文件以配置支持的语言:

js 复制代码
import createNextIntlPlugin from 'next-intl/plugin';

const withNextIntl = createNextIntlPlugin('./src/app/i18n.js');

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withNextIntl(nextConfig);

step6 : 需要在 /src/ 目录下创建一个 middleware.js 文件来处理语言切换:

js 复制代码
import createMiddleware from 'next-intl/middleware';
import { NextResponse } from 'next/server';

const intlMiddleware = createMiddleware({
  locales: ['en', 'zh'],
  defaultLocale: 'en'
});
// -----有一些调试信息--------------
export default function middleware(request) {
  console.log('Middleware is running for path:', request.nextUrl.pathname);
  
  const response = intlMiddleware(request);
  
  // 检查是否有重定向
  if (response instanceof NextResponse && response.headers.has('Location')) {
    console.log('Redirecting to:', response.headers.get('Location'));
  } else {
    // 如果没有重定向,尝试推断目标文件夹
    const locale = request.nextUrl.pathname.split('/')[1] || 'en';
    console.log('Likely targeting folder:', `/src/app/${locale}`);
  }

  return response;
}

export const config = {
  matcher: ['/((?!api|_next|.*\\..*).*)', '/', '/(zh|en)/:path*']
};

前面六步是ai的辅助下确定的步骤,标红的是我当时容易混淆的。后面一直报错,接近耗时3h解决

  • 自己对nextjs不熟悉
  • 使用的版本较新 next 15.0.3 next-intl 3.25.3

最烧脑的 for me,是layout.js、page.js,这两个文件我有点泠不太清

把脚手架创建的layout.js page.js移动到[locale]文件夹下

内容如下:

js 复制代码
export default async function RootLayout({ children , params  }) {
  const {locale} = await params;
  console.log("layoutjs", locale);
  return (
    <html lang={locale}>
      <body>
        layout js
        {children}
      </body>
    </html>
  );
}

layout.js

  • 去locale值需要异步,这是版本更新,可能AI给的回复不是
js 复制代码
import { useTranslations } from 'next-intl';

export default function Home() {
  const t = useTranslations('Index');
  console.log(t('title'));
  return (
    <div>
      page js
      <h1>{t('title')}</h1>
    </div>
  );
}

page.js

  • 这里没有问题,但是AI给的i18n.js的版本比较老,会warn
相关推荐
前端小巷子3 分钟前
跨域问题解决方案:开发代理
前端·javascript·面试
前端_逍遥生3 分钟前
Chrome 插件开发到发布完整指南:从零开始打造 TTS 朗读助手
前端·chrome
Mintopia4 分钟前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
天涯学馆5 分钟前
JavaScript 跨域、事件循环、性能优化面试题解析教程
前端·javascript·面试
掘金一周14 分钟前
别再用 100vh 了!移动端视口高度的终极解决方案| 掘金一周7.3
前端·后端
晴殇i16 分钟前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
咚咚咚ddd18 分钟前
cursor mcp实践:网站落地页性能检测报告(browser-tools)
前端
MiyueFE19 分钟前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript
Hilaku19 分钟前
2025年,每个前端都应该了解的CSS选择器:`:has()`, `:is()`, `:where()`
前端·css
OLong22 分钟前
2025年最强React插件,支持大量快捷操作
前端·react.js·visual studio code