Las entrevistas de Next.js se centran en estrategias de rendering, el App Router, server components, y caching — las partes que separan a Next de React plano. Aquí están las preguntas más comunes con respuestas modelo. Junior: teoría básica, definiciones y casos prácticos simples.
Los Server Components renderizan en el servidor, nunca envían su código al navegador y pueden leer una base de datos directamente. Los Client Components corren en el navegador y son lo que necesitas para state, effects y event handlers. Todo es un Server Component hasta que escribes 'use client', y esa directiva marca un límite — todo lo importado debajo de ella también se vuelve código de cliente.
Marca el límite entre código de servidor y cliente, no un solo archivo. Ponerlo en la parte superior de un componente significa que ese componente y todo lo que importa se empaqueta para el navegador. Por eso pertenece lo más profundo posible en el árbol — un 'use client' en un layout arrastra todo el subárbol al bundle.
Pages Router pone una ruta en un archivo y obtiene datos con getServerSideProps o getStaticProps. App Router usa carpetas con page.tsx, soporta layouts anidados que no re-renderizan en la navegación, y obtiene datos con componentes async. Los proyectos nuevos usan App Router; Pages existe porque las migraciones toman tiempo.
page.tsx es el contenido propio de la ruta. layout.tsx lo envuelve y todo lo anidado debajo, y crucialmente no se re-renderiza cuando navegas entre sus hijos — por eso la navegación y las sidebars pertenecen ahí. El estado en un layout sobrevive la navegación; el estado en una página no.
Haz que el Server Component sea async y haz await a los datos directamente en él — sin hook, sin effect, sin estado de carga en el componente mismo. Next lo renderiza una vez que la promise resuelve. Un loading.tsx junto a la página provee el fallback mientras tanto.
Link navega del lado del cliente, mantiene el layout montado y hace prefetch de la ruta cuando entra al viewport. Un <a> plano hace una carga completa de página, descartando el árbol de React y cualquier estado. Usar un anchor para navegación interna es la forma más rápida de hacer que una app rápida se sienta lenta.
En una entrevista real hablas bajo presión. Cam hace estas mismas preguntas, evalúa cada respuesta y muestra exactamente qué mejorar.
Practicar entrevista de Junior Next.js →