← Blog
4 novembre 20251 min di lettura

Come organizzo un progetto Next.js

La struttura di cartelle che uso nei miei progetti Next.js, costruita per tentativi ed errori nel tempo.

Nei primi progetti buttavo tutto dentro app/ e andava bene finché il progetto restava piccolo. Dopo qualche settimana però non ricordavo più dove avevo messo niente. Ho iniziato a separare le cose in modo più rigido e da allora non ho più cambiato molto.

Adesso uso sempre questa struttura: app/ solo per le route, quindi solo page.tsx e layout.tsx. Componenti in components/, divisi tra ui/ per le cose atomiche tipo Badge e Button, e sections/ per i blocchi più grandi tipo Hero o Footer. La logica la metto in lib/, i dati statici o le funzioni di fetch in data/.

Per i componenti Server e Client ho smesso di pensarci troppo: parto sempre da Server Component e aggiungo 'use client' solo quando ho bisogno di useState, useEffect o eventi browser. Di solito sono molti meno di quanti pensassi.

Una cosa che ho imparato a evitare: i barrel file (index.ts ovunque) sembrano comodi ma dopo un po' non capisci più da dove arriva un import. Preferisco i path espliciti, anche se sono più lunghi.