Next.js App Router

src/app/
├── layout.tsx                ← Layout raíz (html, body, providers)
├── page.tsx                  ← / → redirige a /dashboard o /login
│
├── (auth)/                   ← Route group — no agrega segmento a URL
│   ├── login/
│   │   └── page.tsx          ← /login
│   └── layout.tsx            ← Layout centrado para pantallas de auth
│
└── dashboard/
    ├── layout.tsx            ← Layout del dashboard (sidebar + navbar)
    ├── page.tsx              ← /dashboard
    ├── guitarras/
    │   ├── page.tsx          ← /dashboard/guitarras
    │   └── [id]/
    │       └── page.tsx      ← /dashboard/guitarras/[id]
    ├── perfil/
    │   └── page.tsx          ← /dashboard/perfil
    └── loading.tsx           ← Fallback Suspense para todo /dashboard

// SERVER COMPONENT (por defecto, sin 'use client')
// ✅ Puede: fetch directo, leer BD, usar env vars del servidor
// ✗ No puede: useState, useEffect, event handlers, localStorage

// app/dashboard/guitarras/page.tsx
import { getGuitarras } from '@/lib/api';

export default async function GuitarrasPage() {
  // fetch sin useEffect ni useState: ocurre en el servidor
  const guitarras = await getGuitarras();

  return (
    <div>
      <h1>Catálogo de Guitarras</h1>
      {/* Tabla es un Server Component también */}
      <GuitarrasTable items={guitarras} />
    </div>
  );
}

'use client'; // CLIENT COMPONENT
// ✅ Puede: useState, useEffect, event handlers, localStorage
// ✗ No puede: fetch directo al servidor (usa API routes)

// components/guitar/GuitarFilter.tsx
import { useState } from 'react';

interface GuitarFilterProps {
  onFilter: (tipo: string) => void;
}

export function GuitarFilter({ onFilter }: GuitarFilterProps) {
  const [tipo, setTipo] = useState('');

  return (
    <select
      value={tipo}
      onChange={(e) => {
        setTipo(e.target.value);
        onFilter(e.target.value);
      }}
    >
      <option value="">Todos</option>
      <option value="electrica">Eléctrica</option>
      <option value="acustica">Acústica</option>
    </select>
  );
}

// app/dashboard/layout.tsx — Layout compartido por todo /dashboard
import { Sidebar } from '@/components/layout/Sidebar';
import { Navbar } from '@/components/layout/Navbar';

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex h-screen">
      <Sidebar />
      <div className="flex flex-col flex-1">
        <Navbar />
        <main className="flex-1 overflow-y-auto p-6">{children}</main>
      </div>
    </div>
  );
}

// app/(auth)/layout.tsx — Layout para login/register
export default function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-950">
      {children}
    </div>
  );
}

// app/dashboard/guitarras/[id]/page.tsx
// En Next.js 15 los params son una Promise — deben awaitearse

interface PageProps {
  params: Promise<{ id: string }>;
}

export default async function GuitarDetailPage({ params }: PageProps) {
  const { id } = await params; // ← await obligatorio en Next.js 15
  const guitarra = await getGuitarraById(id);

  if (!guitarra) {
    notFound(); // → muestra app/not-found.tsx
  }

  return (
    <div>
      <h1>{guitarra.nombre}</h1>
      <p>Tipo: {guitarra.tipo}</p>
    </div>
  );
}

// Metadata dinámica (para SEO)
export async function generateMetadata({ params }: PageProps) {
  const { id } = await params;
  const guitarra = await getGuitarraById(id);
  return { title: guitarra?.nombre ?? 'Guitarra no encontrada' };
}

// src/middleware.ts — se ejecuta antes de cada petición
import { NextRequest, NextResponse } from 'next/server';

const PUBLIC_ROUTES = ['/login', '/api/auth/login'];

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  // Permite rutas públicas y assets sin verificación
  if (PUBLIC_ROUTES.some((r) => pathname.startsWith(r))) {
    return NextResponse.next();
  }

  const token = request.cookies.get('accessToken')?.value;

  if (!token) {
    const loginUrl = new URL('/login', request.url);
    loginUrl.searchParams.set('redirect', pathname);
    return NextResponse.redirect(loginUrl);
  }

  return NextResponse.next();
}

export const config = {
  // Aplica middleware solo a rutas de la app, no a archivos estáticos
  matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.png$).*)'],
};

// lib/api.ts — cliente HTTP centralizado
const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000';

export async function getGuitarras(): Promise<Guitarra[]> {
  const res = await fetch(`${API_BASE}/api/guitarras`, {
    cache: 'no-store', // SSR: siempre fresco
  });
  if (!res.ok) throw new Error('Error al obtener guitarras');
  return res.json();
}