An open API service indexing awesome lists of open source software.

https://github.com/tejada1970/ejemplo-i18n

Proyecto multilenguaje básico con Next.js v15 + next-intl (i18n) y typeScript 5. Este proyecto esta realizado con fines educativos.
https://github.com/tejada1970/ejemplo-i18n

educational-project frontend git i18next multilingual next-intl nextjs15 nodejs20 react19 tailwindcss4 tejada1970 typescript5

Last synced: 2 months ago
JSON representation

Proyecto multilenguaje básico con Next.js v15 + next-intl (i18n) y typeScript 5. Este proyecto esta realizado con fines educativos.

Awesome Lists containing this project

README

          

# 🌐 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](https://github.com/tejada1970/guias-desarrollo/blob/master/entorno-windows/crear/crear-proyecto-nextjs.md)

---

## ⚙️ 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)](https://github.com/tejada1970/guias-desarrollo/blob/master/entorno-windows/configurar/configurar-i18n-con-next-intl.md)

---

## 📁 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](https://github.com/tejada1970/guias-desarrollo/blob/master/entorno-windows/crear/crear-repositorio-github-subir-proyecto.md)

---

## 📥 ¿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](https://github.com/tejada1970/guias-desarrollo/blob/master/entorno-windows/clonar/clonar-proyecto-nextjs-en-xampp.md)

> 💡 **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](LICENSE) para más detalles.

---

## 📦 Sobre Next.js

Este proyecto fue desarrollado usando [Next.js](https://nextjs.org/), 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](https://nextjs.org/docs)
- 🎓 [Tutorial interactivo](https://nextjs.org/learn)
- 💻 [Repositorio oficial en GitHub](https://github.com/vercel/next.js/)
- ☁️ [Despliegue con Vercel](https://nextjs.org/docs/deployment)