标签: next-i18next

我在 Nextjs (v10.1.3) /my-translation/[id]中有一个动态路由页面，我想使用 next-i18next (v8.1.3) 包来翻译此页面。

我尝试在 Nextjs 中使用 2 个文件夹结构，它们都给出了我无法理解的相同错误。

• 页面/翻译页面/[id]/index.tsx
• 页面/翻译页面/[id].tsx

但是，如果我将动态路由更改为静态路由，则转换会起作用。

工作文件夹结构示例：

• 页面/翻译页面/id.tsx

import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";

const TranslatedPage = () => {
  const { t } = useTranslation("my-translation");
  const router = useRouter();
  const { id } = router.query;

  return (
      <div>
         {t("existing-translation-key-from-my-translation-json")}
      </div>
  );
};

export const getStaticProps = async ({ locale }) => ({
  props: {
    fallback: true,
    paths: …

它在本地工作。但是，一旦我将其部署到 firebase 上，它就会出现 nextServer 500 内部错误。

下一个-i18下一个版本

8.1.3

配置

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'ko'],
  },
};

代码

_app.tsx

import { appWithTranslation } from 'next-i18next';

const App = ({ Component, pageProps }: AppProps): JSX.Element => {
  return (
    <Provider store={store}>
      <MainWrapper>
        <Component {...pageProps} />
      </MainWrapper>
    </Provider>
  );
};

export default appWithTranslation(App);

有关服务器端渲染的代码片段

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

export const getServerSideProps: GetServerSideProps = async …

我正在努力让本地化not-found页面与 NextJS 13 (app-dir) 一起使用。我正在遵循国际化的官方指南以及我在 GitHub 上找到的解决方案。

我尝试过的第一个解决方案

[locale]
  -- [...not-found]
       - page.tsx <- empty page, just calls notFound() (catch-all segment)
  -- (browse)
       - someFolder1 <- may multiple pages and maybe nested layouts
       - layout.tsx
  -- (public)
       - someFolder2
       - layout.tsx
  -- (private)
       - someFolder3
       - layout.tsx
  -- layout.tsx
  -- not-found.tsx <- should be served for all notFound() errors (including catch-all segment)

此解决方案的问题

当我notFound从任何路由组调用该方法或访问不匹配的路由时；我收到一条错误消息：Unsupported Server Component type: Null。这看起来很奇怪，因为这两个文件肯定都有一个反应组件作为默认导出。

import { notFound …

我们在加载时收到此错误。

应用程序首先在 URL 处加载http://localhost:3000/，然后当我们切换到 ex: french 时，我们会得到http://localhost:3000/fr，但当我们再次将语言切换到 ex: deutsch 时，我们会得到，http://localhost:3000/de/fr依此类推。新选择的语言路径插入到第一个选择的语言和根 URL 之间。

另外，如果我们直接转到 ex：http://localhost:3000/fr我们会以正确的语言登陆正确的页面。

//i18n.js\nconst NextI18Next = require(\'next-i18next\').default;\n\nmodule.exports = new NextI18Next({\n  defaultLanguage: \'en\',\n  otherLanguages: [\'fr\', \'de\', \'nl\', \'it\', \'pt\', \'es\'],\n  localeSubpaths: {\n    en: \'en\',\n    fr: \'fr\',\n    de: \'de\',\n    nl: \'nl\',\n    it: \'it\',\n    es: \'es\',\n    pt: \'pt\',\n  },\n});\n

//next.config.js\n\nconst isProd = process.env.NODE_ENV === \'production\';\n\nmodule.exports = {\n  exportPathMap: async function (defaultPathMap, { dev, dir, outDir, distDir, buildId }) {\n    return …

我使用NextJs10.0.5 和next-i18next8.1.0 来本地化我的应用程序。众所周知，nextJs10有用于国际化路由的子路径路由。此外，我需要按语言更改页面名称。例如，我contact-us在页面文件夹中有一个文件。当我将语言更改为土耳其语时，我必须使用localhost:3000/tr/contact-us. 但是，我想在语言为土耳其语时用于localhost:3000/bize-ulasin访问该页面。contact-us所以有两个 URL，只有一个页面文件。

当我在 server.js 文件中使用带有 Express js 的自定义路由时，它可以工作。但是，当我想访问文件getStaticProps中函数内的“locale”变量时contact-us，我无法访问它。当我使用 URL 时，该getStaticProps函数返回“locale”变量未定义localhost:3000/bize-ulasin。

服务器.js

const { createServer } = require("http");
const { parse } = require("url");
const next = require("next");
const app = next({ dev: process.env.NODE_ENV !== "production" });
const handle = app.getRequestHandler(app);

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    const { pathname, …

我next-i18next已经在几个项目中使用了 package，而且效果很好。

在我当前的项目中，我需要集成 i18n，但这次只有 cookie 支持，没有国际化路由，我想知道我是否可以用这个包实现这一点，或者我应该返回react-i18next并i18next

样本：

// No cookie or EN cookie
https://app.example.com shows EN version

// Cookie `next-i18n-lang` set to specific language (IT, DE, etc)
https://app.example.com shows translated version

我认为我们不能next/router locale开箱即用，但这作为集成的缺点是可以接受的。

在我的索引页中，我正在使用serverSideTranslations函数。查找翻译文件时出现错误。此错误仅发生在使用 的页面上serverSideTranslations。

我部署到 Vercel 和 Netlify。在他们两个中我都遇到了同样的错误。

在_app.js我正在使用appWithTranslation.

依赖项：

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@netlify/plugin-nextjs": "^3.9.2",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "dayjs": "^1.10.4",
    "dotenv": "^8.2.0",
    "fs-extra": "^10.0.0",
    "is-mobile": "^3.0.0",
    "next": "^11.1.2",
    "next-i18next": "^8.9.0",
    "next-seo": "^4.20.0",
    "node-fetch": "^2.6.1",
    "parse": "^3.1.0",
    "react": "17.0.1",
    "react-bootstrap": "^1.5.0",
    "react-dom": "17.0.1",
    "react-infinite-scroller": "^1.2.4",
    "recoil": "^0.1.2",
    "sass": "^1.43.2",
    "ts-node": "^9.1.1"
  }

next.config.js

const path = require('path');
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
const i18NextConfig = require('./next-i18next.config');

const prodConfig = {
    generateBuildId: () …

我正在编写故事书，并使用next-i18next. 这就是我的设置方式：

// .storybook/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  fallbackLng: 'de',
  debug: true,
});

export default i18n;

// .storybook/preview.js
import { StoreMall } from '../components/layouts/StoreMall';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import { ThemeProvider } from '@material-ui/core/styles';
import { jamesTheme } from '../components/colors';
import { themes } from '@storybook/theming';
import CssBaseline from '@material-ui/core/CssBaseline';

export const parameters = {
  // ...
};

export const decorators = [
  (Story) => …

我的 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 } …

为了创建一个网站，我使用 nextjs，在创建页面时，我将带有页眉和页脚的总体布局放入一个单独的临时组件中，并将页面组件包装在文件中_app.jsx：

function App({ Component, ...rest }) {

  const { store, props } = wrapper.useWrappedStore(rest)

  return (
    <Provider store={store}>
      <Layout>
        <Component {...props.pageProps} />
      </Layout>
    </Provider>
  )
}

一切正常，直到本地化成为问题，使用next-18next库进行翻译并添加后serverSideTranslations，每个页面上开始出现两个错误：

 react-i18next:: You will need to pass in an i18next instance by using initReactI18next
frontend-node_1      | TypeError: Cannot read properties of undefined (reading 'label')
frontend-node_1      |     at DropdownSwitcher (webpack-internal:///./src/components/header/translation/DropdownSwitcher.jsx:45:36)
frontend-node_1      |     at renderWithHooks (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
frontend-node_1      |     at renderIndeterminateComponent (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
frontend-node_1      |     at renderElement (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
frontend-node_1      |     at …