在Next-Shadcn仪表板项目中集成next-intl国际化方案

2025-06-14 07:18:33作者：农烁颖Land

背景介绍

Next-Shadcn仪表板项目是一个基于Next.js和shadcn/ui构建的现代化管理后台模板。在实际企业应用中，国际化支持是管理系统的常见需求。本文介绍如何在该项目中集成next-intl库来实现国际化功能。

next-intl简介

next-intl是一个专为Next.js设计的国际化解决方案，它提供了完整的i18n支持，包括：

多语言文本管理
日期/时间本地化
数字/货币格式化
复数处理
语言切换功能

集成步骤

1. 安装依赖

首先需要安装next-intl核心库：

npm install next-intl

2. 配置next-intl

由于仪表板类应用通常不需要多语言路由，我们可以采用无i18n路由的配置方式：

├── messages
│   ├── en.json
│   ├── zh.json
│   └── ...

在next.config.js中配置插件：

const withNextIntl = require('next-intl/plugin')();

module.exports = withNextIntl({
  // 其他Next.js配置
});

3. 创建国际化提供者

在app目录下创建i18n.ts文件：

import {getRequestConfig} from 'next-intl/server';

export default getRequestConfig(async ({locale}) => ({
  messages: (await import(`../messages/${locale}.json`)).default
}));

4. 包装根布局

修改app/layout.tsx，添加国际化提供者：

import {NextIntlClientProvider} from 'next-intl';
import {notFound} from 'next/navigation';

export default async function RootLayout({
  children,
  params: {locale}
}: {
  children: React.ReactNode;
  params: {locale: string};
}) {
  let messages;
  try {
    messages = (await import(`../../messages/${locale}.json`)).default;
  } catch (error) {
    notFound();
  }

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider locale={locale} messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

使用示例

在组件中使用翻译

import {useTranslations} from 'next-intl';

function LoginForm() {
  const t = useTranslations('Login');
  
  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('description')}</p>
    </div>
  );
}

日期本地化

import {useFormatter} from 'next-intl';

function DateDisplay() {
  const format = useFormatter();
  const date = new Date();
  
  return (
    <div>
      {format.dateTime(date, {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })}
    </div>
  );
}