Estoy usando NextJS con next-i18next. Esta es mi pagina de inicio:
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);Lo que quiero es obtener el idioma actual dentro de un componente/página, ¿cómo puedo hacer eso?
withTranslation inyecta el objeto 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);O usando Ganchos,
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;Con Next.js también podría usar el enlace 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);