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
相关推荐
264玫瑰资源库几秒前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端11 分钟前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED18 分钟前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪39 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程1 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常1 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师2 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚2 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑