Tutorial de Next.js: Construyendo una aplicación web del lado del servidor con React

Next.js es un marco de desarrollo de React que combina React con las capacidades del lado del servidor para crear aplicaciones web rápidas y escalables. En este tutorial, aprenderemos los conceptos básicos de Next.js y construiremos una aplicación web simple utilizando esta biblioteca.

Requisitos previos

Antes de comenzar, asegúrate de tener instalado Node.js en tu máquina. Puedes descargarlo e instalarlo desde https://nodejs.org.

Paso 1: Crear un nuevo proyecto Next.js

Para comenzar, abrimos una terminal y creamos un nuevo directorio para nuestro proyecto. Navega a este directorio y ejecuta el siguiente comando para inicializar un nuevo proyecto de Next.js:

npx create-next-app nombre-de-tu-proyecto

Esto creará una estructura básica de proyecto de Next.js en una carpeta llamada nombre-de-tu-proyecto.

Paso 2: Estructura del proyecto

Después de crear el proyecto, accedemos al directorio del proyecto y exploramos su estructura. Verás los siguientes archivos y directorios principales:

pages: Este directorio contiene las páginas de tu aplicación. Cada archivo JavaScript o TypeScript en este directorio representa una ruta de URL distinta.
public: Este directorio se utiliza para almacenar archivos estáticos, como imágenes o archivos CSS, que se pueden acceder directamente desde la raíz de la URL.
styles: Aquí puedes agregar estilos globales o archivos CSS modulares para tu aplicación.
components: Puedes crear un directorio llamado components para almacenar componentes reutilizables de React.

Paso 3: Creando una página

Ahora, crearemos nuestra primera página en Next.js. En el directorio pages, crea un archivo llamado index.js con el siguiente contenido:

import React from 'react';

function HomePage() {
  return (
    <div>
      <h1>Bienvenido a mi aplicación Next.js</h1>
      <p>Esta es la página de inicio.</p>
    </div>
  );
}

export default HomePage;

Guarda el archivo y ejecuta el siguiente comando en la terminal dentro del directorio de tu proyecto:

npm run dev

Esto iniciará el servidor de desarrollo de Next.js. Abre tu navegador y visita http://localhost:3000 para ver tu aplicación en funcionamiento.

Paso 4: Navegación entre páginas

Next.js facilita la navegación entre páginas. Veamos cómo crear un enlace a otra página en nuestra aplicación. Actualiza el archivo index.js con el siguiente código:

import React from 'react';
import Link from 'next/link';

function HomePage() {
  return (
    <div>
      <h1>Bienvenido a mi aplicación Next.js</h1>
      <p>Esta es la página de inicio.</p>
      <Link href="/about">
        <a>Ir a la página Acerca de</a>
      </Link>
    </div>
  );
}

export default HomePage;

Aquí hemos importado el componente Link de Next.js y lo hemos utilizado para envolver un enlace a la página «about» en nuestra aplicación. Guarda los cambios y comprueba la aplicación en tu navegador. Al hacer clic en el enlace, deberías ser redirigido a la página «about».

Paso 5: Creando una página «Acerca de»

Ahora crearemos una nueva página llamada «about» en nuestra aplicación. En el directorio pages, crea un archivo llamado about.js con el siguiente contenido:

import React from 'react';

function AboutPage() {
  return (
    <div>
      <h1>Acerca de</h1>
      <p>Esta es la página "Acerca de" de mi aplicación Next.js.</p>
    </div>
  );
}

export default AboutPage;

Guarda el archivo y vuelve a tu navegador. Verás que ahora tienes un enlace a la página «Acerca de». Al hacer clic en él, se cargará la nueva página con el contenido que acabas de agregar.

Conclusión

En este tutorial, has aprendido los conceptos básicos de Next.js y has construido una aplicación web simple con múltiples páginas. Hemos explorado la estructura del proyecto, hemos creado una página de inicio y una página «Acerca de», y hemos agregado navegación entre ellas.

Next.js ofrece muchas más características y funcionalidades avanzadas para desarrollar aplicaciones web robustas. Te animo a que explores la documentación oficial de Next.js en https://nextjs.org/docs para obtener más información y profundizar en el desarrollo de aplicaciones con Next.js.

¡Felicitaciones por completar este tutorial! Espero que haya sentado las bases para que puedas seguir construyendo aplicaciones web increíbles utilizando Next.js y React.

Recuerda que este tutorial solo cubre los conceptos básicos de Next.js. Si deseas profundizar en temas más avanzados o explorar características adicionales, te recomendaría consultar la documentación oficial de Next.js en https://nextjs.org/docs.

¡Buena suerte con tus proyectos de Next.js! Si tienes más preguntas, no dudes en preguntar. Estoy aquí para ayudarte.