Curso de Next.js: Internacionalización de Aplicaciones Web con i18n
Contenido del curso
Selector de Idioma en Next.js con Cookies y API Personalizada
Git tag: 7-locales-nextjs Comando: git checkout -b dev 7-locales-nextjs
Carlos Antonio Castillo Blas
Estudiante
BRANDON YESID ARRIETA GIRALDO
Estudiante
Cesar González Caballero
Estudiante
Cristian Mauricio Cavanzo Arias
Estudiante
Ulqernesh Karvenae
Estudiante
Roger David Alba Ortega
EstudianteRoger David Alba Ortega
EstudianteRoger David Alba Ortega
Estudiante
Israel Hernández Galicia
EstudianteIsrael Hernández Galicia
Estudiante
Luis Felipe Silgado Cortázar
EstudianteLuis Felipe Silgado Cortázar
EstudianteCon 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!
