Fundamentos de React: Instalación de Next.js

Cuando utilizas Next.js en tu proyecto, ya no necesitas cargar los scripts de react y react-dom desde unpkg.com. En su lugar, puedes instalar estos paquetes localmente usando npm o tu gestor de paquetes preferido.

Nota: Para usar Next.js, necesitarás tener Node.js versión 18.17.0 o superior instalada en tu máquina (ver requisito de versión mínima), puedes descargarlo aquí.

Para hacerlo, crea un nuevo archivo en el mismo directorio que tu archivo index.html, llamado package.json con un objeto vacío {}.

package.json

{}

En tu terminal, ejecuta el siguiente comando en la raíz de tu proyecto:

Terminal

npm install react@latest react-dom@latest next@latest

Una vez completada la instalación, deberías poder ver las dependencias de tu proyecto listadas dentro de tu archivo package.json:

package.json

{
  "dependencies": {
    "next": "^14.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

No te preocupes si tienes versiones más recientes que las mostradas arriba, siempre y cuando tengas los paquetes next, react y react-dom instalados, estás listo.

También notarás un nuevo archivo llamado package-lock.json que contiene información detallada sobre las versiones exactas de cada paquete.

Volviendo al archivo index.html, puedes eliminar el siguiente código:

Las etiquetas <html> y <body>.
El elemento <div> con el id de app.
Los scripts de react y react-dom ya que los has instalado con NPM.
El script de Babel porque Next.js tiene un compilador que transforma JSX en JavaScript válido que los navegadores pueden entender.
La etiqueta <script type="text/jsx">.
Los métodos document.getElementById() y ReactDom.createRoot().
La parte React. de la función React.useState(0)

Después de eliminar las líneas anteriores, agrega la siguiente importación al inicio de tu archivo:

index.html

import { useState } from 'react';

Tu código debería verse así:

index.html

import { useState } from 'react';
 
function Header({ title }) {
  return <h1>{title ? title : 'Título por defecto'}</h1>;
}
 
function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  const [likes, setLikes] = useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return (
    <div>
      <Header title="Desarrolla. Previsualiza. Despliega." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
 
      <button onClick={handleClick}>Me gusta ({likes})</button>
    </div>
  );
}

El único código que queda en el archivo HTML es JSX, por lo que puedes cambiar el tipo de archivo de .html a .js o .jsx.

Creando tu primera página

Next.js utiliza enrutamiento basado en sistema de archivos. Esto significa que en lugar de usar código para definir las rutas de tu aplicación, puedes usar carpetas y archivos.

Así es como puedes crear tu primera página en Next.js:

Crea una nueva carpeta llamada app y mueve el archivo index.js dentro de ella.
Renombra tu archivo index.js a page.js. Esta será la página principal de tu aplicación.
Agrega export default a tu componente <HomePage> para ayudar a Next.js a distinguir qué componente renderizar como el componente principal de la página.

app/page.js

import { useState } from 'react';
 
function Header({ title }) {
  return <h1>{title ? title : 'Título por defecto'}</h1>;
}
 
export default function HomePage() {
  // ...
}

Ejecutando el servidor de desarrollo

A continuación, ejecutemos tu servidor de desarrollo para que puedas ver los cambios en tu nueva página mientras desarrollas. Agrega un script "next dev" a tu archivo package.json:

package.json

{
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "next": "^14.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

Comprueba lo que sucede ejecutando npm run dev en tu terminal. Notarás dos cosas:

Cuando navegues a localhost:3000, deberías ver el siguiente error:

Mensaje de error de Next.js: Estás importando un componente que necesita useState. Solo funciona en un componente de cliente...

Esto se debe a que Next.js utiliza Componentes de Servidor de React, una nueva característica que permite a React renderizar en el servidor. Los Componentes de Servidor no soportan useState, por lo que necesitarás usar un Componente de Cliente en su lugar.

En el próximo capítulo, discutiremos las principales diferencias entre Componentes de Servidor y de Cliente y solucionaremos este error.

Un nuevo archivo llamado layout.js fue creado automáticamente dentro de la carpeta app. Este es el diseño principal de tu aplicación. Puedes usarlo para agregar elementos de UI que son compartidos en todas las páginas (ej. navegación, pie de página, etc).

/app/layout.js

export const metadata = {
  title: 'Next.js',
  description: 'Generado por Next.js',
};
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Resumen

Mirando la migración hasta ahora, ya puedes estar percibiendo los beneficios de usar Next.js:

Eliminaste los scripts de React y Babel; una muestra de las herramientas y configuraciones complejas de las que ya no tienes que preocuparte.
Creaste tu primera página.

Lectura adicional:

Fundamentos de Enrutamiento en Next.js

Definiendo Rutas

Páginas y Diseños

Instalación de Next.js

Creando tu primera página

Ejecutando el servidor de desarrollo

Resumen

On this page