Sebastian Gomez

Feb 22, 2022

Updated: Feb 25, 2026

Introducción a Next.js

🌟 Introducción a Next.js: Domina el mundo de React 🌟

🤔 ¿Qué es Next.js?

Antes de hablar de Next.js, hablemos sobre React. React es una librería encargada de la parte de la vista de nuestras aplicaciones, pero no es suficiente para construir rápidamente una aplicación completa 😰. Necesitas un enrutador, un sistema de compilado, estilizar tus componentes y preocuparte por la velocidad y el rendimiento de tu sitio, entre muchas otras cosas.

🚀 Next.js es un framework full-stack creado por el equipo de Vercel, que utiliza React como su librería de vista. Si ya conoces React, aprender Next.js será muy familiar para ti. Next.js ya viene con decisiones tomadas y un conjunto de herramientas definidas, lo que lo convierte en un framework "opinionado". En teoría, este es el toque secreto basado en la experiencia del equipo de Vercel al construir aplicaciones en producción con React.

De hecho, desde 2024 React recomienda oficialmente usar un framework como Next.js para iniciar nuevos proyectos, en lugar de herramientas como el ahora descontinuado Create React App.

Características de Next.js ✅

Next.js ha evolucionado enormemente. Estas son las características principales en su versión actual (v16):

App Router: Un sistema de enrutamiento basado en el sistema de archivos usando el directorio app/, que reemplaza al antiguo Pages Router.
React Server Components: Los componentes se renderizan en el servidor por defecto. Solo los componentes que necesitan interactividad del navegador usan la directiva 'use client'.
Turbopack: El nuevo bundler predeterminado que reemplaza a Webpack, ofreciendo hasta un 76% más de velocidad en el arranque del servidor de desarrollo.
Prerenderizado con múltiples estrategias: Server Side Rendering (SSR), Static Site Generation (SSG), Incremental Static Regeneration (ISR) y Streaming.
Route Handlers: Rutas para tu API directamente en el directorio app/.
Server Actions: Funciones del servidor que se pueden invocar directamente desde el cliente sin necesidad de crear endpoints API.
Optimización automática: Imágenes, fuentes, scripts y metadatos optimizados automáticamente.
React 19: Soporte completo para la última versión de React, incluyendo el React Compiler (experimental).

🧩 Server Components vs Client Components

Una de las innovaciones más importantes de Next.js moderno es la distinción entre Server Components y Client Components:

Server Components (por defecto):

Se renderizan completamente en el servidor
Pueden acceder directamente a bases de datos y APIs
No envían JavaScript al navegador
Ideales para obtener datos y renderizar contenido estático

Client Components (opt-in con 'use client'):

Se necesitan cuando usas estado (useState), efectos (useEffect) o eventos del navegador (onClick, onChange)
Se hidratan en el cliente para hacerlos interactivos
Deben usarse solo donde sea necesario para reducir el JavaScript enviado al navegador

// Server Component (por defecto, no necesita directiva)
import LikeButton from './like-button'

export default async function Page() {
  const post = await getPost() // Fetch directo en el servidor
  return (
    <div>
      <h1>{post.title}</h1>
      <LikeButton likes={post.likes} />
    </div>
  )
}

// Client Component (necesita 'use client')
'use client'
import { useState } from 'react'

export default function LikeButton({ likes }) {
  const [count, setCount] = useState(likes)
  return <button onClick={() => setCount(count + 1)}>{count} likes</button>
}

🗂️ App Router: El nuevo sistema de enrutamiento

El App Router usa el directorio app/ y convenciones de archivos:

app/page.js → Página principal (/)
app/about/page.js → Página about (/about)
app/post/[slug]/page.js → Rutas dinámicas (/post/mi-post)
app/layout.js → Layout compartido (obligatorio en la raíz)
app/loading.js → UI de carga automática
app/error.js → Manejo de errores automático

Ya no necesitas getServerSideProps ni getStaticProps. Los datos se obtienen directamente con async/await en los Server Components:

// Antes (Pages Router)
export async function getServerSideProps() {
  const data = await fetchData()
  return { props: { data } }
}

// Ahora (App Router)
export default async function Page() {
  const data = await fetchData() // Directo en el componente
  return <div>{data.title}</div>
}

🤷‍♀️ ¿Qué pasó con Create React App?

Create React App (CRA) fue descontinuado oficialmente. El equipo de React ya no lo recomienda para nuevos proyectos. La razón es que CRA solo genera aplicaciones de una sola página (SPA) del lado del cliente, sin soporte para:

Server-Side Rendering (SSR)
React Server Components
Routing integrado
Optimización automática

En su lugar, React recomienda usar un framework como Next.js, React Router v7 (con Vite), o Expo para aplicaciones nativas.

Y... ¿Gatsby? 🌐

Gatsby prácticamente ha dejado de ser una opción viable. Después de ser adquirido por Netlify, su desarrollo se ha estancado significativamente. Ya no aparece en las recomendaciones oficiales de React para iniciar nuevos proyectos. Si estabas considerando Gatsby, Next.js ofrece todas sus características y más: generación estática, optimización de imágenes, GraphQL (si lo deseas), y además SSR, Server Components y API routes.

🧭 ¿Cuándo usar Next.js?

Aquí tienes una guía actualizada para elegir la herramienta adecuada:

¿Necesitas construir cualquier tipo de aplicación web (SPA, SSR, estática o híbrida)? 👉 Usa Next.js (recomendado por React)
¿Necesitas una SPA con routing personalizado y Vite? 👉 Usa React Router v7
¿Necesitas construir una aplicación nativa para iOS/Android y web? 👉 Usa Expo
¿Necesitas un proyecto de aprendizaje sin framework? 👉 Usa Vite + React (solo para aprender los fundamentos)

💡 Conclusiones

Next.js es el framework full-stack recomendado oficialmente por React para construir aplicaciones web modernas.
Los React Server Components cambian fundamentalmente cómo construimos aplicaciones: el servidor hace más trabajo, el cliente recibe menos JavaScript.
El App Router con el directorio app/ es el estándar actual, ofreciendo layouts anidados, streaming, y manejo de errores integrado.
Create React App y Gatsby ya no son opciones recomendadas para nuevos proyectos.

🏋️‍♂️ Ejercicios para practicar

Crea un nuevo proyecto con npx create-next-app@latest y explora la estructura del directorio app/.
Construye una página que obtenga datos de una API directamente en un Server Component usando async/await.
Crea un componente interactivo con 'use client' y combínalo con un Server Component.
Implementa una ruta dinámica (app/post/[slug]/page.js) que renderice contenido diferente según el parámetro de la URL.

📚 Resumen en 3 puntos

Next.js es el framework full-stack oficial recomendado por React, con Server Components, App Router y Turbopack.
Los Server Components renderizan en el servidor por defecto, enviando menos JavaScript al navegador y mejorando el rendimiento.
Create React App y Gatsby han sido reemplazados — Next.js es ahora la opción estándar para aplicaciones React en producción.

Espero que este post actualizado te haya sido de utilidad y te ayude a entender el estado actual de Next.js en 2025. 🌟

Te dejo el enlace al siguiente post sobre Next.js: Comenzando con Next.js

¡Déjame un comentario si te sirvió o si quieres añadir alguna opinión o si tienes alguna duda! No dudes en dejarme un comentario en la parte de abajo. Recuerda que si te gustó, también puedes compartir usando los links a las redes sociales en la parte de abajo. 🚀