Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Detección de idioma automática y next/link

6/12
Recursos

Aportes 3

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Les comparto este language switcher que hice con Next.js y Material-UI.
Queda así:

Código:

import React, { FC } from 'react'
import { useRouter } from 'next/router'
import NextLink from 'next/link'
import Link from '@material-ui/core/Link'
import Typography from '@material-ui/core/Typography'

const LocaleSwitcher = () => {
	const { locale, asPath: currentPath } = useRouter()

	return (
		<>
			{locale === 'en-US' ? (
				<span style={{ cursor: 'default' }}>
					<NextLink passHref href={currentPath} locale="es">
						<Link>
							<Typography variant="h5" component="span">
								Es
							</Typography>
						</Link>
					</NextLink>{' '}
					/{' '}
					<Link component="span" variant="h5" underline="always">
						En
					</Link>
				</span>
			) : (
				<span style={{ cursor: 'default' }}>
					<Link component="span" variant="h5" underline="always">
						Es
					</Link>{' '}
					/{' '}
					<NextLink passHref href={currentPath} locale="en-US">
						<Link>
							<Typography variant="h5" component="span">
								En
							</Typography>
						</Link>
					</NextLink>
				</span>
			)}
		</>
	)
}

export default LocaleSwitcher

import { Fragment, useState, MouseEvent } from 'react'
import { useRouter  } from 'next/router'
import NextLink from 'next/link'
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

export function LanguageSetter(){
    const [anchorEl, setAnchorEl] = useState<Element|null>(null);

    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
      setAnchorEl(event.currentTarget);
    };
  
    const handleClose = () => {
      setAnchorEl(null);
    };
  
    const router = useRouter()
    const { locales, locale, asPath } = router

    const setCookie = (name:String, value:String) => {
        let expires = ''
        document.cookie = name + '=' + (value || '')  + expires + ';';
        setAnchorEl(null)
    }

  return (
    <Fragment>
      <Button aria-controls="language-menu" aria-haspopup="true" onClick={handleClick}>
        {`Lang (${locale})`}
      </Button>
      <Menu
        id="language-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        {locales?.map(locale=>{
            return (
                <NextLink key={locale} href={asPath} locale={locale}>
                    <MenuItem onClick={()=>setCookie("NEXT_LOCALE", locale)}>{locale}</MenuItem>
                </NextLink>
                )
        })
        }
      </Menu>
    </Fragment>
  )
}

🌐 Detección de idioma automática y next/link

Apuntes

Experiencia de usuario

  • ¿Cómo hacemos para detectar el idioma del usuario que está utilizando el sitio?
  • ¿Cómo hacemos para mantener en la transición de una página a otra dentro de nuestra aplicación para mantenerlo en el mismo link?
  • ¿Cómo podemos forzar para cambiar un idioma a otro?

Next.js detecta el idioma del usuario de forma automatica*

  • La manera en la cual Next.js detecta el idioma, es mediante la lectura de la propiedad Accept-Language Header HTTP propio del navegador
    • Una vez obtenido el valor del locale lo aplica a la configuración
  • En caso de necesitar deshabilitarla se puede hacer editando la configuración de next.js en next.config.js
module.exports = {
	i18n: {
		localeDetection: false,
	}
}

i18n y next/Link

  • next/link navegará al locale actualmente activo
  • Una manera de cambiar el idioma al pasar de una página a otra es mediante router.push
router.push(
	url: string,
	as?: string,
	{ locale: 'br' }
)
  • De una manera similar se puede deshabilitar esta opción con un link
<Link href="/br/about-us" locale={ false } />

i18n Cookie

  • NEXT_LOCALE
    • Podemos enviar el valor para guardar la preferencia del idioma del usuario
  • Permite controlar el locale a mostrar de un usuario