NextJS多语言

news2024/12/16 11:40:13

NextJS多语言

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

step1: 首先，安装next-intl

npm install next-intl

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

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

{
  "Index": {
    "title": "Welcome to our app",
    "editFile": "Edit this file to get started"
  }
}

en.json

{
  "Index": {
    "title": "你好",
    "editFile": "是的"
  }
}

zh.json **step4**: 在 /src/app 目录下创建一个 i18n.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 文件以配置支持的语言：

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 文件来处理语言切换：

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]文件夹下

内容如下：

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给的回复不是

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>
  );
}