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
相关推荐
m0_5287238128 分钟前
HTML中,title和h1标签的区别是什么?
前端·html
Dark_programmer28 分钟前
html - - - - - modal弹窗出现时,页面怎么能限制滚动
前端·html
GDAL34 分钟前
HTML Canvas clip 深入全面讲解
前端·javascript·canvas
禾苗种树35 分钟前
在 Vue 3 中使用 ECharts 制作多 Y 轴折线图时,若希望 **Y 轴颜色自动匹配折线颜色**且无需手动干预,可以通过以下步骤实现:
前端·vue.js·echarts
贵州数擎科技有限公司1 小时前
使用 Three.js 实现流光特效
前端·webgl
JustHappy1 小时前
「我们一起做组件库🌻」做个面包屑🥖,Vue的依赖注入实战💉(VersakitUI开发实录)
前端·javascript·github
拉不动的猪1 小时前
刷刷题16
前端·javascript·面试
祈澈菇凉3 小时前
如何结合使用thread-loader和cache-loader以获得最佳效果?
前端
垣宇3 小时前
Vite 和 Webpack 的区别和选择
前端·webpack·node.js
java1234_小锋3 小时前
一周学会Flask3 Python Web开发-客户端状态信息Cookie以及加密
前端·python·flask·flask3