Selector de Idioma en Next.js con Cookies y API Personalizada
Curso de Next.js: Internacionalización de Aplicaciones Web con i18n
Contenido del curso
Git tag: 7-locales-nextjs Comando: git checkout -b dev 7-locales-nextjs
Carlos Antonio Castillo Blas
BRANDON YESID ARRIETA GIRALDO
Cesar González Caballero
Cristian Mauricio Cavanzo Arias
Ulqernesh Karvenae
Roger David Alba Ortega
Roger David Alba Ortega
Roger David Alba Ortega
Israel Hernández Galicia
Israel Hernández Galicia
Luis Felipe Silgado Cortázar
Luis Felipe Silgado Cortázar
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>; };
que clase mas paila sinceramente
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.
Que no te funciona Cesar, es un error de consola o el codigo no funciona como deberia?
Instalaste la dependencia de cookie?
npm i cookie@^0.4.1
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.
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
/** * @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```
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
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
¿Cómo dibujar un rostro hiper realista?
¡Y en 3 simples pasos tienes tu rostro hiper realista!
