Skip to content

mauriciogc/next.js-15.3-1

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

87 Commits
 
 
 
 

Repository files navigation

🚀 Next.js

Next.js TypeScript TailwindCSS License: MIT

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.


Temas y ramas disponibles

Acá puedes ver todas las stories de next.js [ref]

A continuación, se detallan las principales ramas y los temas que cubren:

Fundamentos


Título Descripción Artículo Rama
Fundamentos básicos de Next.js
  • ¿Qué es Next.js?
  • Crear un proyecto
  • Ejecutar el proyecto
Medium Github

Páginas, Rutas: estáticas, dinámicas, Renderizado.


Título Descripción Artículo Rama
Proyecto base Proyecto base que se utiliza para los ejemplos Github
Páginas
  • ¿Qué son?
  • Crear una página
Medium Github
Rutas estáticas
  • Rutas estáticas
    • Ventajas
    • ¿Cómo se crean?
    • ¿Cómo funcionan?
    • Ejemplo
  • Rutas estáticas anidadas
    • Ventajas
    • ¿Cómo se crean?
    • ¿Cómo funcionan?
    • Ejemplo
Medium Github
Rutas dinámicas [folder]
  • Rutas dinámicas
    • Ventajas
    • ¿Cómo se crean?
    • ¿Cómo funcionan?
    • Ejemplo
  • Rutas dinámicas anidadas
    • Ventajas
    • ¿Cómo se crean?
    • ¿Cómo funcionan?
    • Ejemplo
Medium Github
Renderizado híbrido
  • Renderizado híbrido
  • CSR (Client-Side Rendering)
    • Enfoque
    • Es útil cuando...
    • Funcionamiento
    • Ejemplo
  • SSR (Server Side Rendering)
    • Enfoque
    • Es útil cuando...
    • Funcionamiento
    • Ejemplo
  • SSG (Static Site Generation)
    • Enfoque
    • Es útil cuando...
    • Funcionamiento
    • Ejemplo
  • ¿CSR (Client Side Rendering) o SSR (Server Side Rendering)?
  • CSR, SSR, SSG. ¿Cuál es la mejor opción?
Medium Github
Rutas dinámicas avanzadas [slug], [...slug] y [[...slug]]
  • Rutas dinámica [slug], […slug] y [[...slug]]
    • [slug] Slug simple
      • ¿Cómo se crean?
      • Ejemplo
      • ¿Cómo funcionan?
      • ¿Rutas dinámicas o segmento dinámico slug?
    • [...slug] Catch-all Slug (todos los segmentos)
      • ¿Cómo se crean
      • Ejemplo
      • ¿Cómo funcionan?
      • ¿Cuándo usar [...slug]?
    • [[...slug]] — Optional Catch-all
      • ¿Cómo se crean?
      • Ejemplo
      • ¿Cómo funcionan?
      • ¿Cuándo usar [[...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
  • CSR (Client Side Rendering)
    • Ejemplo con [slug]
    • Ejemplo con [...slug]
    • Ejemplo con [[...slug]]
  • SSR (Server Side Rendering)
    • Ejemplo con [slug]
    • Ejemplo con [...slug]
    • Ejemplo con [[...slug]]
  • SSG (Static Site Generation)
    • Ejemplo con [slug]
    • Ejemplo con [...slug]
    • Ejemplo con [[...slug]]
Medium Github

Archivos de alto nivel (Top-level files)


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)
  • ¿Qué son?
  • next.config.js, package.json, instrumentation.ts, middleware.ts, .env, .env.*, .eslintrc.json
  • ¿Dónde se colocan?
  • ¿Por qué son importantes?
Medium Github
Archivo next.config.js
(parte I)
  • ¿Qué es next.config.js?
  • Principales características
  • Ventajas
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • ¿Cuándo se ejecuta?
  • Configuraciones
  • Buenas prácticas
Medium Github
Archivo next.config.js
(parte II)
  • Configuraciones básicas y de entorno
    • reactStrictMode, compress, basePath, poweredByHeader, assetPrefix, distDir, pageExtensions, output
  • Configuraciones avanzadas
    • allowedDevOrigins, headers, rewrites, redirects, trailingSlash, generateEtags, generateBuildId, onDemandEntries, devIndicators, expireTime
Medium Github
Archivo next.config.js
(parte III)

Nota: Revisar en componentes Image
  • Optimización de recursos y caché
    • images, cacheHandler, httpAgentOptions, productionBrowserSourceMaps, htmlLimitedBots
  • Ecosistema, herramientas y compiladores
    • webpack, typescript, eslint, turbopack, optimizePackageImports, transpilePackages, serverExternalPackages
Medium Github
Archivo next.config.js
(parte IV)
  • serverActions
Medium Github
Archivo instrumentation.ts
  • ¿Qué es?
  • Principales características
  • Ventajas
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • Casos de uso
  • Ejemplos
  • ¿Se puede usar con layouts, loading o templates?
  • A considerar
Medium Github
Archivos .env*
  • ¿Qué es?
  • Principales características
  • Ventajas
  • ¿Qué archivo .env se usa en cada entorno en Next.js?
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • ¿Se pueden usar con layouts, loading o route.ts?
  • Ejemplos
  • A considerar
Medium Github
Archivo middleware.js
  • ¿Qué es?
  • Principales características
  • Ventajas
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • NextResponse y NextRequest
  • Ejemplos
  • A considerar
Medium Github

Archivos de enrutamiento (App Router)


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)
  • ¿Qué son los archivos de enrutamiento?
    • Básicos
    • Mejora UX y manejo de errores
    • Comportamientos específicos
  • ¿Dónde se colocan?
  • ¿Por qué son importantes?
Medium Github
Archivo layout.tsx

Nota: Revisar en componentes Link
  • ¿Qué es layout.tsx?
  • Principales características
  • Ventajas
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • Ejemplos
  • A considerar
Medium Github
Archivo loading.tsx

Nota: Revisar en componentes Suspense y Lazy loading
  • ¿Qué es loading.tsx?
  • Principales características
  • Ventajas
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • Ejemplos
  • A considerar
Medium Github
Archivo error.tsx
  • ¿Qué es error.tsx?
  • Principales características
  • Ventajas
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • Ejemplos
  • A considerar
Medium Github
Archivo not-found.tsx
  • ¿Qué es not-found.tsx?
  • Principales características
  • Ventajas
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • Ejemplos
  • A considerar
  • error.tsx o not-found.tsx
Medium Github
Archivo global-error.tsx
  • ¿Qué es global-error.tsx?
  • Principales características
  • Ventajas
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • Ejemplos
  • A considerar
  • ¿Se puede usar con loading.tsx?
  • Comparativa: global-error.tsx vs error.tsx vs not-found.tsx
Medium Github
Archivo template.tsx
  • ¿Qué es template.tsx?
  • Principales características
  • Ventajas
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • Ejemplos
  • A considerar
  • ¿Se puede usar con loading.tsx?
  • ¿Se puede tener un template.tsx global?
  • layout.tsx o template.tsx
Medium Github
Archivo route.tsx
  • ¿Qué es route.tsx?
  • Principales características
  • Ventajas
  • NextResponse y NextRequest
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • Ejemplos
  • A considerar
Medium Github

Route Groups & Private Folders


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
  • ¿Qué son?
  • Route Groups (folder), Private Folders _folder
  • ¿Dónde se colocan?
  • ¿Por qué son importantes?
Medium Github
Route Groups (folder)
  • ¿Qué son?
  • Principales características
  • Ventajas
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • Ejemplos
  • Router group anidado
  • A considerar
Medium Github
Private Folders _folder
  • ¿Qué es?
  • Principales características
  • Ventajas
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • Ejemplos
  • A considerar
Medium Github

Parallel and Intercepted Routes


Título Descripción Artículo Rama
Fundamentos básicos de Parallel and Intercepted Routes
  • ¿Qué son?
  • Parallel routes — @
  • Intercepted routes — (.), (..), (..)(..), (...)
  • ¿Por qué son importantes?
  • A considerar
Medium Github
Parallel Routes
  • ¿Qué son?
  • Principales características
  • Ventajas
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • Ejemplos
  • ¿Qué pasa si el usuario no tiene permisos para un slot y accede a la URL?
  • A considerar
Medium Github
Intercepting Routes
  • ¿Qué son?
  • Principales características
  • Tipos de Intercepted Routes (segmento relativo)
  • Ventajas
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • A considerar
  • Errores comunes
Medium Github
Interceptar en el mismo nivel
(.)segment
  • Ejemplo
Medium Github
Interceptar un nivel arriba
(..)segment
  • Ejemplo
Medium Github
Interceptar dos niveles arriba
(..)(..)segment
  • Ejemplo
Medium Github
Interceptar desde la raíz
(...)segment
  • Ejemplo
Medium Github

Funciones, hooks, componentes y otros...


Título Descripción Artículo Rama
Lazy loading dynamic(), lazy, Suspense, import

Nota: Revisar en componentes Suspense
  • ¿Qué es?
  • ¿Por qué usarlo?
  • Ventajas
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • Ejemplos
  • ¿Cuándo usar dynamic() vs import() directo?
  • A considerar
Medium Github
Hook useParams para App Router
  • ¿Qué es useParams?
  • ¿Por qué se usa?
  • Ventajas
  • ¿Cómo funciona?
  • Ejemplos
  • A considerar
  • Diferencia entre params como propiedad y useParams
Medium Github
Función generateStaticParams y la variable dynamicParams
  • generateStaticParams
    • ¿Qué es generateStaticParams?
    • ¿Por qué se usa?
    • Ventajas que tiene generateStaticParams
    • ¿Cómo funciona?
    • Ejemplos
    • A considerar
  • dynamicParams
    • ¿Qué es dynamicParams?
    • Ventajas que tiene dynamicParams
    • ¿Cómo funciona?</li
    • Ejemplos
    • A considerar
Medium Github
Componente Link
  • ¿Qué es Link?
  • Características
  • Ventajas
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • Opciones disponibles
    • href
    • Replace
    • prefetch
    • scroll
    • onNavigate
  • Ejemplos
  • A considerar
  • ¿Es compatible usar Link dentro de Layouts?
  • Comparación con a tradicional
Medium Github
Componente Suspense
  • ¿Qué es Suspense?
  • Características
  • Ventajas
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • Ejemplos
  • A considerar
  • loading.tsx o Suspense
Medium Github
Componente Image
  • ¿Qué es?
  • Características
  • ¿Por qué es relevante?
  • Ventajas
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • Propiedades clave del componente <Image />
  • Ejemplos
  • A considerar
  • Tips avanzados
Medium Github
Metadata y generateMetadata()
  • ¿Qué es?
  • Características
  • Ventajas
  • ¿Dónde se define?
  • ¿Cómo se crea o implementa?
  • ¿Cómo funciona?
  • Propiedades disponibles
  • Ejemplos
  • A considerar
  • Tips avanzados
Medium Github
Internacionalización (i18n)
  • ¿Qué es?
  • ¿Por qué es relevante?
  • ¿Cómo se crea o implementa?
  • Configuración inicial
  • Casos reales
Medium Github

Proyectos y casos de uso


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.



¿Buscas las explicaciones detalladas?

Cada rama está acompañada de explicaciones paso a paso en mi blog de Medium.


Cómo clonar y ejecutar el proyecto

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!!

About

Next.js v15.3.1

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published