Introducción a Next.js

Introducción

Next.js es un framework de React que permite construir aplicaciones web modernas y optimizadas. En este tutorial, aprenderás los conceptos básicos de Next.js y crearás tu primera aplicación paso a paso. Cubriremos la instalación, la estructura del proyecto, la creación de páginas y el despliegue de tu aplicación.

Lo que aprenderás

• Entender qué es Next.js y sus ventajas
• Configurar un entorno de desarrollo para Next.js
• Crear una aplicación básica con Next.js
• Comprender el sistema de rutas de Next.js
• Desplegar tu aplicación en Vercel

¿Qué es Next.js?

Next.js es un framework de React desarrollado por Vercel que facilita la creación de aplicaciones web modernas. Ofrece una experiencia de desarrollo excepcional con funciones como renderizado del lado del servidor (SSR), generación estática (SSG), rutas API, soporte para TypeScript y más. Next.js se ha convertido en una opción popular para proyectos que requieren un rendimiento óptimo y buenas prácticas SEO.

Configuración del entorno

Antes de comenzar, asegúrate de tener instalado Node.js (versión 14.6.0 o superior) y npm o yarn. Puedes verificar tus versiones ejecutando `node -v` y `npm -v` en tu terminal.

node -v
npm -v

Creando tu primera aplicación Next.js

Vamos a crear una nueva aplicación Next.js utilizando create-next-app, que configura automáticamente todo lo necesario.

npx create-next-app@latest mi-primera-app
cd mi-primera-app

npm run dev

Estructura del proyecto

Next.js organiza tu proyecto de manera intuitiva. Vamos a explorar la estructura del proyecto que acabamos de crear.

Creando nuevas páginas

Con Next.js, crear nuevas páginas es tan simple como añadir un archivo page.js dentro del directorio app o sus subdirectorios.

export default function AboutPage() {
  return (
    <div className="container mx-auto py-8">
      <h1 className="text-3xl font-bold mb-4">Acerca de nosotros</h1>
      <p>Esta es la página Acerca de nosotros.</p>
    </div>
  );
}

Navegación entre páginas

Next.js proporciona un componente Link para la navegación entre páginas, que permite la navegación del lado del cliente sin recargar la página completa.

import Link from 'next/link';

export default function HomePage() {
  return (
    <div className="container mx-auto py-8">
      <h1 className="text-3xl font-bold mb-4">Bienvenido a mi primera aplicación Next.js</h1>
      <p className="mb-4">Esta es la página principal.</p>
      <Link href="/about" className="text-blue-600 hover:underline">
        Acerca de nosotros
      </Link>
    </div>
  );
}

Desplegando tu aplicación

Una de las mejores características de Next.js es lo fácil que es desplegar tu aplicación, especialmente con Vercel, la plataforma creada por los mismos creadores de Next.js.

npm run build

Conclusión

¡Felicidades! Has creado y desplegado tu primera aplicación Next.js. Este tutorial cubrió los conceptos básicos, pero Next.js ofrece muchas más características poderosas como las rutas API, optimización de imágenes, internacionalización y más. Te animamos a explorar la documentación oficial y nuestros tutoriales avanzados para profundizar en estos temas.