Routing avanzato in Next.js

Next.js è un framework potente per React che offre un sistema di routing avanzato, perfetto per creare esperienze utente fluide e dinamiche. In questo articolo, esploreremo le funzionalità di routing avanzato di Next.js, con esempi di codice e best practice per migliorare le prestazioni SEO e l'esperienza utente.

Introduzione al routing in Next.js

Il routing in Next.js si basa sul file system: ogni file all'interno della cartella pages/ diventa automaticamente una route. Ad esempio, un file about.js in pages/ sarà accessibile tramite /about.

Per progetti complessi sono necessarie però funzionalità più avanzate come: routing dinamico, Catch-all routes, API routes, middleware per la gestione delle richieste, redirect e riscritture.

Inoltre, un'implementazione efficiente del routing può migliorare le performance dell'applicazione, ridurre il tempo di caricamento delle pagine e garantire un'ottima indicizzazione sui motori di ricerca. Vediamo ora nel dettaglio ogni funzionalità avanzata del routing in Next.js.

Routing dinamico in Next.js

Il routing dinamico consente di gestire URL flessibili. Per esempio, in un blog con più articoli, possiamo creare un file pages/blog/[slug].js:

const BlogPost = () => {
  const router = useRouter();
  const { slug } = router.query;

  return
  <h1>Post: {slug}</h1>;
};
export default BlogPost;

Se un utente visita /blog/nextjs-routing, vedrà il titolo "Post: nextjs-routing". Per migliorare le prestazioni, possiamo usare getStaticPaths e getStaticProps:

export async function getStaticPaths() {
  return {
    paths: [
      { params: { slug: 'nextjs-routing' } },
      { params: { slug: 'seo-tips' } }
    ],
  fallback: false
  };
}

export async function getStaticProps({ params }) {
  return {
    props: { slug: params.slug }
  };
}

Questo approccio aiuta Next.js a pre-renderizzare le pagine per una migliore SEO e garantisce un'ottima esperienza utente grazie al caricamento veloce delle pagine. I vantaggi del routing dinamico sono sostanzialmente una SEO migliorata, grazie alla pre-renderizzazione delle pagine statiche, maggiore scalabilità in applicazioni con molti contenuti dinamici e una UX fluida grazie al rendering veloce delle pagine.

Il routing in Next.js offre strumenti per creare applicazioni scalabili e performanti. Sfruttando routing dinamico, middleware e API routes possiamo costruire UX ottimizzate per la SEO. Grazie alla possibilità di gestire in modo efficiente le rotte, statiche e dinamiche, Next.js permette di realizzare applicazioni che rispondono in tempo reale alle esigenze degli utenti, senza compromettere la velocità di caricamento.

Catch-All Routes

Se vogliamo gestire URL di lunghezza variabile, possiamo usare il routing "catch-all" con [...slug].js.

import { useRouter } from 'next/router';

const DynamicPage = () => {
  const router = useRouter();
  const { slug } = router.query;
  return <h1>Path: {JSON.stringify(slug)}</h1>;
  };

export default DynamicPage;

Visitando /blog/nextjs/routing/advanced ['nextjs', 'routing', 'advanced']

Se vogliamo un comportamento opzionale, possiamo usare [[...slug]].js, che rende la route accessibile anche senza parametri. Ma quando Usare le Catch-All Routes? Ad esempio per costruire percorsi dinamici gerarchici, per permettere una navigazione più intuitiva o per migliorare la gestione dei contenuti dinamici su siti di grandi dimensioni.

API routes

Next.js permette di creare API direttamente all'interno della cartella pages/api/. Un file pages/api/posts.js potrebbe restituire un elenco di post:

export default function handler(req, res) {
  res.status(200).json({ posts: [{ id: 1, title: 'Next.js Routing' }] });
}

Questo ci consente di avere API serverless senza dover configurare un backend separato.

Le API Routes eliminano la necessità di un backend separato, facilitano l'integrazione con database e servizi esterni e ottimizzano le performance grazie alla serverless architecture.

Middleware in Next.js

Next.js 12 introdotto tempo fa i middleware che permettono di eseguire codice prima che una richiesta venga elaborata. Creiamo un middleware in middleware.js per reindirizzare utenti non autenticati:

import { NextResponse } from 'next/server';

export function middleware(req) {
  const isAuthenticated = req.cookies.auth;
  if (!isAuthenticated) {
    return NextResponse.redirect('/login');
  }
  return NextResponse.next();
}

Posizionando questo file nella root, Next.js lo applicherà automaticamente a tutte le pagine.

Redirect e riscritture

Possiamo gestire redirect e riscritture direttamente nel file next.config.js:

module.exports = {
  async redirects() {
    return [
      {
        source: '/old-route',
        destination: '/new-route',
        permanent: true
      }
    ];
  },
  async rewrites() {
    return [
      {
        source: '/custom-route',
        destination: '/api/posts'
      }
    ];
  }
};

Conclusione

Un aspetto cruciale è rappresentato dalla capacità di utilizzare middleware che si inseriscono nel flusso di richieste HTTP, permettendo la gestione di operazioni come autenticazione, validazione dei dati e gestione delle sessioni in modo centralizzato. Questo contribuisce alla sicurezza dell'applicazione e alla sua facilità di manutenzione. Consente infatti di centralizzare logiche comuni in punti definiti del codice.

Inoltre, Next.js fornisce un'ampia gamma di funzionalità per migliorare le prestazioni e la sicurezza. Tra queste, il supporto per API routes consente di creare e gestire endpoint per la comunicazione con il backend, senza la necessità di configurare un server esterno. L'integrazione con tecnologie come i CDN rende possibile il caricamento ottimizzato delle risorse statiche, riducendo i tempi di risposta, soprattutto in contesti geograficamente distribuiti.

Un altro vantaggio di Next.js è la sua flessibilità nell'implementazione di soluzioni specifiche per la SEO. Grazie alla generazione automatica di pagine ottimizzate e alla possibilità di controllare le intestazioni HTTP, possiamo garantire che le applicazioni siano visibili e indicizzabili dai motori di ricerca, aumentando così il loro traffico. La gestione del rendering lato server e l'uso della Static Site Generation o dell'Incremental Static Regeneration offrono vantaggi in termini di velocità e SEO, in quanto le pagine vengono pre-renderizzate e fornite immediatamente agli utenti.

Infine, Next.js evolve costantemente, con funzionalità che vengono introdotte regolarmente per rispondere alle esigenze delle applicazioni moderne. La comunità di sviluppatori di Next.js è molto attiva: nuove best practice e strumenti sono sempre a portata di mano. Questo rende Next.js una scelta ideale per chi desidera costruire applicazioni scalabili e ottimizzate per prestazioni elevate.