Este repositorio contiene una colección organizada de proyectos, ejemplos prácticos y conceptos clave de Next.js, agrupados por ramas temáticas.
Cada rama aborda un aspecto específico del framework desde la creación de un proyecto, hasta la implementación de rutas dinámicas avanzadas, manejo de errores, estilos, y estrategias de renderizado como CSR, SSR y SSG.
La idea es que puedas explorar casos reales y progresivos, entender cómo se implementan y aplicar estos conceptos en tus propios proyectos.
Acá puedes ver todas las stories de next.js [ref]
A continuación, se detallan las principales ramas y los temas que cubren:
Título | Descripción | Artículo | Rama |
---|---|---|---|
Fundamentos básicos de Next.js |
|
Medium | Github |
Título | Descripción | Artículo | Rama |
---|---|---|---|
Proyecto base | Proyecto base que se utiliza para los ejemplos | Github | |
Páginas |
|
Medium | Github |
Rutas estáticas |
|
Medium | Github |
Rutas dinámicas [folder] |
|
Medium | Github |
Renderizado híbrido |
|
Medium | Github |
Rutas dinámicas avanzadas [slug] , [...slug] y [[...slug]] |
|
Medium | Github |
Renderizado híbrido (CSR, SSR, SSG) con rutas dinámicas avanzadas ([slug] , [...slug] , [[...slug]] )Nota: Revisar en funciones useParams ,generateStaticParams y dynamicParams |
|
Medium | Github |
Título | Descripción | Artículo | Rama |
---|---|---|---|
Proyecto base (2) | Proyecto base que se utiliza para los ejemplos | Github | |
Fundamentos básicos de Archivos de alto nivel (Top-level files) |
|
Medium | Github |
Archivo next.config.js (parte I) |
|
Medium | Github |
Archivo next.config.js (parte II) |
|
Medium | Github |
Archivo next.config.js (parte III) Nota: Revisar en componentes Image |
|
Medium | Github |
Archivo next.config.js (parte IV) |
|
Medium | Github |
Archivo instrumentation.ts |
|
Medium | Github |
Archivos .env* |
|
Medium | Github |
Archivo middleware.js |
|
Medium | Github |
Título | Descripción | Artículo | Rama |
---|---|---|---|
Proyecto base (2) | Proyecto base que se utiliza para los ejemplos | Github | |
Fundamentos básicos de Archivos de enrutamiento (App Router) |
|
Medium | Github |
Archivo layout.tsx Nota: Revisar en componentes Link |
|
Medium | Github |
Archivo loading.tsx Nota: Revisar en componentes Suspense y Lazy loading |
|
Medium | Github |
Archivo error.tsx |
|
Medium | Github |
Archivo not-found.tsx |
|
Medium | Github |
Archivo global-error.tsx |
|
Medium | Github |
Archivo template.tsx |
|
Medium | Github |
Archivo route.tsx |
|
Medium | Github |
Título | Descripción | Artículo | Rama |
---|---|---|---|
Proyecto base (3) | Proyecto base que se utiliza para los ejemplos | Github | |
Fundamentos básicos de Route Groups & Private Folders |
|
Medium | Github |
Route Groups (folder) |
|
Medium | Github |
Private Folders _folder |
|
Medium | Github |
Título | Descripción | Artículo | Rama |
---|---|---|---|
Fundamentos básicos de Parallel and Intercepted Routes |
|
Medium | Github |
Parallel Routes |
|
Medium | Github |
Intercepting Routes |
|
Medium | Github |
Interceptar en el mismo nivel (.)segment |
|
Medium | Github |
Interceptar un nivel arriba (..)segment |
|
Medium | Github |
Interceptar dos niveles arriba (..)(..)segment |
|
Medium | Github |
Interceptar desde la raíz (...)segment |
|
Medium | Github |
Título | Descripción | Artículo | Rama |
---|---|---|---|
Lazy loading dynamic() , lazy , Suspense , import Nota: Revisar en componentes Suspense |
|
Medium | Github |
Hook useParams para App Router |
|
Medium | Github |
Función generateStaticParams y la variable dynamicParams |
|
Medium | Github |
Componente Link |
|
Medium | Github |
Componente Suspense |
|
Medium | Github |
Componente Image |
|
Medium | Github |
Metadata y generateMetadata() |
|
Medium | Github |
Internacionalización (i18n) |
|
Medium | Github |
Título | Descripción | Repositorio |
---|---|---|
Documentación con Next.js 15+ & Nextra V4 | Construir un sitio de documentación utilizando el stack compuesto por Next.js 15 (App Router), Nextra v4 (con theme-docs ), y Pagefind como motor de búsqueda local |
Github |
Wordle clone | Clon simplificado pero completamente funcional de Wordle, el popular juego de adivinanza de palabras. Esta versión se construye utilizando Next.js 15+, React Server Components, la última versión de TailwindCSS 4 para estilos y el paquete de next-intl para el idioma. | Github |
Este repositorio se actualizará continuamente con nuevos temas y ejemplos.
Cada rama está acompañada de explicaciones paso a paso en mi blog de Medium.
Clona el repositorio:
git clone https://github.com/mauriciogc/next.js-15.3-1.git
cd next.js-15.3-1
Cambia a la rama que deseas explorar:
git checkout dynamic-routes
Instala las dependencias:
npm install
Ejecuta el servidor de desarrollo:
npm run dev
Abre tu navegador en:
http://localhost:3000
No olvides revisar el README de cada rama!!