Fundamentos
Next.js El futuro del Desarrollo Web
Novedades de Next.js 15
Migraci贸n de una APP a Next.js 15
Haciendo tu proyecto m谩s r谩pido
RSC: Refactorizando un componente cliente a servidor
C贸mo usar React Server Components con PostgreSQL sin un ORM
Consumiendo datos de manera eficiente
Consumiendo datos desde el servidor en Next.js 15
Consumiendo datos desde el cliente con React Query en Next.js 15
Patrones de Dise帽o: paralelo, secuencial y preload en Next.js 15
Uso avanzado de Suspense con Streaming rendering en Next.js 15
Escalabilidad y personalizaci贸n
Internacionalizaci贸n avanzada: rutas dinamicas y middlewares
Internacionalizaci贸n avanzada: diccionario de traducciones
Autenticaci贸n: Middleware en Next.js para validar sesiones
Autenticaci贸n: Cookie sessions Next.js
Feature Flags LaunchDarkly en Next.js 15
Manejo de errores en React Server Components y Next.js
Manejo de errores y observavilidad: Integraci贸n con Sentry
Caracter铆sticas Adicionales y Herramientas
Sistemas de cach茅 en Next.js 15
Seguridad y buenas pr谩cticas con Next.js
Seguridad y buenas pr谩cticas: cookies, jwt y encriptaci贸n
Auditoria de performance en Next.js 15
Despliegue en Producci贸n con Vercel
Despliegue en Fly.io: Preparaci贸n de Base de Datos
Despliegue en Fly.io: Despliegar Next.js en nuestro propio servidor
Next.js 15 el futuro del Desarrollo Web
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Internacionalizaci贸n avanzada: rutas dinamicas y middlewares
10/24Internationalization in web applications is crucial to ensure a smooth experience for users of different languages. Here we explore how to implement internationalization from scratch in Next.js, using middleware and native JavaScript, to redirect users according to their configured language without relying on external libraries.
How to intercept and process requests in Next.js with middleware?
- The middleware in Next.js allows intercepting requests between the client and the server.
- We can use the
request.nextUrlobject to parse the requested URL and make decisions such as redirects or blocks. - The logic includes:
- Ignoring requests outside the subpage intended for internationalization
(/i18nin this case). - Allow direct pass-through if the URL already contains a supported language identifier (e.g.,
/i18n/enor/i18n/en). - Redirect requests without a language identifier to the most appropriate language according to the user's configuration.
- Ignoring requests outside the subpage intended for internationalization
How to determine the user's preferred language?
- We use the HTTP
Accept-Languageheader, which browsers send indicating the user's preferred languages. - With the
negotiatorlibrary andformat.js, you can:- Extract the languages accepted by the browser.
- Compare with the languages supported by the application
(es,en). - Select the default language
(en) in case there is no match.
How is the logic for redirects structured in the middleware?
-
Ignore irrelevant paths:
- Check if the requested path starts with
/i18n. - If not, let the request continue unchanged.
- Check if the requested path starts with
-
Allow routes with configured language:
- Analyze whether the URL contains a supported language.
- If yes, allow the request to continue.
-
Redirect routes with no language configured:
- Determine the language using the
Accept-Languageheader. - Modify the request
pathnameto include the language. - Perform the redirect based on this new URL.
- Determine the language using the
How to test the implementation?
- Change the preferred language in the browser settings.
- Access the root page and verify the automatic redirection to the corresponding language.
- Test with unsupported languages to ensure that the default language is assigned.
Contributions 2
Questions 0
Want to see more contributions, questions and answers from the community?