在 Next.js 应用程序中简化多语言支持：无需 i18n

2024-03-10 01:29:29

Next.js 13/14 应用程序中的多语言支持：无需 i18n

对于包含有限页面的 Next.js 应用程序，使用 i18n 国际化可能会显得过于复杂。本指南将详细介绍如何在无需 i18n 的情况下实现多语言支持，从而简化你的应用程序开发。

检测用户语言

首先，你需要一种方法来确定用户的语言首选项。通常，可以通过以下途径实现：

浏览器语言首选项
cookie 或 localStorage

示例代码：

import { useState, useEffect } from "react";

function LanguageDetection() {
  const [language, setLanguage] = useState('');

  useEffect(() => {
    const userLang = navigator.language.split('-')[0];
    setLanguage(userLang);
  }, []);

  return (
    <Context.Provider value={language}>
      {/* 应用程序 */}
    </Context.Provider>
  );
}

根据语言加载 JSON 数据

接下来，需要加载与用户语言对应的 JSON 文件。例如，可以创建 en.json 和 fr.json 文件，并根据用户的语言首选项加载它们。

示例代码：

import { useEffect, useContext, useState } from "react";

function MyComponent() {
  const language = useContext(LanguageContext);
  const [data, setData] = useState({});

  useEffect(() => {
    const langFile = `${language}.json`;
    const dataUrl = `/public/lang/${langFile}`;

    fetch(dataUrl)
      .then(res => res.json())
      .then(data => setData(data))
      .catch(err => console.error(err));
  }, [language]);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

示例

将上述方法应用到你的应用程序中：

// pages/_app.js
import LanguageDetection from '../components/LanguageDetection';

function MyApp({ Component, pageProps }) {
  return (
    <LanguageDetection>
      <Component {...pageProps} />
    </LanguageDetection>
  );
}

// components/MyComponent.js
import { useEffect, useContext, useState } from "react";

function MyComponent() {
  const language = useContext(LanguageContext);
  const [data, setData] = useState({});

  useEffect(() => {
    const langFile = `${language}.json`;
    const dataUrl = `/public/lang/${langFile}`;

    fetch(dataUrl)
      .then(res => res.json())
      .then(data => setData(data))
      .catch(err => console.error(err));
  }, [language]);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

总结

通过使用语言检测和 JSON 数据加载，你可以轻松地在无需 i18n 的情况下为 Next.js 应用程序提供多语言支持。这对于页面数量较少，且不需要复杂语言翻译的应用程序来说是一个简单有效的解决方案。

常见问题解答

是否可以在 i18n 和此方法之间切换？

是的，你可以随时切换到 i18n 或其他国际化解决方案。
此方法是否适用于动态加载的页面？

是的，它适用于使用 getInitialProps 和 getServerSideProps 的页面。
如何处理 URL 中的语言前缀？

可以通过使用路由器重定向或在你的服务器端代码中解析 URL 来实现。
如何翻译图像或其他非文本内容？

对于图像，可以使用懒加载或内容分发网络 (CDN) 提供不同语言版本。对于其他内容，可以通过在 JSON 文件中添加额外的字段来实现翻译。
此方法可以扩展到支持大量语言吗？

虽然此方法对于少数语言有效，但对于大量语言，建议使用 i18n 解决方案以获得更好的可扩展性和管理性。