Nextjs i18next 如何获取当前语言?

在使用 next-i18next 这个库时，获取当前语言可以通过多种方式实现，具体的方法取决于你是在服务端还是在客户端上下文中，以及你是在页面组件内部还是外部。以下是一些获取当前语言的方法：

1. 使用 useTranslation Hook

如果你在一个 React 函数组件中，可以使用 useTranslation Hook 来获取当前的语言环境。useTranslation 返回的对象中包含一个 i18n 实例，你可以从中获取当前的语言设置。

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

const MyComponent = () => {
  const { i18n } = useTranslation();

  // 获取当前语言
  const currentLanguage = i18n.language;

  return <p>当前语言：{currentLanguage}</p>;
};

export default MyComponent;

2. 使用 withTranslation 高阶组件

如果你在使用类组件，或者出于某些原因想用高阶组件（HOC）的方式来获取当前语言，你可以使用 withTranslation。这同样会注入 i18n 实例到你的组件的 props 中：

javascript
import React from 'react';
import { withTranslation } from 'next-i18next';

class MyComponent extends React.Component {
  render() {
    // 从 props 中获取 i18n 实例
    const { i18n } = this.props;

    // 获取当前语言
    const currentLanguage = i18n.language;

    return <p>当前语言：{currentLanguage}</p>;
  }
}

export default withTranslation()(MyComponent);

3. 使用 getInitialProps 或 getServerSideProps

在页面级组件中，你可以通过 next-i18next 的服务器端渲染方法来获取当前语言。getInitialProps 或者 getServerSideProps 都会收到包含 req（如果是服务器端的话）的 context 对象，从中可以读取当前语言：

javascript
import { getServerSideProps } from 'next-i18next/serverSideTranslations';

export const getServerSideProps = async ({ locale }) => {
  // locale 变量包含当前语言环境
  return {
    props: {
      // 需要传递当前语言给页面组件
      language: locale,
    },
  };
};

// 然后在页面组件中使用该属性
const MyPage = ({ language }) => {
  return <p>当前语言：{language}</p>;
};

export default MyPage;

4. 使用 Router 或 useRouter Hook

在 next/router 中，Router 对象或者 useRouter Hook 返回的对象中也包含了当前的语言信息：

javascript
import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();

  // 获取当前语言
  const currentLanguage = router.locale;

  return <p>当前语言：{currentLanguage}</p>;
};

export default MyComponent;

使用上述任何一种方法，你都可以有效地获取到当前设置的语言，并在你的应用程序中据此进行相应的国际化操作。

withTranslation注入i18n对象。

shell
import {withTranslation}  from '../config/next-i18next';

const Home = function Home({ i18n }) {
  return (<div>{i18n.language}</div>)
  // ----------------^
};

Home.getInitialProps = async () => {
  return {namespacesRequired: ['home']}
};

export default withTranslation('home')(Home);

或者使用 Hooks，

shell
import {useTranslation}  from '../config/next-i18next';

const Home = function Home() {
  const { i18n } = useTranslation('home');
  return (<div>{i18n.language}</div>)
  // ----------------^
};

Home.getInitialProps = async () => {
  return {namespacesRequired: ['home']}
};

export default Home;

对于 Next.js，您还可以使用useRouter挂钩。

shell
import {withTranslation}  from '../config/next-i18next';
import { useRouter } from 'next/router'

const Home = function Home() {
const router = useRouter()
const currentLang =  router.locale // => locale string eg. "en"
  return (<div>test</div>)
};

Home.getInitialProps = async () => {
  return {namespacesRequired: ['home']}
};

export default withTranslation('home')(Home);