Routing Avanzato e Rendering delle Pagine in Next.js

Introduzione

Questo capitolo approfondisce i pattern avanzati di routing e rendering delle pagine in Next.js. Costruisce sulle conoscenze acquisite nel capitolo degli essentials, esplorando funzionalità più sofisticate come parallel routes, catch-all routes, intercepting routes, route groups, route handlers e middleware.

Queste funzionalità permettono di costruire applicazioni più complesse con pattern di navigazione avanzati, gestione di route multiple simultanee e controllo granulare sul comportamento delle route.

Route Dinamiche Annidate

Next.js supporta route dinamiche annidate all’interno di altre route dinamiche. Questo permette di creare strutture di navigazione gerarchiche complesse.

Esempio: News con Dettagli

1
import { notFound } from 'next/navigation'
2
import { DUMMY_NEWS } from '@/dummy-news'
3

4
export default function NewsDetailPage({ params }) {
5
  const newsItem = DUMMY_NEWS.find(item => item.slug === params.slug)
6

7
  if (!newsItem) {
8
    notFound()
9
  }
10

11
  return (
12
    <article className="news-article">
13
      <header>
14
        <img src={`/images/news/${newsItem.image}`} alt={newsItem.title} />
15
        <h1>{newsItem.title}</h1>
16
        <time dateTime={newsItem.date}>{newsItem.date}</time>
17
      </header>
18
      <p>{newsItem.content}</p>
19
    </article>
20
  )
21
}

Le route annidate ereditano i parametri della route padre. Una route dinamica annidata può accedere ai parametri della route dinamica che la contiene.

Parallel Routes

Le parallel routes permettono di renderizzare il contenuto di due o più route separate simultaneamente sulla stessa pagina. Questo pattern è utile quando si vuole mostrare contenuto indipendente in sezioni diverse della stessa pagina.

Configurazione delle Parallel Routes

Le parallel routes vengono create utilizzando cartelle che iniziano con il simbolo @:

1
app/
2
  archive/
3
    @archive/
4
      page.js
5
    @latest/
6
      page.js
7
    layout.js

1
export default function ArchiveLayout({ children, archive, latest }) {
2
  return (
3
    <div>
4
      <h1>News Archive</h1>
5
      <section id="archive-filter">
6
        {archive}
7
      </section>
8
      <section id="archive-latest">
9
        {latest}
10
      </section>
11
    </div>
12
  )
13
}

Il layout riceve automaticamente props con nomi corrispondenti alle cartelle parallel route (senza il simbolo @).

Default per Parallel Routes

Quando una parallel route non ha una pagina corrispondente per un determinato path, è necessario fornire un file default.js:

1
// app/archive/@latest/default.js
2
export default function LatestDefault() {
3
  return (
4
    <>
5
      <h2>Latest News</h2>
6
      <NewsList news={getLatestNews()} />
7
    </>
8
  )
9
}

Questo file viene utilizzato quando la parallel route non ha una pagina più specifica per il path corrente.

Catch-All Routes

Le catch-all routes permettono di catturare tutti i segmenti di path dopo una determinata route, indipendentemente dal loro numero. Questo pattern è utile per creare pagine che gestiscono percorsi dinamici di lunghezza variabile.

Sintassi delle Catch-All Routes

Le catch-all routes utilizzano tre punti (...) prima del nome del parametro:

1
app/
2
  archive/
3
    [...filter]/
4
      page.js

1
export default function FilteredArchivePage({ params }) {
2
  const filter = params.filter // Array di stringhe
3

4
  const selectedYear = filter?.[0]
5
  const selectedMonth = filter?.[1]
6

7
  let news = undefined
8

9
  if (selectedYear && !selectedMonth) {
10
    news = getNewsForYear(selectedYear)
11
  } else if (selectedYear && selectedMonth) {
12
    news = getNewsForYearAndMonth(selectedYear, selectedMonth)
13
  }
14

15
  return (
16
    <>
17
      <header id="archive-header">
18
        <nav>
19
          <ul>
20
            {links.map(link => (
21
              <li key={link}>
22
                <Link href={selectedYear
23
                  ? `/archive/${selectedYear}/${link}`
24
                  : `/archive/${link}`
25
                }>
26
                  {link}
27
                </Link>
28
              </li>
29
            ))}
30
          </ul>
31
        </nav>
32
      </header>
33
      {news && news.length > 0 ? (
34
        <NewsList news={news} />
35
      ) : (
36
        <p>No news found for the selected period.</p>
37
      )}
38
    </>
39
  )
40
}

Il parametro filter sarà un array contenente tutti i segmenti di path catturati. Se non ci sono segmenti, sarà undefined.

Validazione nelle Catch-All Routes

È importante validare i valori catturati per evitare errori:

1
export default function FilteredArchivePage({ params }) {
2
  const filter = params.filter
3
  const selectedYear = filter?.[0]
4
  const selectedMonth = filter?.[1]
5

6
  const availableYears = getAvailableNewsYears()
7
  const availableMonths = selectedYear
8
    ? getAvailableNewsMonths(selectedYear)
9
    : []
10

11
  if (
12
    (selectedYear && !availableYears.includes(Number(selectedYear))) ||
13
    (selectedMonth && !availableMonths.includes(Number(selectedMonth)))
14
  ) {
15
    throw new Error('Invalid filter')
16
  }
17

18
  // ... resto del codice
19
}

Intercepting Routes

Le intercepting routes permettono di mostrare una pagina diversa a seconda di come si arriva a quella route. Se si naviga internamente (tramite link), viene mostrata una versione “intercettata” della pagina. Se si arriva tramite reload o URL diretto, viene mostrata la versione standard.

Configurazione delle Intercepting Routes

Le intercepting routes utilizzano parentesi tonde () nel nome della cartella:

1
app/
2
  news/
3
    [slug]/
4
      (.)image/
5
        page.js
6
      image/
7
        page.js
8
      page.js

Il pattern (.)image indica che questa route intercetta la route image nella stessa cartella. Il punto . rappresenta il percorso relativo alla route da intercettare.

1
// app/news/[slug]/(.)image/page.js - Route intercettata
2
'use client'
3

4
import { useRouter } from 'next/navigation'
5

6
export default function InterceptedImagePage({ params }) {
7
  const router = useRouter()
8
  const newsItem = DUMMY_NEWS.find(item => item.slug === params.slug)
9

10
  if (!newsItem) {
11
    notFound()
12
  }
13

14
  return (
15
    <>
16
      <div
17
        className="modal-backdrop"
18
        onClick={() => router.back()}
19
      >
20
        <dialog className="modal" open>
21
          <img
22
            src={`/images/news/${newsItem.image}`}
23
            alt={newsItem.title}
24
          />
25
        </dialog>
26
      </div>
27
    </>
28
  )
29
}

1
// app/news/[slug]/image/page.js - Route standard
2
export default function ImagePage({ params }) {
3
  const newsItem = DUMMY_NEWS.find(item => item.slug === params.slug)
4

5
  if (!newsItem) {
6
    notFound()
7
  }
8

9
  return (
10
    <div className="fullscreen-image">
11
      <img
12
        src={`/images/news/${newsItem.image}`}
13
        alt={newsItem.title}
14
      />
15
    </div>
16
  )
17
}

Intercepting Routes con Parallel Routes

Le intercepting routes possono essere combinate con parallel routes per creare modali che appaiono sopra il contenuto esistente:

1
app/
2
  news/
3
    [slug]/
4
      @modal/
5
        (.)image/
6
          page.js
7
        default.js
8
      layout.js
9
      page.js

1
export default function NewsDetailLayout({ children, modal }) {
2
  return (
3
    <>
4
      {modal}
5
      {children}
6
    </>
7
  )
8
}

1
// app/news/[slug]/@modal/default.js
2
export default function ModalDefault() {
3
  return null
4
}

Questo pattern permette di mostrare un’immagine in modal quando si clicca su di essa, mantenendo la pagina di dettaglio visibile in background.

Route Groups

I route groups permettono di organizzare le route in gruppi logici senza influenzare la struttura URL. Questo è utile quando si vogliono applicare layout diversi a diverse sezioni dell’applicazione.

Configurazione dei Route Groups

I route groups utilizzano parentesi tonde () nel nome della cartella:

1
app/
2
  (content)/
3
    layout.js
4
    news/
5
      page.js
6
    archive/
7
      page.js
8
  (marketing)/
9
    layout.js
10
    page.js

Le cartelle con parentesi non aggiungono segmenti all’URL. /news rimane /news, non diventa /(content)/news.

1
// app/(content)/layout.js
2
import MainHeader from '@/components/main-header'
3

4
export default function ContentLayout({ children }) {
5
  return (
6
    <div id="page">
7
      <MainHeader />
8
      {children}
9
    </div>
10
  )
11
}

1
// app/(marketing)/layout.js
2
export default function MarketingLayout({ children }) {
3
  return (
4
    <main>
5
      {children}
6
    </main>
7
  )
8
}

Ogni route group può avere il proprio layout, permettendo di avere navigazione diversa, stili diversi o struttura diversa per diverse sezioni dell’applicazione.

Nota Importante sui Route Groups

Quando si utilizzano route groups, tutti i file speciali come not-found.js devono essere all’interno di un route group, non alla radice della cartella app:

1
app/
2
  (content)/
3
    not-found.js
4
    layout.js
5
    news/
6
      page.js

Route Handlers

I Route Handlers permettono di creare endpoint API direttamente nell’applicazione Next.js senza necessità di un server API separato. Sono utili per gestire richieste HTTP che non restituiscono pagine HTML.

Creazione di Route Handlers

I Route Handlers utilizzano il file route.js:

1
app/
2
  api/
3
    route.js

1
import { NextResponse } from 'next/server'
2

3
export async function GET(request) {
4
  // Logica per gestire richieste GET
5
  return NextResponse.json({ message: 'Hello!' })
6
}
7

8
export async function POST(request) {
9
  const body = await request.json()
10
  // Logica per gestire richieste POST
11
  return NextResponse.json({ success: true })
12
}

I Route Handlers esportano funzioni con nomi corrispondenti ai metodi HTTP (GET, POST, PUT, PATCH, DELETE, ecc.).

Utilizzo dei Route Handlers

I Route Handlers possono essere chiamati da qualsiasi client:

1
// Chiamata da un componente client
2
'use client'
3

4
export default function MyComponent() {
5
  async function handleSubmit() {
6
    const response = await fetch('/api', {
7
      method: 'POST',
8
      headers: { 'Content-Type': 'application/json' },
9
      body: JSON.stringify({ data: 'value' })
10
    })
11
    const result = await response.json()
12
  }
13

14
  return <button onClick={handleSubmit}>Submit</button>
15
}

I Route Handlers sono Server Components di default e possono accedere direttamente a database e altre risorse server-side.

Middleware

Il middleware in Next.js permette di eseguire codice prima che una richiesta venga completata. È utile per autenticazione, redirect, modifiche alle richieste e logging.

Configurazione del Middleware

Il middleware viene creato con un file middleware.js nella root del progetto:

1
import { NextResponse } from 'next/server'
2

3
export function middleware(request) {
4
  // Logica del middleware
5
  console.log(request.url)
6

7
  return NextResponse.next()
8
}
9

10
export const config = {
11
  matcher: '/news/:path*',
12
}

Il middleware viene eseguito per ogni richiesta che corrisponde al pattern definito in config.matcher.

Utilizzo Comune del Middleware

1
import { NextResponse } from 'next/server'
2

3
export function middleware(request) {
4
  // Esempio: redirect basato su autenticazione
5
  const isAuthenticated = checkAuth(request)
6

7
  if (!isAuthenticated && request.nextUrl.pathname.startsWith('/admin')) {
8
    return NextResponse.redirect(new URL('/login', request.url))
9
  }
10

11
  // Esempio: aggiungere header personalizzati
12
  const response = NextResponse.next()
13
  response.headers.set('X-Custom-Header', 'value')
14

15
  return response
16
}
17

18
export const config = {
19
  matcher: [
20
    '/news/:path*',
21
    '/admin/:path*',
22
  ],
23
}

Il matcher può essere una stringa, un array di stringhe o un pattern più complesso utilizzando espressioni regolari.

Server Components vs Client Components: Approfondimento

È importante comprendere quando utilizzare Server Components e quando utilizzare Client Components.

Server Components: Quando Utilizzarli

I Server Components sono la scelta predefinita e dovrebbero essere utilizzati quando:

• Si accede a database o file system
• Si utilizzano API keys o credenziali sensibili
• Si vuole ridurre il JavaScript inviato al client
• Il componente non richiede interattività

1
// Server Component (default)
2
import { getMeals } from '@/lib/meals'
3

4
export default async function MealsPage() {
5
  const meals = await getMeals() // Eseguito solo sul server
6

7
  return <MealsGrid meals={meals} />
8
}

Client Components: Quando Utilizzarli

I Client Components devono essere utilizzati quando:

• Si utilizzano hooks di React (useState, useEffect, useContext)
• Si gestiscono eventi del browser (onClick, onChange)
• Si accede ad API del browser (localStorage, window)
• Si utilizzano librerie che richiedono il browser

1
'use client'
2

3
import { useState } from 'react'
4

5
export default function InteractiveComponent() {
6
  const [count, setCount] = useState(0)
7

8
  return (
9
    <button onClick={() => setCount(count + 1)}>
10
      Count: {count}
11
    </button>
12
  )
13
}

Pattern: Minimizzare i Client Components

Quando è necessario utilizzare un Client Component, è buona pratica mantenerlo il più piccolo possibile:

1
// ❌ Non ideale: tutto il componente è client
2
'use client'
3

4
import { usePathname } from 'next/navigation'
5

6
export default function Header() {
7
  const pathname = usePathname()
8

9
  return (
10
    <header>
11
      <nav>
12
        <Link href="/" className={pathname === '/' ? 'active' : ''}>
13
          Home
14
        </Link>
15
        <Link href="/news" className={pathname === '/news' ? 'active' : ''}>
16
          News
17
        </Link>
18
      </nav>
19
    </header>
20
  )
21
}

1
// ✅ Meglio: solo la parte necessaria è client
2
// components/Header.js - Server Component
3
import NavLink from './NavLink'
4

5
export default function Header() {
6
  return (
7
    <header>
8
      <nav>
9
        <NavLink href="/">Home</NavLink>
10
        <NavLink href="/news">News</NavLink>
11
      </nav>
12
    </header>
13
  )
14
}
15

16
// components/NavLink.js - Client Component
17
'use client'
18

19
import { usePathname } from 'next/navigation'
20
import Link from 'next/link'
21

22
export default function NavLink({ href, children }) {
23
  const pathname = usePathname()
24
  const isActive = pathname === href || pathname.startsWith(href + '/')
25

26
  return (
27
    <Link href={href} className={isActive ? 'active' : ''}>
28
      {children}
29
    </Link>
30
  )
31
}

Questo pattern mantiene la maggior parte del codice come Server Components, migliorando le prestazioni.

Navigazione Programmatica

Next.js fornisce il hook useRouter per la navigazione programmatica:

1
'use client'
2

3
import { useRouter } from 'next/navigation'
4

5
export default function MyComponent() {
6
  const router = useRouter()
7

8
  function handleBack() {
9
    router.back() // Torna alla pagina precedente
10
  }
11

12
  function handlePush() {
13
    router.push('/news') // Naviga a una nuova pagina
14
  }
15

16
  function handleRefresh() {
17
    router.refresh() // Ricarica la pagina corrente
18
  }
19

20
  return (
21
    <div>
22
      <button onClick={handleBack}>Back</button>
23
      <button onClick={handlePush}>Go to News</button>
24
      <button onClick={handleRefresh}>Refresh</button>
25
    </div>
26
  )
27
}

Gestione degli Errori nelle Route Avanzate

Quando si utilizzano pattern di routing avanzati, è importante gestire correttamente gli errori:

1
'use client'
2

3
export default function FilterError({ error }) {
4
  return (
5
    <div id="error">
6
      <h2>An error occurred</h2>
7
      <p>Invalid path. Please check your URL.</p>
8
    </div>
9
  )
10
}

Il componente di errore deve essere un Client Component perché gli errori possono verificarsi sia sul server che sul client.

Best Practices

Organizzazione delle Route

• Utilizzare route groups per organizzare route con layout comuni
• Mantenere le route dinamiche il più specifiche possibile
• Utilizzare catch-all routes solo quando necessario

Performance

• Preferire Server Components quando possibile
• Minimizzare l’uso di Client Components
• Utilizzare parallel routes per caricare contenuto indipendente simultaneamente

Manutenibilità

• Documentare pattern di routing complessi
• Utilizzare nomi descrittivi per route dinamiche
• Validare sempre i parametri delle route dinamiche

Conclusione

Questi pattern avanzati di routing permettono di costruire applicazioni Next.js complesse con navigazione sofisticata e controllo granulare sul comportamento delle route. Ogni pattern ha i suoi casi d’uso specifici:

• Parallel Routes: per contenuto indipendente sulla stessa pagina
• Catch-All Routes: per percorsi dinamici di lunghezza variabile
• Intercepting Routes: per modali e overlay
• Route Groups: per organizzare route con layout diversi
• Route Handlers: per endpoint API
• Middleware: per logica cross-cutting su tutte le richieste

Comprendere questi pattern permette di scegliere la soluzione più appropriata per ogni scenario specifico.