Crea tu primera aplicación en Next.js 13

by Lara Alonso 12/06/2023

Lo primero, ¿qué es Next.js?

Next.js es un framework de React utilizado para el desarrollo de aplicaciones web del lado del servidor (SSR) y del lado del cliente (CSR). Proporciona una capa adicional de abstracción sobre React que permite crear aplicaciones web rápidas y escalables con facilidad.

Next.js combina características de enrutamiento, renderizado del lado del servidor, generación de páginas estáticas y funcionalidades de desarrollo en una sola herramienta. Algunas de las características y ventajas clave de Next.js son las siguientes:

Renderizado híbrido: Next.js permite el renderizado del lado del servidor y del lado del cliente, lo que significa que puede generar y enviar páginas completamente renderizadas desde el servidor para una carga inicial rápida, y luego continuar la navegación y la interacción del usuario en el cliente.

Generación de páginas estáticas: Next.js ofrece la capacidad de generar páginas estáticas durante la compilación, lo que significa que se pueden servir archivos HTML pregenerados en lugar de generar contenido dinámico en cada solicitud. Esto mejora significativamente el rendimiento y la velocidad de carga de la página.

Enrutamiento sencillo: Next.js proporciona un sistema de enrutamiento sencillo y basado en archivos que permite definir rutas fácilmente y manejar la navegación entre páginas de manera intuitiva.

Soporte para API y funciones sin servidor: Next.js permite crear y acceder a API y funciones sin servidor de forma nativa, lo que facilita la creación de servicios y endpoints personalizados.

Optimización automática: Next.js realiza optimizaciones automáticas como el precargado de rutas, el splitting de código y la carga de imágenes optimizadas, lo que ayuda a mejorar el rendimiento y la experiencia del usuario.

Next.js es utilizado en una amplia gama de casos de uso, incluyendo el desarrollo de aplicaciones web complejas, tiendas en línea, blogs, sitios de noticias y mucho más. Es especialmente útil cuando se requiere un alto rendimiento, una excelente experiencia de usuario y una fácil escalabilidad.

Como empezar con Next.js 13

Lo primero decirte que tienes toda la documentación oficial en https://nextjs.org/docs/getting-started/installation

Primero necesitas tener instalado Node.js en una versión 16.8 o superior, aquí te dejo un enlace por si aún no lo tienes https://nodejs.org/en

A continuación puedes ejecutar la instalación automática con npx create-next-app@latest y te instalará la última versión de Nextjs. Te hará una serie de preguntas

What is your project named? my-app (nombre que le vas a poner a tu proyecto)

Would you like to use TypeScript with this project? No / Yes (si quieres trabajar en TypeScript o JavaScript)

Would you like to use ESLint with this project? No / Yes (si quieres utilizar ESLint, mi recomendación es que siempre si, te ayuda a detectar errores de código.)

Would you like to use Tailwind CSS with this project? No / Yes (TailwindCSS ayuda en la maquetación web, pero puedes usar Boostrapt u otros.)

Would you like to use `src/` directory with this project? No / Yes (aquí debes decidir si usas las carpetas como en las versiones 12 o anteriores que sería con /src o prefieres utilizar la nueva carpeta /app para las rutas.)

Use App Router (recommended)? No / Yes

Would you like to customize the default import alias? No / Yes

Tras estas preguntas comenzará la instalación y sólo necesitarás acceder al nuevo directorio cd nombreProyecto cd nombredetuproyecto en tu terminal.

Para ejecutar tu aplicación utilizarás npm run dev . Aparecerá un texto como:

nombreProyecto@0.1.0 dev

next dev

ready started server on 0.0.0.0:3000, url: http://localhost:3000

Entrando en el link de http://localhost:3000, (el número de puerto puede que no sea 3000) podrás acceder a tu primera aplicación de Next.js

Si has llegado hasta aquí y quieres conocer algunas novedades de Next.js 13 puedes ir a mi post Como crear rutas en Next.js 13

Lara Alonso @aiadevop

Soy desarrolladora de software en España. Especializada en frontend, creo experiencias web y aplicaciones. Explora mi portfolio y descubre mis proyectos.

¡Tu visión mi código!