Aprendiendo Next.js

Next.js se ha convertido en mi framework favorito para construir aplicaciones web. Aquí comparto las lecciones más importantes que aprendí al empezar.

Server Components vs Client Components

La distinción más importante en el App Router es entender cuándo usar cada tipo:

Server Components (por defecto):

• Se renderizan en el servidor
• Pueden acceder directamente a la base de datos o sistema de archivos
• No pueden usar hooks ni event handlers

Client Components (con "use client"):

• Se renderizan en el cliente
• Pueden usar useState, useEffect, etc.
• Necesarios para interactividad

// Server Component (por defecto)
export default async function PostList() {
  const posts = await getPosts(); // acceso directo al fs
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>{post.title}</li>
      ))}
    </ul>
  );
}

// Client Component
"use client";
 
import { useState } from "react";
 
export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Clicks: {count}</button>;
}

Generación estática con generateStaticParams

Para blogs y sitios de contenido, puedes pre-generar todas las páginas en build time:

export async function generateStaticParams() {
  const posts = getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

Esto genera HTML estático para cada post, resultando en tiempos de carga instantáneos.

Metadata dinámica

Cada página puede exportar su propia metadata para SEO:

export async function generateMetadata({ params }) {
  const post = getPostBySlug(params.slug);
  return {
    title: post.meta.title,
    description: post.meta.excerpt,
  };
}

Conclusión

Next.js con App Router tiene una curva de aprendizaje, pero una vez que entiendes los conceptos fundamentales, el desarrollo es muy productivo. La clave es pensar en servidor primero y solo mover al cliente lo que realmente necesita interactividad.