Tabs shadcn nello stato dell'URL

Risposta breve: tieni il valore di Tabs in un parametro dell'URL, non in useState. Il componente resta controllato, il link diventa condivisibile e il tasto indietro riporta la vista precedente.

Il componente

"use client";

import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

const VIEWS = ["panoramica", "attivita", "fatture"] as const;
type View = (typeof VIEWS)[number];

function parseView(raw: string | null): View {
  return VIEWS.includes(raw as View) ? (raw as View) : "panoramica";
}

export function SettingsTabs() {
  const router = useRouter();
  const pathname = usePathname();
  const params = useSearchParams();
  const view = parseView(params.get("tab"));

  function onValueChange(next: string) {
    const query = new URLSearchParams(params.toString());
    query.set("tab", next);
    router.replace(pathname + "?" + query.toString(), { scroll: false });
  }

  return (
    
      
        {VIEWS.map((item) => (
          
            {item}
          
        ))}
      
      Contenuto della panoramica
      Contenuto delle attività
      Contenuto delle fatture
    
  );
}

Due dettagli rendono il componente stabile: value arriva sempre da parseView, quindi non è mai un valore fuori lista, e onValueChange riscrive solo il parametro tab senza perdere gli altri. Il resto della query sopravvive alla navigazione fra le viste.

Cosa cambia rispetto a useState

• Link condivisibile: incolli l'indirizzo in chat e chi lo apre vede la stessa scheda, non la prima.
• Refresh e cronologia: ricaricare non riporta alla vista iniziale, e il tasto indietro torna alla scheda precedente.
• Primo render corretto: il server disegna già la vista giusta, quindi non c'è il passaggio dalla prima scheda a quella richiesta.

Il valore non valido

Un parametro scritto a mano può contenere qualsiasi cosa. parseView confronta il valore con la lista chiusa e ricade sul valore predefinito: senza questo controllo il componente mostra un pannello vuoto e l'utente non capisce perché.

Il comando

npx shadcn@latest add tabs

Record vivi nel catalogo

Per la parte visiva: la libreria shadcn, il componente expandable-tabs come variante animata, e i blocchi impostazioni che contengono schede già impaginate.

La limitazione

Ogni cambio scheda con replace non lascia traccia nella cronologia, quindi il tasto indietro salta la scheda precedente; con push ogni scheda diventa una voce e il tasto indietro si riempie. Nell'App Router la navigazione passa dal server, quindi su una pagina pesante il cambio scheda costa una richiesta: se i pannelli sono grandi, conviene montarli una volta e nasconderli.

Dove continuare

Il modello di distribuzione dei componenti è in che cos'è shadcn/ui; la struttura delle rotte è in struttura dell'App Router; il confronto con un'altra libreria è in shadcn/ui vs MUI. Per capire quanto costa un passaggio in più al server leggi INP e reattività.