Question

我正在尝试在服务器和客户端上实现多语言。一切正常。.我只能在生产环境中更改客户端语言（在本地主机上，因为它没有前缀路径，所以可以正常工作）

问题，当我单击更改语言按钮时，网址转到http://example.com/th/someprefix，这是错误的，我不知道为什么i18n会路由到此..正确的是http://example.com/someprefix/th < / p>

这是我的next.config.js，我在生产环境上使用 assetPrefix = http://example.com/someprefix

const { parsed: localEnv } = require('dotenv').config({
  path: __dirname + `/.env.${process.env.NODE_ENV}`
});
const webpack = require('webpack');
const withImages = require('next-images');

const production = process.env.NODE_ENV === 'production';

const prefix = 'http://example.com/someprefix';

module.exports = withImages({
  assetPrefix: production ? prefix : '',
  plugins: [new webpack.EnvironmentPlugin(localEnv)],
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.node = {
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
      };
    }

    return config;
  }
});

我有用于更改语言的按钮（客户端），我使用 i18n.changeLanguage

...
<button type="button" onClick={() => i18n.changeLanguage('en')}>
        change lang client side EN
</button>
<button type="button" onClick={() => i18n.changeLanguage('th')}>
        change lang client side TH
</button>

 ...
 MyPage.getInitialProps = async props => {
  const { isServer } = props.ctx;
  if (isServer) {
    // called on server
  } else {
    // called on client
  }
  return { isServer, namespacesRequired: ['common', 'footer'] };
};

export default withTranslation('common')(MyPage);

这是i18n.js

const NextI18Next = require("next-i18next").default;
const production = process.env.NODE_ENV === 'production';
module.exports = new NextI18Next({
  defaultLanguage: "th",
  otherLanguages: ["en"],
  defaultNS: ["common"],  
  //SSR 
  //myapp.com         ---> Homepage in defaultLanguage
  //myapp.com/en     ---> Homepage in English
  localeSubpaths: {
    th: production ?  'th': 'th',
    en: production ?  'en': 'en'
  },
  // workaround until next-i18next support public path
  // https://github.com/isaachinman/next-i18next/issues/523
  localePath: typeof window === "undefined" ? "public/locales" : "someprefix/locales"
});

这是server.js

const express = require('express');
const next = require('next');
const bodyParser = require('body-parser');

const routeApi = require('./router/index');

const nextI18NextMiddleware = require('next-i18next/middleware').default

const nextI18next = require('../i18n')

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler(app);
const PORT = process.env.PORT || 3000;

app
  .prepare()
  .then(() => {
    const server = express();

    server.use(bodyParser.json());
    server.use(bodyParser.urlencoded({ extended: true }));
    server.use('/api', routeApi);

    server.use(nextI18NextMiddleware(nextI18next))

    server.get('*', (req, res) => {
      return handle(req, res);
    });
    server.listen(PORT, err => {
      if (err) throw err;
      console.info(`> ? Server ready at http://localhost:${PORT}`);
    });
  })
  .catch(ex => {
    console.error(ex.stack);
    process.exit(1);
  });

这是我的package.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "NODE_ENV=development node server/index.js",
    "devwindow": "set NODE_ENV=development&&node server/index.js",
    "build": "next build",
    "start": "NODE_ENV=production node server/index.js",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "babel-plugin-istanbul": "^5.2.0",
    "body-parser": "^1.19.0",
    "bootstrap": "^4.4.0",
    "dotenv": "^8.2.0",
    "es6-promise": "^4.2.8",
    "express": "^4.17.1",
    "form-data": "^3.0.0",
    "formik": "^2.0.6",
    "isomorphic-unfetch": "^3.0.0",
    "jsonwebtoken": "^8.5.1",
    "jwks-rsa": "^1.6.0",
    "next": "9.1.4",
    "next-i18next": "^2.1.1",
    "next-images": "^1.2.0",
    "next-redux-saga": "^4.1.2",
    "next-redux-wrapper": "^4.0.1",
    "qs": "^6.9.1",
    "rc-progress": "^2.5.2",
    "react": "16.12.0",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-dom": "16.12.0",
    "react-icons": "^3.8.0",
    "react-redux": "^7.1.3",
    "redux": "^4.0.4",
    "redux-saga": "^1.1.3",
    "styled-components": "^4.4.1",
    "url-parse": "^1.4.7",
    "yup": "^0.27.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.7.4",
    "@babel/core": "^7.7.4",
    "@babel/node": "^7.7.4",
    "@babel/plugin-transform-runtime": "^7.7.4",
    "@babel/preset-env": "^7.7.4",
    "@babel/runtime": "^7.7.4",
    "@cypress/code-coverage": "^1.10.4",
    "babel-eslint": "^10.0.3",
    "babel-plugin-styled-components": "^1.10.6",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "cypress": "^3.7.0",
    "eslint": "^6.7.1",
    "eslint-plugin-react": "^7.16.0",
    "istanbul-lib-coverage": "^2.0.5",
    "nodemon": "^2.0.1",
    "nyc": "^14.1.1",
    "redux-devtools-extension": "^2.13.8"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

它与next不相关，但与next-i18next相关。

从它的源代码开始，此lib提供的Link component是“修复” URL here的那个。

因此，您可以看到lngPathCorrector不支持在某些路径下提供下一个应用程序。

欢迎您对此进行公关。

next-i18next不支持assetPrefix网址吗？

1 个答案: