Cómo implementar Next.js

Implementar server side rendering en React es mucho más sencillo cuando utilizas herramientas diseñadas para ello. Next.js se ha convertido en una de las opciones más populares gracias a su sintaxis intuitiva, su sistema de rutas basado en archivos y la mínima configuración que requiere para tener un sitio funcional con renderizado del lado del servidor.

¿Cómo iniciar un proyecto con Next.js desde cero?

El primer paso es crear una carpeta dedicada al proyecto y posicionarse en ella desde la terminal. Un error común es ejecutar comandos en el directorio equivocado, así que conviene verificar la ubicación con el comando pwd [01:18].

Una vez confirmada la ruta, se ejecuta npm init para generar el archivo package.json. Durante este proceso, la terminal solicita datos como nombre del proyecto, versión, descripción y entry point. La mayoría de estos campos pueden dejarse con sus valores por defecto presionando enter [01:27].

Con el package.json listo, es momento de instalar las tres dependencias fundamentales:

• react: la librería principal para construir interfaces.
• react-dom: permite renderizar componentes en el DOM del navegador.
• next: el framework que proporciona toda la estructura necesaria para server side rendering [02:20].

Next incluye internamente muchas librerías, por lo que la instalación puede tomar algunos minutos.

¿Qué scripts necesita un proyecto de Next.js?

Dentro del package.json, la sección de scripts debe contener tres comandos esenciales [03:01]:

• "dev": "next" — levanta el entorno de desarrollo.
• "build": "next build" — genera la versión optimizada para producción.
• "start": "next start" — ejecuta la aplicación en modo producción.

La consistencia en la nomenclatura (next, next build, next start) es una de las razones por las que Next.js ha ganado tanta popularidad: resulta fácil de recordar y aplicar.

¿Cómo funciona el sistema de rutas basado en archivos?

Next.js utiliza un concepto llamado file-based routing. Se crea una carpeta llamada pages en la raíz del proyecto, y cada archivo JavaScript dentro de ella se convierte automáticamente en una ruta de la aplicación [03:55].

• pages/index.js → corresponde a la ruta raíz (/), es decir, el landing page.
• pages/platzi.js → genera la ruta /platzi.

No se necesita configurar un router manualmente; la estructura de carpetas define las rutas.

¿Cómo crear el primer componente funcional?

Dentro de pages/index.js se escribe un componente funcional de React [04:22]:

javascript const Landing = () => { return ( <div> Hola, Next </div> ); };

export default Landing;

Con este archivo creado, el proyecto ya está listo para ejecutarse. Basta con correr npm run dev en la terminal y esperar a que compile correctamente. La aplicación se levanta por defecto en el puerto 3000, accesible desde localhost:3000 [05:00].

¿Cómo verificar que el server side rendering funciona?

Una prueba rápida consiste en deshabilitar JavaScript en el navegador y recargar la página [05:27]. Si el contenido sigue visible, significa que el HTML se está generando desde el servidor antes de llegar al cliente. Con Next.js, esto ocurre sin configuración adicional.

Este comportamiento es fundamental para mejorar el SEO y la velocidad de carga percibida, ya que los motores de búsqueda y los usuarios reciben contenido renderizado de inmediato.

La rapidez con la que Next.js permite tener un proyecto funcional con server side rendering lo convierte en una herramienta ideal para construir aplicaciones y MVPs en el menor tiempo posible. Si ya probaste estos pasos, comparte tu experiencia o las dudas que te hayan surgido durante la configuración.