# How to structure a Next.js App Router project in 2026

Where to put pages, components, blocks and utilities in an App Router project. A structure that holds when the project grows, without ceremonial folders.

> Page: https://ui.eneawork.it/blog/struttura-nextjs-app-router-2026
> Markdown: https://ui.eneawork.it/blog/struttura-nextjs-app-router-2026.md

*2026-10-31*

La struttura di un progetto non si giudica dalla profondità delle cartelle. Si giudica da una domanda: dove guardo per capire se un file può essere usato dal server o dal client? L’App Router risponde con i confini, non con le mode.

## Una struttura che regge

app/ (marketing)/ page.tsx pricing/page.tsx (app)/ dashboard/ layout.tsx page.tsx layout.tsx components/ ui/ # primitive: button, input, dialog blocks/ # sezioni: hero, pricing, navbar app/ # composizioni legate al prodotto lib/ utils.ts tokens.css hooks/ public/

`(marketing)` e `(app)` sono route group: non aggiungono segmenti all’URL, ma separano layout e confini. Servono quando le due parti hanno esigenze diverse di navigazione e caching.

## Responsabilità delle cartelle

## Server e client: il confine che conta

Un componente è server per default. `"use client"` va messo il più in basso possibile, sul componente che ha davvero stato o eventi. Metterlo sul layout trasforma l’intero albero in client e perdi il vantaggio del framework.

## Dove entrano i componenti del catalogo

Installa le primitive in `components/ui` e i blocchi in `components/blocks`. Non mescolare le due cose: la primitiva ha una API stabile, il blocco è una composizione che adatti al contesto.

Il catalogo EneUI indicizza 111.985 componenti da 1.472 librerie e 1.556 blocchi (31 ottobre 2026). Installare un blocco non significa adottare una libreria: il codice entra nel tuo repository e segue la tua struttura.

## Gli errori che costano di più

Se non sai dove mettere un file, chiediti se è un URL, una primitiva, una sezione o una feature. La risposta è la cartella.

## FAQ

### Meglio `src/` o la root?

È indifferente per Next.js. Scegli una convenzione e non duplicarla: due alberi di codice sono il vero costo.

### Dove metto i componenti shadcn?

In `components/ui`. Sono primitive, non sezioni: separarle dai blocchi evita import incrociati.

### Le route group sono obbligatorie?

No. Servono quando due aree del sito hanno layout o esigenze di caching diverse. Se non è il caso, non aggiungerle.

### Posso fare fetch in un client component?

Puoi, ma perdi il rendering server e aggiungi stati di caricamento. Preferisci il server component e passa i dati come props.

### Come organizzo i test?

Accanto al componente per unit test, in una cartella `tests/` per i flussi end-to-end. La posizione conta meno della distinzione.