Introducción a Next.js 14

Requisitos previos

Antes de comenzar, asegúrate de tener instalados los siguientes elementos en tu equipo. Estos son esenciales para seguir el tutorial sin problemas.

• Node.js 18 o superior instalado en tu sistema
• Un editor de código (recomendamos Visual Studio Code)
• Conocimientos básicos de JavaScript y React
• Terminal o línea de comandos
• Git instalado para control de versiones

¿Qué es Next.js?

Next.js es un framework de React creado por Vercel que facilita la construcción de aplicaciones web de alto rendimiento. A diferencia de React puro, Next.js incluye renderizado del lado del servidor, generación de sitios estáticos y un sistema de rutas basado en archivos.

La versión 14 introduce el App Router como la forma recomendada de construir aplicaciones, junto con Server Components que reducen drásticamente la cantidad de JavaScript enviado al navegador del usuario.

• Server-Side Rendering (SSR): Las páginas se renderizan en el servidor, mejorando el SEO y velocidad
• Static Site Generation (SSG): Genera páginas estáticas en tiempo de build para máximo rendimiento
• App Router: Nuevo sistema de rutas basado en carpetas que simplifica la estructura
• Server Components: Componentes que se ejecutan en el servidor, reduciendo el bundle del cliente
• API Routes: Crea endpoints de API directamente dentro de tu proyecto

Creando tu primer proyecto

Crear un nuevo proyecto con Next.js 14 es muy sencillo gracias a la herramienta de línea de comandos create-next-app. Esta herramienta configura todo automáticamente, incluyendo TypeScript, ESLint y Tailwind CSS.

1. 1Abre tu terminal y ejecuta el comando: npx create-next-app@latest mi-proyecto
2. 2Selecciona las opciones recomendadas: TypeScript (Sí), ESLint (Sí), Tailwind CSS (Sí), App Router (Sí)
3. 3Espera a que se instalen las dependencias automáticamente
4. 4Entra al directorio del proyecto: cd mi-proyecto
5. 5Inicia el servidor de desarrollo con: npm run dev
6. 6Abre tu navegador en http://localhost:3000 para ver tu aplicación

npx create-next-app@latest mi-proyecto
cd mi-proyecto
npm run dev

Estructura del proyecto

Una vez creado el proyecto, encontrarás una estructura de carpetas organizada y lista para trabajar. Entender esta estructura es fundamental para desarrollar eficientemente con Next.js 14.

mi-proyecto/
├── app/
│   ├── layout.tsx      # Layout principal de la aplicación
│   ├── page.tsx        # Página de inicio (ruta /)
│   ├── globals.css     # Estilos globales
│   └── favicon.ico     # Icono del sitio
├── public/             # Archivos estáticos (imágenes, fuentes)
├── next.config.js      # Configuración de Next.js
├── package.json        # Dependencias del proyecto
├── tailwind.config.ts  # Configuración de Tailwind CSS
└── tsconfig.json       # Configuración de TypeScript

La carpeta app/ es donde vivirá toda la lógica de tu aplicación. Cada carpeta dentro de app/ puede contener un archivo page.tsx que automáticamente se convierte en una ruta accesible.

Creando páginas y rutas

Con el App Router de Next.js 14, crear una nueva página es tan simple como crear un archivo page.tsx dentro de una carpeta en app/. El nombre de la carpeta define la ruta URL automáticamente.

• app/page.tsx se convierte en la ruta /
• app/about/page.tsx se convierte en /about
• app/blog/page.tsx se convierte en /blog
• app/blog/[slug]/page.tsx crea rutas dinámicas como /blog/mi-articulo
• app/dashboard/settings/page.tsx crea rutas anidadas /dashboard/settings

// app/about/page.tsx
export default function AboutPage() {
  return (
    <div>
      <h1>Sobre Nosotros</h1>
      <p>Bienvenido a nuestra página.</p>
    </div>
  )
}

Obteniendo datos del servidor

Una de las ventajas más poderosas de Next.js 14 es que los componentes son Server Components por defecto. Esto significa que puedes hacer peticiones a APIs y bases de datos directamente en tus componentes sin necesidad de useEffect o estados de carga.

// app/posts/page.tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts')
  return res.json()
}

export default async function PostsPage() {
  const posts = await getPosts()

  return (
    <div>
      <h1>Blog</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  )
}

Los datos se obtienen en el servidor antes de enviar el HTML al navegador, lo que resulta en tiempos de carga más rápidos y mejor SEO ya que el contenido está disponible inmediatamente.

Desplegando tu aplicación

Desplegar tu aplicación Next.js en producción es sorprendentemente fácil, especialmente si utilizas Vercel, la plataforma creada por los mismos desarrolladores de Next.js.

1. 1Sube tu proyecto a un repositorio en GitHub
2. 2Crea una cuenta gratuita en vercel.com
3. 3Conecta tu repositorio de GitHub con Vercel
4. 4Vercel detectará automáticamente que es un proyecto Next.js
5. 5Haz clic en Deploy y espera unos minutos
6. 6Tu aplicación estará en línea con un dominio .vercel.app gratuito

Vercel se encarga automáticamente de optimizar tu aplicación, configurar el CDN global, los certificados SSL y los despliegues automáticos cada vez que haces push a tu repositorio.

Conclusión

Has aprendido los fundamentos de Next.js 14, desde la instalación y configuración inicial hasta la creación de páginas, obtención de datos y despliegue en producción. Estos conceptos son la base sobre la que construirás aplicaciones web modernas y escalables.

Te recomendamos explorar la documentación oficial de Next.js para profundizar en temas avanzados como middleware, internacionalización, optimización de imágenes y autenticación. El ecosistema de Next.js es vasto y hay mucho más por descubrir.