Selector de Idioma en Next.js con Cookies y API Personalizada

Clase 7 de 12 • Curso de Next.js: Internacionalización de Aplicaciones Web con i18n

Resumen

Git tag: 7-locales-nextjs Comando: git checkout -b dev 7-locales-nextjs

Carlos Antonio Castillo Blas

student•

Con js-cookie se puede grabar la cookie en el frontend y recargar la página.

import Cookies from 'js-cookie';


const MyComponent = () => {
  const { locale } = useRouter();

  const onChangeLanguage = () => {
    const newLocale = locale === 'en' ? 'es' : 'en';
    Cookies.set('NEXT_LOCALE', newLocale, { path: '/' });
    window.location.href = '/';
  };

  return <button onClick={onChangeLanguage}>es/en</button>;
};

BRANDON YESID ARRIETA GIRALDO

student•

que clase mas paila sinceramente

Cesar González Caballero

student•

Pues no funciona, copie el código, lo bajé directo, y no funciona manda a api/languaje en vez de como a el, algo hizo que no comparte y no funciona.

Cristian Mauricio Cavanzo Arias

student•

Que no te funciona Cesar, es un error de consola o el codigo no funciona como deberia?

Ulqernesh Karvenae

student•

Instalaste la dependencia de cookie?

npm i cookie@^0.4.1

Roger David Alba Ortega

student•

Buen dia, estoy trabajando en una app que se quiere aplicar la internacionalizacion, se trabaja el lenguaje "en" por defecto y el lenguaje "es" como opcional, estoy aplicando el codigo de la api/language me cambia cuando hago click, trabaja bien, pero cuando se selecciona el idioma ingles y sobre escribo el link asi "//localhost:3000/es" no me redirige al idioma que esta guardada en la cookie en cambio cuando selecciono el idioma "es" y reescribo el link asi "//localhost:3000" me lo cambia a este enlace "//localhost:3000/es". No entiendo porque funciona en el de espanol y no en el de ingles pueden ayudarme.

Roger David Alba Ortega

student•

este es el codigo que tengo

import { serialize, CookieSerializeOptions } from "cookie"
import { NextApiHandler, NextApiResponse } from "next"

// Sadly, getting the locale info in API Routes is not officially supported.
// It should match next.config::i18n.defaultLocale
const DEFAULT_LOCALE = "en-US"

// Learn more: https://nextjs.org/docs/advanced-features/i18n-routing#leveraging-the-next_locale-cookie
const PREFERRED_LOCALE_COOKIE = "NEXT_LOCALE"

function setCookie(
  res: NextApiResponse,
  name: string,
  value: unknown,
  options: CookieSerializeOptions = {expires: new Date(Date.now() + 60*60*24*2 ) , maxAge: 10}
) {
  const stringValue =
    typeof value === "object" ? `j:${  JSON.stringify(value)}` : String(value)

 

  res.setHeader("Set-Cookie", serialize(name, String(stringValue), options))
}
const language: NextApiHandler = (request, response) => {
  if (request.method === "GET") {
    const preferredLocale = request.cookies[PREFERRED_LOCALE_COOKIE] 

    return response.status(200).json({
      preferredLocale,
      defaultLocale: DEFAULT_LOCALE,
    })
  }

  if (request.method === "POST") {
    const newPreferredLocale = request.body.preferredLocale as
      | string
      | undefined

    // For this page, we don't care setting an invalid value.
    // worst case: the value is ignored and Next.js defaults to defaultLocale. Not critical.
    setCookie(response, PREFERRED_LOCALE_COOKIE, newPreferredLocale, {
      // Heads-up: the NEXT_LOCALE must be set to the `/` path
      path: "/",
    })

    // 307 (temporary) redirect to homepage
    response.redirect("/")
    return response.end()
  }

  // Not other supported method
  return response.status(405).end()
}


export default language

Roger David Alba Ortega

student•

/**
 * @type {import('next').NextConfig}
 */

const nextConfig = {
  reactStrictMode: true,

  webpack(config) {
    const modifiedConfig = {
      ...config,
      resolve: {
        ...config.resolve,
        fallback: {
          ...config.resolve.fallback,
          fs: false,
        },
      },
    }

    return modifiedConfig
  },
  i18n: {
    locales: ["en-US","es"],
    defaultLocale: "en-US",
  }
}

module.exports = nextConfig```

Israel Hernández Galicia

student•

Al igual tendran que instalar esta dependencia y forzarla, no deberia ocasionar conflictos si hacen un npm audit:

npm install --save-dev @types/cookie --force

Israel Hernández Galicia

student•

Para instalar la dependencia cookie en 2024, tendran que usar este flag, si no, no deja instalar por los conflictos con las otras dependencias:

npm install cookie --legacy-peer-deps

Luis Felipe Silgado Cortázar

student•

¿Cómo dibujar un rostro hiper realista?

dibuja un círculo.
Dibuja las líneas del rostro.
Agrega detalles.

¡Y en 3 simples pasos tienes tu rostro hiper realista!

Luis Felipe Silgado Cortázar

student•

import Cookies from 'js-cookie';


const MyComponent = () => {
  const { locale } = useRouter();

  const onChangeLanguage = () => {
    const newLocale = locale === 'en' ? 'es' : 'en';
    Cookies.set('NEXT_LOCALE', newLocale, { path: '/' });
    window.location.href = '/';
  };

  return <button onClick={onChangeLanguage}>es/en</button>;
};

import { serialize, CookieSerializeOptions } from "cookie"
import { NextApiHandler, NextApiResponse } from "next"

// Sadly, getting the locale info in API Routes is not officially supported.
// It should match next.config::i18n.defaultLocale
const DEFAULT_LOCALE = "en-US"

// Learn more: https://nextjs.org/docs/advanced-features/i18n-routing#leveraging-the-next_locale-cookie
const PREFERRED_LOCALE_COOKIE = "NEXT_LOCALE"

function setCookie(
  res: NextApiResponse,
  name: string,
  value: unknown,
  options: CookieSerializeOptions = {expires: new Date(Date.now() + 60*60*24*2 ) , maxAge: 10}
) {
  const stringValue =
    typeof value === "object" ? `j:${  JSON.stringify(value)}` : String(value)

 

  res.setHeader("Set-Cookie", serialize(name, String(stringValue), options))
}
const language: NextApiHandler = (request, response) => {
  if (request.method === "GET") {
    const preferredLocale = request.cookies[PREFERRED_LOCALE_COOKIE] 

    return response.status(200).json({
      preferredLocale,
      defaultLocale: DEFAULT_LOCALE,
    })
  }

  if (request.method === "POST") {
    const newPreferredLocale = request.body.preferredLocale as
      | string
      | undefined

    // For this page, we don't care setting an invalid value.
    // worst case: the value is ignored and Next.js defaults to defaultLocale. Not critical.
    setCookie(response, PREFERRED_LOCALE_COOKIE, newPreferredLocale, {
      // Heads-up: the NEXT_LOCALE must be set to the `/` path
      path: "/",
    })

    // 307 (temporary) redirect to homepage
    response.redirect("/")
    return response.end()
  }

  // Not other supported method
  return response.status(405).end()
}


export default language

/**
 * @type {import('next').NextConfig}
 */

const nextConfig = {
  reactStrictMode: true,

  webpack(config) {
    const modifiedConfig = {
      ...config,
      resolve: {
        ...config.resolve,
        fallback: {
          ...config.resolve.fallback,
          fs: false,
        },
      },
    }

    return modifiedConfig
  },
  i18n: {
    locales: ["en-US","es"],
    defaultLocale: "en-US",
  }
}

module.exports = nextConfig```

Selector de Idioma en Next.js con Cookies y API Personalizada

Introducción

Internacionalización Web con Next.js: Arquitectura y Prácticas Clave

Arquitectura

Arquitectura de Aplicaciones con Internacionalización en Next.js

Internacionalización en NextJS: Configuración y Estrategias de Rutas

Rutas i18n

Implementación de Localización en Páginas Estáticas con Next.js y Contentful

Internacionalización en Next.js: Gestión de Páginas Dinámicas y Locales

Experiencia de usuario

Internacionalización de Idiomas con Next.js y Cookies

Selector de Idioma en Next.js con Cookies y API Personalizada

Arquitectura React

Internacionalización de Labels en Next.js con JSON

Internacionalización en React y Next.js: Estrategias y Soluciones

Internacionalización en React con Next.js y i18next

Próximos pasos

Retos de Internacionalización en Aplicaciones React

Internacionalización con Next.js y JavaScript Avanzado