标签: i18next

我刚刚使用 Vue3 启动了一个新项目，并添加了我已设置的vue-i18n版本 9（https://vue-i18n.intlify.dev/guide/ ），但我无法更改语言。它正在进行翻译，因为它将更改{{ $t('message.value') }}为正确的句子。我无法更改语言，仅适用于区域设置语言。

我在浏览器控制台中收到此错误消息

You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

这是我的配置，但我无法将其更改为西班牙语

const i18n = VueI18n.createI18n({
  locale: 'en', // set locale
  fallbackLocale: 'en', // set fallback locale
  messages, // set locale messages

})

如果您能帮助我，告诉我我做错了什么，我将不胜感激。非常感谢

我的 React 应用程序使用next-i18nextpackage.json。我想在我的插值中放入一些 React 组件：

import React from 'react';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export default function Review({ text, author }) {
  const { t } = useTranslation('reviews');

  return (
    <article>
      <p>{text}</p>
      <footer>
        {t('footer', { author: <a href={author.url}>{author.name}</a> })}
      </footer>
    </article>
  );
}

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...await serverSideTranslations(locale, ['reviews']),
  }
});

和reviews.json：

import React from 'react';
import { useTranslation } …

我想从网址中删除/en或/it 。我不希望它明确地将其放入网址中。i18next 默认这样做，我不知道如何删除它。我只是想把它放在后台。

我是否必须添加任何选项来删除它，或者我无能为力？

我的代码如下：

import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,

    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: false,
    },
  })

export default i18n

我将其导入到我要翻译的页面中

import { useTranslation } from 'react-i18next';

function MyComponent: ReactElement {
    const [isEnglish, setIsEnglish] = useState(true);
    const { t, i18n } = useTranslation();
    const handleClick = () => …

我试图将翻译添加到我的应用程序中，但我陷入了这个错误：

error - Error: next-i18next was unable to find a user config
    at _callee$ (/media/coyas/47B492C22544E4BA/TERRA_SYSTEM/software_center/iMedia/ZebraGroupe/zebraTravel/zebraTravelWebUI/node_modules/next-i18next/dist/commonjs/serverSideTranslations.js:196:19)
    at tryCatch (/media/coyas/47B492C22544E4BA/TERRA_SYSTEM/software_center/iMedia/ZebraGroupe/zebraTravel/zebraTravelWebUI/node_modules/regenerator-runtime/runtime.js:63:40)
    at Generator.invoke [as _invoke] (/media/coyas/47B492C22544E4BA/TERRA_SYSTEM/software_center/iMedia/ZebraGroupe/zebraTravel/zebraTravelWebUI/node_modules/regenerator-runtime/runtime.js:294:22)
    at Generator.next (/media/coyas/47B492C22544E4BA/TERRA_SYSTEM/software_center/iMedia/ZebraGroupe/zebraTravel/zebraTravelWebUI/node_modules/regenerator-runtime/runtime.js:119:21)
    at asyncGeneratorStep (/media/coyas/47B492C22544E4BA/TERRA_SYSTEM/software_center/iMedia/ZebraGroupe/zebraTravel/zebraTravelWebUI/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
    at _next (/media/coyas/47B492C22544E4BA/TERRA_SYSTEM/software_center/iMedia/ZebraGroupe/zebraTravel/zebraTravelWebUI/node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
    at /media/coyas/47B492C22544E4BA/TERRA_SYSTEM/software_center/iMedia/ZebraGroupe/zebraTravel/zebraTravelWebUI/node_modules/@babel/runtime/helpers/asyncToGenerator.js:32:7
    at new Promise (<anonymous>)
    at /media/coyas/47B492C22544E4BA/TERRA_SYSTEM/software_center/iMedia/ZebraGroupe/zebraTravel/zebraTravelWebUI/node_modules/@babel/runtime/helpers/asyncToGenerator.js:21:12
    at serverSideTranslations (/media/coyas/47B492C22544E4BA/TERRA_SYSTEM/software_center/iMedia/ZebraGroupe/zebraTravel/zebraTravelWebUI/node_modules/next-i18next/dist/commonjs/serverSideTranslations.js:259:17) {
  page: '/'
}

我还没有找到解决办法。

i18n.config.js

const path = require("path");

module.exports = {
    i18n: {
        locales: ["en", "fr", "pt"],
        defaultLocale: "pt"
    }
};

next.config.js

require("dotenv").config();
const { i18n } = require("./i18n.config");

module.exports = {
    env: {
        API_BASE_URL: …

我正在使用next-i18next模块来提供多语言支持。

我还有一些静态页面和动态页面。两者在本地都工作正常。

我在 vercel 上部署了所有静态页面，在 vercel 上都运行良好。但动态页面在 vercel 上不起作用。它显示该动态页面的 404 页面。

下面是动态页面的代码。（页面/测试页面/[questionId].js）

import { useState, useEffect } from "react";
import {Layout} from "@components/common";
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { TestComponent } from '@components/TestComponent'

const TestPage = () => 
{
    const { t } = useTranslation('common')
    const router = useRouter()
    const {questionId} = router.query;
    const [isApiLoaded,setIsApiLoaded] = useState(false)
    
    return (
        <TestComponent 
            t={t}
            isApiLoaded={isApiLoaded}
            setIsApiLoaded={setIsApiLoaded}
        /> …

我正在努力解决NextJS Typescript 项目中的next-i18next集成 - 几乎没有任何最近的示例。我已经配置了国际化路由，但只要getServerSideProps语法困扰我，我就无法正确设置 i18next 。

我对 Typescript 不太了解，也不熟悉类型声明。

代码如下所示，大部分是从 next-i18next 文档复制的：

### index.tsx

// rest of index.tsx...

export const getServerSideProps: GetServerSideProps = async ({locale}) => ({
  props: {
    ...await serverSideTranslations(locale, ['common', 'header']),
  },
})

export default Home

我的 IDE 中抛出有关“区域设置”的错误。尽管我正在使用 getServerSideProps，但我什至不确定它是否是大多数静态项目的最佳解决方案，但如果我最终计划使用 SSR，我似乎无法避免它。提供正确翻译的内容 + 具有匹配的 URL 区域设置的简单方法会很棒。

i18next v22.0.0为翻译功能提供了完整的类型安全性t('world.greeting')，这非常棒。但由于您可以使用该t()函数从嵌套翻译中检索对象，因此它可能会返回一个对象或字符串。

我总是将结果传递给字符串的翻译键。我主要在必须返回字符串的上下文中使用t()，因此以下代码片段中的函数会产生 TypeScript 错误：

const resources = {
  en: {
    translation: {
      world:  {
        withGreeting: 'Hello World',
        withoutGreeting: 'World',
        someNestedProperty: {
          hello: 'Text',
        }
      },
    },
  },
}

// Declare i18next typings: https://www.i18next.com/overview/typescript
declare module "i18next" {
  interface CustomTypeOptions {
    resources: typeof resources["en"];
  }
}


// (...) initialize i18next

const getText = (enabled: boolean): string => {
   if(enabled) {
     // Typescript Error: string | { hello: string } not assignable to type …

Next 社区，我在使用我也在使用的全新Next.js13配置国际化时遇到问题i18next。

我恳请您的帮助，并可能提供一些工作设置的示例。

这是我到目前为止所尝试过的\n（我正在使用新的“app”目录）

//next-i18next-config.js\n\nmodule.exports = {\n  i18n: {\n    locales: [\'en\', \'de\'],\n    defaultLocale: \'en\',\n  },\n}\n

// next.config.js\n\nconst { i18n } = require(\'./next-i18next-config\')\n\nconst nextConfig = {\n  reactStrictMode: true,\n  swcMinify: true,\n  experimental: { appDir: true },\n  i18n\n}\n\nmodule.exports = nextConfig\n

public\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 favicon.ico\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 locales\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 de\n    \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 translation.json\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 en\n       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 translation.json\n\n

// package.json\n\n"dependencies": {\n    "i18next": "^22.0.4",\n    "next": "13.0.0",\n    "next-i18next": "^12.1.0",\n    "react-i18next": "^12.0.0",\n    "react": "18.2.0",\n    "react-dom": "18.2.0",\n    "sass": "^1.56.0",\n    "typescript": "4.8.4",\n  },\n

服务器端问题 …

我目前正在开发多语言 Next.js 13 应用程序，并使用 next-intl 包进行国际化。我一直在尝试为我的路线设置翻译后的网址，但遇到了一些问题。

这是我想要实现的目标的一个例子。如果源语言是丹麦语，则路径可以是：mypage/om。
对于英语，它将是：mypage/en/about。

我的项目的结构是利用应用程序目录（/app/[lang]/page.tsx）。

我已按照 next-intl 文档来设置国际化路由，但我很难让 URL 翻译与此设置一起正常工作。

我需要页面能够利用“generateStaticParams”，这样我们就可以使用所有不同的语言构建静态页面，并允许每个 url 特定于语言，但仍然只需为主语言创建 1 个单页面。我希望这是有道理的。

当我导航到 mypage/om 时，应用程序正确解析为丹麦语版本，我还可以在 mypage/en/om 上看到英语版本。但是，我希望能够导航到 mypage/en/about，而不必创建具有不同名称的多个页面。

有没有人有在 Next.js 13 中使用 next-intl 设置翻译 URL 的经验，特别是应用程序目录结构？任何帮助将不胜感激。提前致谢！

我试图以某种方式动态地使用i18next翻译和Knockout.js,但我无法弄清楚如何.

自定义Knockout绑定或i18next jQuery插件似乎都不适用于可观察值.

我可以在这里找到我想要实现的演示:http://jsfiddle.net/rdfx2/1/

解决方法是这样的,但如果可能的话,我宁愿避免这种情况:

<div data-bind="text: translate('key', observable)"></div>

self.translate = function (key, value) {
   return i18next.t(key, {
      "var": value
   });
};

谢谢,