Guía de inicio de Next.js: La mejor opción para construir aplicaciones web modernas

Introducción

En el actual campo de desarrollo frontend en rápida evolución, Next.js es un marco muy destacado que proporciona a los desarrolladores herramientas poderosas y flexibilidad para construir aplicaciones web modernas y de alto rendimiento. Ya seas un principiante o un desarrollador que busca incorporar Next.js en un proyecto existente, este artículo te ofrecerá una guía completa de inicio para ayudarte a entender los conceptos básicos y métodos de uso de Next.js.

¿Qué es Next.js?

Next.js es un marco de React diseñado para ayudar a los desarrolladores a construir aplicaciones listas para producción de manera rápida. Ofrece muchas características poderosas, tales como:

• Renderizado del lado del servidor (SSR) y generación estática (SSG): Soporta la pre-renderización de páginas en el servidor, mejorando la velocidad de carga y el rendimiento SEO.
• Rutas: Enrutamiento basado en un sistema de archivos incorporado, simplificando la gestión de rutas de páginas y API.
• Rutas de API: Permite construir APIs fácilmente dentro del mismo proyecto, sin necesidad de un servidor adicional.
• Optimización del rendimiento: División automática de código, reduciendo el tiempo de carga inicial.

Instalación de Next.js

Instalar Next.js es muy sencillo, solo asegúrate de que Node.js esté instalado en tu entorno de desarrollo. Puedes crear un nuevo proyecto rápidamente con el siguiente comando:

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

Después de ejecutar el comando anterior, verás que se ha iniciado una nueva aplicación Next.js en http://localhost:3000.

Estructura del proyecto

Una vez que hayas creado la aplicación Next.js, verás una estructura de directorio predeterminada:

my-next-app/
├── node_modules/
├── public/
├── src/
│   ├── pages/
│   ├── styles/
│   └── components/
├── package.json
└── next.config.js

• pages/: Directorio que contiene las páginas, cada archivo .js corresponde automáticamente a una ruta.
• public/: Directorio de archivos estáticos, cualquier archivo colocado en este directorio puede ser accedido directamente.
• styles/: Directorio que contiene archivos CSS, que pueden ser utilizados para estilos globales o de componentes específicos.

Creación de páginas y rutas

Las páginas de Next.js gestionan las rutas basadas en el sistema de archivos. Crea un archivo en el directorio pages/, por ejemplo about.js, con el siguiente contenido:

export default function About() {
  return 

# Sobre nosotros

;
}

Esto creará automáticamente una ruta /about para acceder a esta página.

Generación estática y renderizado del lado del servidor

Next.js soporta generación estática (Static Generation) y renderizado del lado del servidor (Server-side Rendering) basado en estrategias de obtención de datos. Veamos cómo implementarlo:

Generación estática (Static Generation)

Si deseas pre-generar contenido al construir el proyecto, puedes usar getStaticProps. Por ejemplo:

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();

  return {
    props: {
      data: json,
    },
  };
}

export default function Page({ data }) {
  return {data.title};
}

Renderizado del lado del servidor (Server-side Rendering)

Si deseas obtener datos en cada solicitud, puedes usar getServerSideProps:

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

export default function Page({ data }) {
  return {data.title};
}

Agregar CSS y estilos

Next.js ofrece varias formas de agregar estilos CSS, la forma más sencilla es creando archivos CSS en el directorio styles/ e importándolos en las páginas necesarias:

import styles from './styles/Home.module.css';

export default function Home() {
  return 

# ¡Bienvenido a Next.js!

;
}

Además, también puedes usar bibliotecas de CSS-in-JS, como styled-components o Emotion, para manejar estilos.

Rutas de API

Puedes crear rutas de API en el directorio pages/api/. Por ejemplo, crea un archivo hello.js:

export default function handler(req, res) {
  res.status(200).json({ message: 'Hola API' });
}

Las rutas de API pueden manejar solicitudes y respuestas, proporcionando la capacidad de procesamiento de datos dinámicos para el frontend.

Despliegue de la aplicación Next.js

La forma más sencilla de desplegar es usando Vercel, que es la plataforma de alojamiento gratuita creada por el equipo de desarrollo de Next.js. Solo necesitas subir el código a GitHub y luego conectar tu cuenta de GitHub a Vercel para construir y desplegar automáticamente.

Resumen

Next.js es el marco ideal para construir aplicaciones web modernas, sus potentes características y flexibilidad permiten a los desarrolladores centrarse en la construcción y optimización de la aplicación. Con la introducción de este artículo, esperamos que tengas una comprensión básica del uso de Next.js. Esperamos que puedas aprovechar al máximo las ventajas de Next.js en tus futuros proyectos, construyendo aplicaciones web más eficientes.

Si tienes preguntas o necesitas recursos para aprender más, no dudes en consultar la documentación oficial de Next.js.