Next

Resolución activa de problemas

Prompts de Práctica

Inténtalo antes de revelar. Cada prompt de código y diseño de sistema se desarrolla por etapas — enfoque, luego solución — para que practiques recuperación, no reconocimiento. Marca lo que resolviste; revisita el resto.

Resueltos 0 / 11
Nivel
  1. CódigoSenior

    Cachear un Server Component de datos con Cache Components

    Next.jscachingCache Components

    Un Server Component de página de producto llama getProduct(id) (una lectura lenta de DB) en cada solicitud. Usando el modelo Cache Components (cacheComponents: true), cachea los datos obtenidos por hasta una hora, etiquétalos para que una actualización de precio pueda invalidarlos inmediatamente, y asegúrate de que la compilación no falle en un componente que también lee cookies() para una tira de "visto recientemente".

    próximo: nuevo
  2. CódigoMid

    Formulario con Server Action usando useActionState + revalidatePath

    Next.jsServer Actionsforms

    Construye un formulario de "renombrar proyecto": una Server Action muta la BD, el formulario muestra un spinner pendiente mientras se ejecuta, muestra un error de validación en línea sin recarga completa de página, y la página de lista de proyectos refleja el nuevo nombre inmediatamente después del éxito.

    próximo: nuevo
  3. CódigoMid

    Botón de "me gusta" optimista con useOptimistic

    Next.jsuseOptimisticServer Actions

    El botón de "me gusta" de una publicación actualmente espera una ida y vuelta completa antes de que el conteo se actualice, lo que se siente lento. Haz que el conteo de "me gusta" y el estado de "gustado" se actualicen instantáneamente al tocar, se reviertan automáticamente si la Server Action falla, y nunca permitas que el botón se toque dos veces mientras una solicitud está en vuelo.

    próximo: nuevo
  4. CódigoMid

    Encuentra el error: Límite Server/Client Component

    Next.jsServer Componentsdebugging

    El PR de un compañero falla al compilar con "You're importing a component that needs `useState`. This React hook only works in a client component." Aquí está el árbol — encuentra el error y arréglalo con el cambio más pequeño posible (no simplemente pegues "use client" en todo).

    // app/dashboard/layout.tsx 'use client'; import { Sidebar } from './sidebar'; // has useState (a collapse toggle) import { DashboardStats } from './stats'; // async Server Component, awaits db export default function DashboardLayout({ children }) { return ( <div className="layout"> <Sidebar /> <DashboardStats /> <main>{children}</main> </div> ); }
    próximo: nuevo
  5. CódigoSenior

    Búsqueda con debounce que conduce un Server Component vía la URL

    Next.jsuseSearchParamsstreaming

    Construye un cuadro de búsqueda de productos: escribir actualiza un parámetro de URL ?q= (con debounce, para que no estés navegando en cada pulsación de tecla), y un Server Component lee searchParams para obtener + renderizar resultados coincidentes, mostrando un fallback de streaming mientras una nueva consulta está en vuelo.

    próximo: nuevo
  6. CódigoMid

    Protección de rutas con proxy.ts

    Next.jsproxy.tsauth

    Protege cada ruta bajo /dashboard: los visitantes no autenticados deben ser redirigidos a /login?next=<ruta original>, mientras las rutas públicas (marketing, /login en sí) permanecen intactas. Implementa esto en el borde de la aplicación, no verificando auth en cada página.

    próximo: nuevo
  7. CódigoSenior

    Lista paginada con streaming usando Suspense

    Next.jsSuspensestreaming

    Una sección de comentarios puede tener cientos de entradas. Renderiza el shell de la página (publicación + conteo de comentarios) instantáneamente, luego transmite una primera página de 20 comentarios, con un control "Cargar más" que obtiene la siguiente página sin una navegación completa de página.

    próximo: nuevo
  8. DiseñoArquitecto

    Diseña la estrategia de renderizado para un catálogo grande de e-commerce

    architecturerenderingISR

    Un catálogo tiene 500k páginas de productos, un puñado de páginas de aterrizaje de categorías, y un flujo de carrito/checkout. Diseña qué páginas son estáticas, cuáles se revalidan incrementalmente, y cuáles deben ser completamente dinámicas — y por qué.

    próximo: nuevo
  9. DiseñoArquitecto

    Diseña la obtención de datos y caché de un dashboard SaaS multi-tenant

    architecturemulti-tenancycaching

    Diseña la estrategia de obtención de datos y caché del App Router para un dashboard B2B donde los datos de cada tenant nunca deben filtrarse al caché de otro tenant, pero los widgets del dashboard son costosos de computar y vale la pena cachearlos por tenant.

    próximo: nuevo
  10. DiseñoArquitecto

    Implementa una migración a Cache Components de forma segura

    architecturecachingmigrations

    Estás migrando una aplicación de tamaño medio de Next.js del modelo anterior de fetch-cache/revalidate al nuevo modelo Cache Components (cacheComponents: true, "use cache" + cacheLife/cacheTag). Diseña cómo validarías e implementarías esto sin un incidente en producción.

    próximo: nuevo
  11. DiseñoSenior

    Diseña observabilidad para una aplicación de Next.js en producción

    architectureobservability

    Los usuarios están reportando que el sitio "se siente lento" pero nada se ve obviamente roto en una verificación rápida. Diseña la observabilidad que ya querrías tener implementada para que puedas diagnosticar esto con precisión en lugar de adivinar.

    próximo: nuevo