Las 10 Preguntas de Entrevista sobre Next.js que Debes Conocer en 2026

Published: 1/11/2026 · Updated: 1/14/2026

Las 10 Preguntas de Entrevista sobre Next.js que Debes Conocer en 2026 - Key Takeaways

Next.js se ha convertido en el framework de React preferido para aplicaciones de produccion. Ya sea que te estes preparando para un puesto de frontend o de full-stack, estas preguntas cubren los conceptos que los entrevistadores preguntan constantemente.

1. Que es Next.js y por que lo usarias en lugar de React simple?

Next.js es un framework de React que proporciona estructura y caracteristicas integradas para construir aplicaciones listas para produccion. Mientras que React es una biblioteca de interfaz de usuario que requiere configuracion manual para enrutamiento, estrategias de renderizado y optimizacion, Next.js maneja estas preocupaciones de forma predeterminada.

Ventajas clave sobre React simple:

Enrutamiento basado en archivos sin bibliotecas adicionales
Renderizado del lado del servidor (SSR) y generacion de sitios estaticos (SSG) integrados
Division automatica de codigo por pagina
Rutas API para funcionalidad de backend
Optimizacion integrada de imagenes y fuentes

Usa Next.js cuando necesites SEO, cargas de pagina iniciales rapidas o quieras reducir la sobrecarga de configuracion.

2. Explica la diferencia entre SSR, SSG y CSR

Estas son las tres estrategias principales de renderizado en Next.js:

Renderizado del Lado del Servidor (SSR): El HTML se genera en el servidor para cada solicitud. La pagina siempre esta actualizada pero es mas lenta ya que el servidor trabaja en cada visita. Usa getServerSideProps para este enfoque.

Generacion de Sitios Estaticos (SSG): El HTML se genera una vez en tiempo de compilacion y se reutiliza para cada solicitud. Esta es la opcion mas rapida pero el contenido es estatico hasta la proxima compilacion. Usa getStaticProps para este enfoque.

Renderizado del Lado del Cliente (CSR): El navegador recibe un shell HTML minimo y JavaScript renderiza el contenido. Esto resulta en cargas iniciales mas lentas pero funciona bien para dashboards autenticados donde el SEO no importa.

// SSR - se ejecuta en cada solicitud
export async function getServerSideProps() {
  const data = await fetchLiveData()
  return { props: { data } }
}

// SSG - se ejecuta una vez en tiempo de compilacion
export async function getStaticProps() {
  const data = await fetchStaticData()
  return { props: { data } }
}

3. Que es la Regeneracion Estatica Incremental (ISR)?

ISR combina los beneficios de rendimiento de la generacion estatica con la frescura del renderizado del lado del servidor. Las paginas se pre-construyen en el momento del despliegue, pero Next.js las regenera en segundo plano despues de un intervalo especificado.

export async function getStaticProps() {
  const products = await fetchProducts()
  return {
    props: { products },
    revalidate: 60 // Regenerar pagina cada 60 segundos
  }
}

Cuando un usuario visita una pagina pasada su ventana de revalidacion, recibe la version en cache inmediatamente mientras Next.js reconstruye la pagina en segundo plano. El siguiente visitante obtiene la version actualizada.

ISR es ideal para paginas de productos de comercio electronico, publicaciones de blog o cualquier contenido que cambie periodicamente pero no necesite precision en tiempo real.

4. Como funciona el enrutamiento basado en archivos en Next.js?

Next.js crea automaticamente rutas basadas en la estructura de archivos en tu directorio pages (Pages Router) o app (App Router).

pages/
  index.js          → /
  about.js          → /about
  blog/
    index.js        → /blog
    [slug].js       → /blog/:slug (dinamico)
  api/
    users.js        → /api/users

Las rutas dinamicas usan corchetes. El nombre de archivo [slug].js coincide con cualquier valor y lo hace disponible a traves del router:

import { useRouter } from "next/router"

export default function BlogPost() {
  const router = useRouter()
  const { slug } = router.query
  // slug contiene el segmento dinamico
}

Para la generacion estatica de rutas dinamicas, tambien debes implementar getStaticPaths para indicarle a Next.js que rutas pre-renderizar.

5. Cual es el proposito de getStaticPaths?

getStaticPaths le indica a Next.js que rutas dinamicas pre-renderizar en tiempo de compilacion. Sin el, Next.js no sabe que valores puede tener el segmento dinamico.

// pages/posts/[id].js
export async function getStaticPaths() {
  const posts = await getAllPosts()
  
  return {
    paths: posts.map(post => ({
      params: { id: post.id.toString() }
    })),
    fallback: "blocking" // o false, o true
  }
}

export async function getStaticProps({ params }) {
  const post = await getPost(params.id)
  return { props: { post } }
}

Opciones de fallback:

false - Las rutas desconocidas devuelven 404
true - Las rutas desconocidas muestran un estado de carga mientras se generan
"blocking" - Las rutas desconocidas esperan la generacion antes de responder (recomendado)

6. Como funcionan las rutas API?

Los archivos dentro de pages/api/ se convierten en endpoints de API serverless. Cada archivo exporta una funcion handler que recibe objetos de solicitud y respuesta similares a Express.

// pages/api/users.js
export default async function handler(req, res) {
  if (req.method === "GET") {
    const users = await db.users.findMany()
    res.status(200).json(users)
  } else if (req.method === "POST") {
    const user = await db.users.create(req.body)
    res.status(201).json(user)
  } else {
    res.setHeader("Allow", ["GET", "POST"])
    res.status(405).end()
  }
}

Las rutas API se ejecutan solo del lado del servidor y se despliegan como funciones serverless en plataformas como Vercel. Son utiles para manejo de formularios, operaciones de base de datos e integracion con APIs de terceros sin exponer credenciales.

7. Explica el componente Image de Next.js

El componente next/image reemplaza la etiqueta estandar <img> con optimizacion automatica:

import Image from "next/image"

export default function Avatar() {
  return (
    <Image
      src="/profile.jpg"
      alt="Foto de perfil"
      width={200}
      height={200}
      priority // Cargar inmediatamente para imagenes above-the-fold
    />
  )
}

Las optimizaciones automaticas incluyen:

Tamano responsivo basado en el dispositivo
Conversion a formatos modernos (WebP, AVIF)
Carga diferida por defecto
Soporte para placeholder con desenfoque
Prevencion del Desplazamiento Acumulativo del Diseno

Siempre especifica width y height para prevenir el desplazamiento del diseno, o usa fill para contenedores responsivos.

8. Que es el middleware en Next.js?

El middleware se ejecuta antes de que se complete una solicitud, permitiendote modificar respuestas, redirigir usuarios o agregar encabezados. Se ejecuta en el edge, haciendolo rapido para verificaciones de autenticacion y pruebas A/B.

// middleware.js (raiz del proyecto)
import { NextResponse } from "next/server"

export function middleware(request) {
  const token = request.cookies.get("auth-token")
  
  if (!token && request.nextUrl.pathname.startsWith("/dashboard")) {
    return NextResponse.redirect(new URL("/login", request.url))
  }
  
  return NextResponse.next()
}

export const config = {
  matcher: ["/dashboard/:path*"]
}

Los casos de uso comunes incluyen autenticacion, redirecciones basadas en geolocalizacion, deteccion de bots y registro de solicitudes.

9. Como manejas las variables de entorno?

Next.js soporta variables de entorno a traves de archivos .env con una distincion importante entre el acceso del lado del servidor y del lado del cliente.

# .env.local
DATABASE_URL=postgresql://...
NEXT_PUBLIC_API_URL=https://api.example.com

Solo del lado del servidor: Las variables sin prefijo solo estan disponibles en getServerSideProps, getStaticProps y rutas API. Esto protege datos sensibles como credenciales de base de datos.

Accesible del lado del cliente: Las variables con prefijo NEXT_PUBLIC_ se empaquetan en el JavaScript y estan disponibles en el navegador. Solo usa esto para configuracion no sensible.

// Solo del lado del servidor
export async function getServerSideProps() {
  // process.env.DATABASE_URL esta disponible aqui
}

// Accesible del lado del cliente
const apiUrl = process.env.NEXT_PUBLIC_API_URL

10. Cuales son las diferencias entre Pages Router y App Router?

Next.js 13 introdujo el App Router como un nuevo paradigma junto al tradicional Pages Router.

Pages Router (directorio pages/):

Enrutamiento basado en archivos con getStaticProps, getServerSideProps
Usa _app.js para layouts globales
Componentes de cliente por defecto
Estable y ampliamente documentado

App Router (directorio app/):

Componentes de Servidor React por defecto
Layouts anidados con archivos layout.js
Obtencion de datos simplificada con componentes asincronos
Estados de carga y error integrados
Soporte para Streaming y Suspense

// App Router - la obtencion de datos es mas simple
async function BlogPage() {
  const posts = await fetchPosts() // Async directo en el componente
  return <PostList posts={posts} />
}

Para proyectos nuevos, se recomienda el App Router. Para proyectos existentes, la migracion se puede hacer de forma incremental ya que ambos routers funcionan simultaneamente.

Bonus: Preguntas de Seguimiento Comunes

Los entrevistadores a menudo profundizan con preguntas como:

Como implementarias la autenticacion en Next.js? (NextAuth.js, middleware)
Como optimizas los Core Web Vitals? (Componente Image, optimizacion de fuentes, division de codigo)
Cual es la diferencia entre next/link y una etiqueta <a> regular? (Navegacion del lado del cliente vs recarga completa)
Como manejas el estado global? (Context API, Zustand, Redux con provider en el layout)

Practica explicando estos conceptos en voz alta. Los entrevistadores valoran la comunicacion clara tanto como la precision tecnica.