🔢Free Online Calculators

构建多语言计算器平台：开发者的真实故事

深入解析如何用 Next.js 15、React 19 和 next-intl 构建高性能的多语言计算器平台，包括国际化实现、SEO优化和性能优化策略。

10 分钟阅读
Next.jsReact国际化SEO性能优化TypeScript

嘿，各位开发者朋友们！👋

如果你曾经尝试过构建一个需要为全世界用户服务的网站，你就知道这有多具有挑战性。我最近踏上了创建 Free Calculators 的旅程——一个为12种不同语言用户服务的平台，让我告诉你，这真是一次冒险！

在这篇文章中，我想分享构建这个多语言计算器平台背后的真实故事。不仅仅是"这是我们做了什么"的版本，而是"这是实际发生了什么，出了什么问题，我们学到了什么"的版本。因为说实话，为全球受众构建应用绝非易事。

我们为什么要构建这个（以及为什么它很重要）

想象一下：你在构建一个计算器应用。很简单，对吧？但然后你意识到，日本的某个人可能需要日语版本，巴西的某个人可能更喜欢葡萄牙语，而你的德国用户绝对希望数字按照德国的方式格式化（1.234,56 而不是 1,234.56）。突然间，你的简单计算器变成了一个复杂的国际项目。

这正是我们遇到的情况。我们从基础计算器开始，最终构建了一个为不同文化、语言和数字格式的用户服务的平台。你知道吗？这是我参与过的最有意义的项目之一。

技术栈选择：为什么我们选择了这些工具

为什么是 Next.js 15？

说实话，当 Next.js 15 刚发布时，我们有点犹豫。毕竟，"如果没坏，就不要修"对吧？但当我们看到新的 App Router 和 React 19 的集成时，我们决定冒险一试。结果证明这是一个明智的选择。

// 这就是我们如何设置路由的
export const routing = defineRouting({
  locales: [
    'en',
    'zh',
    'ja',
    'ko',
    'fr',
    'de',
    'es',
    'pt',
    'ru',
    'ar',
    'hi',
    'it',
  ],
  defaultLocale: 'en',
  localePrefix: 'as-needed', // 这个设置让我们免去了很多麻烦
  localeDetection: true,
});

React 19：值得升级吗？

简短回答：绝对值得！长回答：我们遇到了一些兼容性问题，但新特性的性能提升是显著的。特别是 Suspense 和并发特性的改进，让我们的用户体验有了质的提升。

TypeScript：我们的救星

如果没有 TypeScript，我无法想象如何管理12种语言的翻译文件。类型安全让我们在重构时有了信心，特别是在处理复杂的嵌套翻译对象时。

// 这就是我们如何定义翻译类型的
interface TranslationKeys {
  nav: {
    siteName: string;
    home: string;
    calculators: string;
  };
  common: {
    calculate: string;
    clear: string;
    result: string;
  };
}

国际化实现：真实的挑战和解决方案

挑战1：语言检测的复杂性

你可能会想，"语言检测？简单！"但实际上不是。用户可能从不同的设备访问，可能使用VPN，可能偏好特定的语言设置。我们花了很多时间完善语言检测逻辑。

// 我们的中间件配置
import createMiddleware from 'next-intl/middleware';
import { routing } from '@/i18n/routing';

export default createMiddleware(routing);

export const config = {
  matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)',
};

挑战2：翻译文件管理

管理12种语言的翻译文件就像管理12个不同的项目。我们开发了一些自动化脚本来帮助我们：

// 我们的翻译管理脚本
const addMissingTranslations = async () => {
  const baseTranslations = await loadTranslations('en');
  const allLocales = await getAllLocales();

  for (const locale of allLocales) {
    const existingTranslations = await loadTranslations(locale);
    const missingKeys = findMissingKeys(baseTranslations, existingTranslations);

    if (missingKeys.length > 0) {
      console.log(`Missing keys in ${locale}:`, missingKeys);
      await addMissingKeys(locale, missingKeys);
    }
  }
};

挑战3：数字格式化的陷阱

这是最有趣的挑战之一。你知道吗，不同国家有不同的数字格式？德国用逗号作为小数分隔符，美国用句号。我们在处理货币计算时遇到了很多问题，直到我们实现了正确的本地化格式化。

SEO优化：让搜索引擎喜欢我们

静态站点生成的力量

我们决定使用静态站点生成（SSG），这可能是我们做过的最好的决定之一。不仅页面加载速度极快，SEO效果也非常好。

// 为每种语言生成静态页面
export const dynamic = 'force-static';

export function generateStaticParams() {
  return routing.locales
    .filter(locale => locale !== routing.defaultLocale)
    .map(locale => ({ locale }));
}

元数据生成的艺术

为每种语言生成正确的元数据需要一些技巧。我们开发了一个系统来自动生成SEO友好的元数据：

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'Home' });

  return {
    title: t('title'),
    description: t('description'),
    openGraph: {
      title: t('title'),
      description: t('description'),
      locale: locale,
    },
  };
}

性能优化：让用户体验更流畅

图片优化的重要性

我们花了很多时间优化图片加载。AVIF和WebP格式的采用让我们的页面加载速度提升了40%。

// next.config.ts 中的图片配置
images: {
  formats: ['image/avif', 'image/webp'],
  domains: ['freecalculators.app'],
  deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
}

缓存策略：我们的秘密武器

实现正确的缓存策略需要一些试错。我们最终采用了分层缓存策略：

async headers() {
  return [
    // 静态资源使用强缓存
    {
      source: '/(.*).(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)',
      headers: [{
        key: 'Cache-Control',
        value: 'public, max-age=31536000, immutable',
      }],
    },
    // 页面使用协商缓存
    {
      source: '/(.*)',
      headers: [{
        key: 'Cache-Control',
        value: 'public, max-age=0, must-revalidate',
      }],
    },
  ];
}

用户体验设计：让每个人都感到受欢迎

响应式设计的挑战

确保我们的计算器在所有设备上都能正常工作是一个持续的挑战。我们采用了移动端优先的方法：

// 移动端优先的响应式布局
<div className="flex flex-col md:flex-row gap-4">
  <div className="w-full md:w-1/2">
    {/* 计算器界面 */}
  </div>
  <div className="w-full md:w-1/2">
    {/* 结果展示 */}
  </div>
</div>

无障碍性：不只是为了合规

我们意识到无障碍性不仅仅是法律要求，它是正确的事情。我们为每个交互元素添加了适当的ARIA标签：

<button
  aria-label={t('common.calculate')}
  aria-describedby="calculator-help"
  className="bg-blue-600 text-white px-4 py-2 rounded"
>
  {t('common.calculate')}
</button>

开发工具链：让开发更高效

错误监控：我们的安全网

我们集成了Sentry进行错误监控，这帮助我们发现了许多我们从未预料到的问题：

export default withSentryConfig(withNextIntl(nextConfig), {
  org: 'my-projects-pd',
  project: 'free-calculators',
  widenClientFileUpload: true,
  disableLogger: true,
  automaticVercelMonitors: true,
});

自动化翻译管理

我们开发了一些脚本来管理翻译文件，这些脚本现在是我们工作流程中不可或缺的一部分。

我们学到的教训

1. 从开始就考虑国际化

如果你认为你可能需要多语言支持，从一开始就设计它。后期添加国际化比从一开始就设计要困难得多。

2. 用户体验胜过技术炫技

我们花了很多时间优化性能，但最终用户最关心的是界面是否直观、计算是否准确。

3. 自动化是关键

手动管理12种语言的翻译是不现实的。自动化脚本是我们项目的生命线。

4. 测试，测试，再测试

不同的语言有不同的文本长度，不同的数字格式，不同的文化期望。充分的测试是必须的。

未来计划

我们正在考虑添加更多语言，改进我们的翻译管理流程，并探索AI辅助翻译的可能性。但最重要的是，我们想继续为用户提供最好的计算器体验。

结语

构建多语言Web应用是一个挑战，但也是一个非常有益的体验。通过合理的技术选择和大量的测试，我们成功创建了一个真正为全球用户服务的平台。

如果你正在考虑构建多语言应用，我希望这篇文章能给你一些启发。记住，每一个挑战都是一个学习的机会，每一个错误都是通往成功的垫脚石。

项目链接：https://www.freecalculators.app 技术栈：Next.js 15, React 19, TypeScript, Tailwind CSS, next-intl