🌐 ejemplo-i18n - Proyecto multilenguaje con Next.js + next-intl

📁 Este proyecto ha sido desarrollado únicamente con fines educativos y prácticos.

📚 Incluye guías paso a paso.

🗓 Última actualización: 25-10-2025.

---

📝 Descripción

Este es un proyecto de ejemplo que implementa i18n (internacionalización) en Next.js usando next-intl, diseñado para ser una base educativa y funcional. Permite cambiar el idioma mediante rutas como /en y /es.

---

🎯 Objetivo del proyecto

El principal objetivo de este proyecto es compartir mis conocimientos en desarrollo web con la comunidad, e inspirar a cualquier persona que este interesada en aprender desarrollo web tanto de forma autodidacta como profesional.

---

🚀 Características principales

• ✅ Multilenguaje (ES / EN).
• ✅ Basado en la versión de Next.js v15 con App Router.
• ✅ Sin base de datos (los textos y traducciones están almacenados en archivos de traducción locales).
• ✅ Componentes traducibles con soporte para Server y Client components.

---

📘 ¿Qué aprenderás?

• Cómo iniciar un proyecto con la última versión de Next.js desde cero.
• Cómo configurar rutas internacionales (i18n) con next-intl.
• Cómo cargar y gestionar archivos de traducción para diferentes idiomas.
• Cómo traducir tanto componentes cliente como servidor en Next.js.
• Cómo manejar rutas, middleware y estructura de carpetas en proyectos Next.js.
• Mejoras en la optimización y el rendimiento de aplicaciones multilenguaje.

---

🔧 Crear un proyecto Next.js (desde cero)

En esta guía, encontrarás toda la información necesaria sobre cómo crear un nuevo proyecto Next.js:

• 📄 Crear proyecto Next.js

---

⚙️ Configurar i18n con next-intl (desde cero)

En esta guía, encontrarás toda la información necesaria sobre cómo implementar el soporte multilenguaje en este proyecto:

• 📄 Configurar i18n con next-intl (soporte multilenguaje)

---

📁 Crear un repositorio en GitHub y subir un proyecto local (desde cero)

Crear un repositorio en GitHub y subir tu proyecto local permite mantener tu código seguro, respaldado y accesible desde cualquier lugar. Además, facilita el trabajo colaborativo, el seguimiento de cambios, y la integración con herramientas de desarrollo modernas como CI/CD, despliegues automáticos y más.

En esta guía, encontrarás toda la información necesaria sobre cómo crear un repositorio en GitHub y subir tu proyecto local:

• 📄 Crear repositorio en GitHub y subir proyecto local

---

📥 ¿Cómo clonar y ejecutar este proyecto?

En esta guía, encontrarás toda la información necesaria sobre cómo clonar y ejecutar este proyecto en un entorno local con XAMPP:

• 📄 Clonar proyecto Next.js en XAMPP

💡 Recuerda copiar la URL de este repositorio desde <> Code / HTTPS para reemplazar la URL de ejemplo que se proporciona en la guía para clonar el proyecto.

---

📄 Licencia

Este proyecto está licenciado bajo la Licencia MIT. Consulta el archivo LICENSE para más detalles.

---

📦 Sobre Next.js

Este proyecto fue desarrollado usando Next.js, un framework de React para aplicaciones web modernas, con soporte para renderizado híbrido (SSR, SSG, ISR), rutas dinámicas, internacionalización (i18n), optimización de imágenes, fuentes, y más.

Next.js permite usar tanto el directorio tradicional pages/ como la nueva App Router con el directorio app/, compatible con JavaScript o TypeScript.

💡 La estructura exacta del proyecto (pages/, app/, uso de page.jsx o page.tsx, organización por idiomas con locale/, etc.) puede variar según la configuración y objetivos del repositorio.

📚 Recursos oficiales

• 📖 Documentación oficial de Next.js
• 🎓 Tutorial interactivo
• 💻 Repositorio oficial en GitHub
• ☁️ Despliegue con Vercel