Routing Dinamico - lucadileo9/template-catalog GitHub Wiki

Il sistema di routing dinamico è uno dei pilastri del progetto. Ecco come funziona:

Descrizione Generale

Il file TemplatePage è un componente Next.js che gestisce il caricamento dinamico di template specifici basati sul percorso (slug) fornito dall'URL. Questo approccio permette di organizzare e gestire diverse pagine e layout in modo modulare, caricando solo i componenti necessari per un determinato template.

Il codice verifica l'esistenza del template richiesto, carica dinamicamente il layout e la pagina corrispondente, e gestisce eventuali errori mostrando una pagina 404 nel caso in cui il template non sia disponibile.

Funzionamento della Cartella [...slug]

La cartella [...slug] utilizza una route dinamica di Next.js, nota come "catch-all route". Questo tipo di route consente di catturare tutti i segmenti dell'URL dopo un certo punto e renderli disponibili come array (slug) all'interno dei parametri della pagina.

Ad esempio:

  • URL: /pizzeria/menu/1/edit
  • slug: ["pizzeria", "menu", "1", "edit"]

Tutti i segmenti dell'URL vengono passati come array al parametro slug, permettendo di gestire percorsi complessi in modo flessibile.

Logica Principale

  1. Estrazione del Nome del Template:

    • Il primo elemento di slug è considerato il nome del template (templateName).
    • I segmenti successivi (subPath) rappresentano il percorso interno al template.

  2. Verifica dell'Esistenza del Template:

    • Il codice controlla se il templateName è presente nell'array validTemplates. Se non lo è, viene mostrata una pagina 404.

  3. Caricamento Dinamico:

    • Layout: Viene caricato dinamicamente il layout del template dal percorso ../../templates/${templateName}-template/app/layout.
    • Pagina: Viene caricato dinamicamente il componente della pagina corrispondente al subPath. Se subPath è vuoto, viene caricata la pagina principale del template.

  4. Gestione degli Errori:

    • Se si verifica un errore durante il caricamento del template o del layout, viene mostrata una pagina 404.

Output

Il componente restituisce il layout del template (TemplateLayout) che avvolge il componente della pagina (TemplateApp). Durante il caricamento, vengono mostrati messaggi di caricamento (<p>Caricamento...</p>).

Esempi di Utilizzo

URL: /pizzeria

  • templateName: "pizzeria"
  • subPath: []
  • Carica:
    • Layout: ../../templates/pizzeria-template/app/layout
    • Pagina: ../../templates/pizzeria-template/app/page

URL: /pizzeria/menu/1/edit

  • templateName: "pizzeria"
  • subPath: ["menu", "1", "edit"]
  • Carica:
    • Layout: ../../templates/pizzeria-template/app/layout
    • Pagina: ../../templates/pizzeria-template/app/menu/1/edit/page

Nota: Il funzionamento descritto sopra NON supporta route dinamiche aggiuntive all'interno dei template. Ad esempio, se il subPath contiene segmenti dinamici (come [id]), queste non verranno gestite automaticamente e potrebbero causare errori.