3 min de lecturaPágina Web Plus

Desarrollo web moderno con Next.js 15: App Router, accesibilidad y rendimiento

Cómo construimos sitios web rápidos, accesibles y escalables en Página Web Plus: App Router de Next.js 15, React Server Components, i18n con URL routing y un enfoque accessibility-first.

Next.jsReactaccesibilidadrendimientodesarrollo

En Página Web Plus desarrollamos en Next.js 15 con App Router porque permite hacer en un solo stack las tres cosas que más importan a un sitio profesional: rendimiento real, accesibilidad por defecto y SEO sólido. Esta es la receta concreta que aplicamos a nuestros proyectos.

App Router + React Server Components: server-first

El App Router cambia la regla por defecto: los componentes son de servidor salvo que decidas lo contrario. Esto tiene dos consecuencias enormes:

  • El HTML inicial llega al navegador con el contenido renderizado. Google ve la copia sin ejecutar JS.
  • El JavaScript del cliente baja porque sólo se hidratan los componentes interactivos.

La regla práctica: marca 'use client' sólo cuando uses useState, useEffect, event handlers o APIs del navegador. Todo lo demás (hero, secciones de copy, footer, listados) vive en el servidor. Diseña tus páginas como islas de interactividad sobre HTML estático.

i18n con URL routing y next-intl

Tener /es/... y /en/... reales — no un toggle en cliente que cambia el texto — es crítico para SEO multilingüe. Con next-intl lo conseguimos en tres piezas:

  1. middleware.ts detecta el idioma y reescribe URLs.
  2. src/app/[locale]/layout.tsx carga los mensajes del servidor y los pasa a NextIntlClientProvider.
  3. Componente Link propio que mantiene el segmento de locale al navegar.

El sitemap.xml emite entradas bilingües con hreflang por idioma; cada página declara alternates.languages para que Google asocie las dos versiones.

Imágenes y fuentes optimizadas

Dos optimizaciones que siempre activamos:

  • next/image con formatos modernos: formats: ['image/avif', 'image/webp'], deviceSizes realistas y minimumCacheTTL: 31536000 (un año). La imagen sobre la línea de flotación lleva priority para mejorar LCP.
  • next/font con display: 'swap' y preload: true para la fuente principal. Evita FOIT y CLS por sustitución de tipografía.

Accesibilidad por defecto

Una web nueva debería nacer accesible, no remediarse después. Lo que aplicamos desde el día 1:

  • HTML semántico: <main>, <nav>, <article>, <header>, <footer>. ARIA sólo cuando HTML no llega.
  • Encabezados jerárquicos con un único h1 por página.
  • Contraste validado con la paleta de marca antes de aprobar el diseño.
  • Focus visible en todos los elementos interactivos (suele ser un anillo outline con offset, no outline: none).
  • Skip link al <main> para usuarios de teclado.
  • Atributo lang en <html> reflejando la locale activa.
  • Formularios con <label for> o aria-labelledby siempre asociadas al input.

Si quieres saber cuál es el estado actual de tu sitio, lánzale nuestro escáner gratuito.

Schema markup automatizado

Centralizamos todo el JSON-LD en un módulo (lib/jsonLd.ts) que exporta funciones para cada tipo: Organization, WebSite, Service, BreadcrumbList, BlogPosting, FAQPage. Cada layout o página inyecta sólo los schemas relevantes. Esto evita duplicar copy y mantiene el grafo de entidades coherente con @id cruzados.

El blog que estás leyendo, por ejemplo, sirve BlogPosting + BreadcrumbList por post, y Organization + WebSite a nivel de sitio. Schema bien hecho es de las palancas con mejor relación esfuerzo/beneficio en SEO técnico.

Verificación en cada despliegue

Antes de hacer npm run build final ejecutamos:

  • TypeScript strict: sin any salvo casos justificados.
  • ESLint: reglas next/core-web-vitals activadas.
  • Lighthouse o WebPageTest sobre la home y dos páginas internas — objetivo ≥ 95 en Performance, Accessibility, Best Practices y SEO.
  • Rich Results Test con la URL real para confirmar el schema.
  • Validador de hreflang una vez en producción.

¿Construir o migrar?

Si estás empezando un proyecto, Next.js 15 + App Router te da SSR/SSG/ISR, i18n nativo, optimización de imágenes y un ecosistema sólido sin tener que pegar piezas. Si tienes un sitio en WordPress o un stack más antiguo, la migración suele recuperar 30-60 puntos de PageSpeed y resolver el grueso de problemas de accesibilidad técnica.

¿Quieres una estimación para un proyecto nuevo o una migración? Hablemos y vemos los detalles.