InvoiceDash: Gestión moderna de facturas con Next.js 14

15 de noviembre de 2024

• Server Components: cero JavaScript del lado del cliente para la mayoría de los elementos de la UI
• Streaming: renderizado progresivo con Suspense boundaries
• Partial Prerendering: shell estático con contenido dinámico
• Parallel Routes: carga simultánea de diferentes secciones
• Intercepting Routes: vistas modales sin interrumpir la navegación

• Seguimiento de ingresos en tiempo real y proyecciones financieras
• Monitoreo del procesamiento de pagos con alertas de detección de anomalías
• Historial de pagos por cliente y visualización del flujo de transacciones
• Filtros por rango de fechas personalizado con reportes financieros instantáneos

• Layout fluido que se adapta a cualquier tamaño de pantalla
• Flujo de creación de facturas optimizado para móviles
• Elementos de interfaz pensados para uso táctil
• Modo oscuro/claro con detección de la preferencia del sistema

• Prefetching de rutas para navegación instantánea
• Optimización de imágenes con el componente Image de Next.js
• Server Actions para el envío de formularios
• Deploy en edge runtime para performance global

• Next.js 14: aprovechando el App Router más reciente, Server Components y optimizaciones de renderizado
• React Server Components: para reducir el tamaño del bundle y mejorar la performance
• Tailwind CSS: para estilos responsive con enfoque utility-first
• Drizzle ORM: consultas a base de datos type-safe con PostgreSQL
• Next Auth: autenticación segura con múltiples proveedores
• Vercel: deploy en el edge para acceso global de baja latencia

// Dashboard layout with streaming components
export default function Dashboard() {
  return (
    <main>
      <header>
        <h1>InvoiceDash</h1>
        <UserNav />
      </header>
      
      {/* Static shell loads instantly */}
      <DashboardShell>
        {/* Data streams in progressively */}
        <Suspense fallback={<RevenueChartSkeleton />}>
          <RevenueChart />
        </Suspense>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Suspense fallback={<InvoiceListSkeleton />}>
            <LatestInvoices />
          </Suspense>
          
          <Suspense fallback={<ClientsSkeleton />}>
            <TopClients />
          </Suspense>
        </div>
      </DashboardShell>
    </main>
  );
}

// Static parts render at build time
export const dynamic = 'force-static';

// Dynamic parts use a Suspense boundary
export default function InvoiceList() {
  return (
    <>
      <StaticFilters />  {/* Prerendered */}
      <Suspense fallback={<InvoicesTableSkeleton />}>
        <InvoicesTable />  {/* Dynamically rendered */}
      </Suspense>
    </>
  );
}

// app/@stats/page.tsx and app/@invoices/page.tsx load in parallel
// within app/layout.tsx
export default function Layout({ stats, invoices, children }) {
  return (
    <div className="dashboard-layout">
      <aside>{stats}</aside>
      <main>{children}</main>
      <section>{invoices}</section>
    </div>
  );
}

¿Quieres este nivel de performance en tu proyecto? Hablemos →