Comenzando con Next.js 15: Guía Completa

Next.js 15 es la última versión de este poderoso framework que te permite construir aplicaciones web modernas con experiencias de usuario óptimas. En este artículo, te guiaremos a través de los pasos esenciales para comenzar con Next.js 15, ya seas un principiante o un desarrollador experimentado.

¿Por qué elegir Next.js 15?

Next.js es conocido por su rico ecosistema y flexibilidad. Estos son algunos aspectos destacados de la versión 15:

• Componentes del Servidor: Optimiza el rendimiento con renderizado del lado del servidor.
• App Router: Gestión de rutas más intuitiva y poderosa.
• Renderizado en Streaming: Renderizado de páginas más rápido y fluido.
• Integración Simplificada con TypeScript, Tailwind CSS y otras herramientas modernas.

Requisitos previos

Antes de comenzar, asegúrate de tener lo siguiente:

1. Node.js: Instala la última versión LTS.
2. npm o Yarn: Incluido con Node.js; también puedes usar pnpm si lo prefieres.
3. Un editor de código: Se recomienda encarecidamente Visual Studio Code por sus extensiones.

Crea tu proyecto con create-next-app

La forma más fácil de comenzar con Next.js 15 es usando el comando create-next-app. Así es como se hace:

Paso 1: Ejecuta el Comando

En tu terminal, ejecuta el siguiente comando:

npx create-next-app@latest my-next-app

Si prefieres Yarn o pnpm, usa estos comandos:

yarn create next-app my-next-app

pnpm create next-app my-next-app

Paso 2: Configura tu Proyecto

Durante el proceso de configuración, se te pedirá que respondas a varias preguntas:

• TypeScript: Actívalo para un tipado robusto.
• ESLint: Agrega ESLint para mantener la calidad del código.
• Tailwind CSS: Integra Tailwind para un estilizado rápido y eficiente.
• Directorio Src: Organiza tu código con una carpeta src.
• App Router: Activa esta opción para aprovechar completamente las funciones modernas de Next.js 15.

Una vez confirmadas tus elecciones, las dependencias se instalarán automáticamente.

Inicia el Servidor de Desarrollo

Una vez que se crea tu proyecto, navega a la carpeta del proyecto y inicia el servidor:

cd my-next-app
npm run dev

Verás una URL, generalmente http://localhost:3000, para acceder a tu aplicación.

Estructura Básica del Proyecto en Next.js

Así es como se ve la estructura inicial:

my-next-app/
├── src/
│   ├── app/
│   │   ├── page.js
│   │   └── layout.js
│   ├── styles/
│   └── components/
├── public/
└── package.json

• app/: Contiene tus rutas y lógica de renderizado.
• styles/: Almacena tus archivos CSS globales.
• components/: Directorio para componentes reutilizables.
• public/: Carpeta para archivos estáticos.

Agregar Páginas

Con App Router, crear una página es sencillo. Agrega un archivo page.js en una subcarpeta de app:

mkdir src/app/about

Agrega un archivo page.js:

export default function AboutPage() {
  return (
    <h1>Sobre Nosotros</h1>
  );
}

Visita http://localhost:3000/about para ver tu nueva página.

Agregar Estilos con Tailwind CSS

Si activaste Tailwind CSS durante la configuración, puedes comenzar a estilizar directamente en tus componentes:

export default function HomePage() {
  return (
    <div className="text-center text-blue-500">
      <h1>¡Bienvenido a Next.js 15!</h1>
    </div>
  );
}

Despliega en Vercel

Desplegar tu aplicación es súper fácil con Vercel, la plataforma detrás de Next.js. Así es como se hace:

1. Inicia sesión en Vercel.
2. Crea un nuevo proyecto y conecta tu repositorio Git.
3. Vercel detectará automáticamente tu proyecto Next.js y configurará el despliegue.

Una vez desplegado, obtendrás una URL pública para compartir tu aplicación.

Conclusión

Ahora tienes las bases para comenzar con Next.js 15. Este framework ofrece una experiencia de desarrollo fluida y un rendimiento increíble para tus aplicaciones web. Tómate el tiempo para explorar funciones avanzadas como Server Actions, RSC y renderizado en streaming.

¿Listo para construir aplicaciones modernas y de alto rendimiento? ¡Comienza con Next.js 15 hoy mismo!