Question

我正在将NextJS与next-i18next一起使用。这是我的主页：

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

const Home = function Home() {
  return (<div>test</div>)
};

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

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

我想要在组件/页面中获取当前语言，我该怎么做？

Answer 1

withTranslation注入i18n对象。

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);

或使用挂钩，

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;

Answer 2

在 Next.js 中，您还可以使用 useRouter 钩子。

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);

获取当前语言next-i18next

2 个答案: