Next.js

v15.x

Framework React con SSR, SSG y App Router

Descripción

Next.js es el framework de elección para todos los frontends de WicSecure. Combina React con renderizado en servidor (SSR), generación estática (SSG) y React Server Components para máximo rendimiento y SEO.

Uso en WicSecure

Usamos Next.js 15 con el App Router. Las páginas públicas se generan estáticamente (SSG) para máxima velocidad. Las rutas de dashboard usan SSR con datos frescos. El modo standalone permite generar imágenes Docker mínimas.

Configuración clave

typescriptconfig

// next.config.ts — configuración estándar WicSecure
import type { NextConfig } from 'next'

const config: NextConfig = {
  output: 'standalone',        // Para Docker
  images: {
    domains: ['cdn.wicsecure.com'],
    formats: ['image/webp', 'image/avif'],
  },
  headers: async () => [
    {
      source: '/(.*)',
      headers: [
        { key: 'X-Frame-Options', value: 'DENY' },
        { key: 'X-Content-Type-Options', value: 'nosniff' },
        { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
      ],
    },
  ],
}
export default config

Ejemplo de uso

typescript

// src/app/api/example/route.ts — API Route con validación
import { NextRequest, NextResponse } from 'next/server'
import { z } from 'zod'

const schema = z.object({
  email: z.string().email(),
  message: z.string().min(10).max(1000),
})

export async function POST(req: NextRequest) {
  const body = await req.json()
  const result = schema.safeParse(body)

  if (!result.success) {
    return NextResponse.json(
      { error: result.error.flatten() },
      { status: 400 }
    )
  }

  // Lógica de negocio
  return NextResponse.json({ ok: true })
}

Características clave

App Router con React Server Components
SSR, SSG, ISR y Streaming integrado
Image Optimization automática (WebP, AVIF)
Middleware en el Edge para auth y A/B testing
Output standalone para Docker mínimo

Referencias

Sitio oficial de Next.js