La versione precedente di questo portfolio era stata realizzata in React puro durante il mio percorso di formazione come Web Developer. Sebbene funzionale, sentivo la necessità di fare un salto di qualità tecnico.

Volevo un progetto che non fosse solo una vetrina statica, ma un vero e proprio "parco giochi" per sperimentare con tecnologie più avanzate. Mi sono avvicinato a Next.js attratto dal suo sistema di routing intuitivo e dalla possibilità di gestire logiche di backend nello stesso ambiente del frontend, caratteristiche che mancavano nella mia precedente SPA (Single Page Application).

1. Architettura e Stack Tecnologico

Ho ricostruito il sito da zero con un focus assoluto sulle performance e sulla manutenibilità:

• Next.js & SSG: Dato che i contenuti cambiano raramente, ho optato per la Static Site Generation. Questo garantisce tempi di caricamento quasi istantanei, servendo HTML pre-renderizzato.

• Gestione Multilingua: L'internazionalizzazione è gestita tramite next-intl. Ho implementato una struttura ibrida: uso le funzioni native della libreria per le stringhe dell'UI (menu, footer) e i parametri di locale nel routing per servire i contenuti dinamici (come questo articolo) nella lingua corretta.

// /app/[locale]/layout.tsx
// SSG genera staticamente un layout base per ogni locale.

import { routing } from "@/i18n/routing";

export function generateStaticParams() {
    return routing.locales.map((locale) => ({ locale }));
}


// /app/[locale]/projects/[project]/page.tsx
// SSG idrata le rotte dinamiche [project] con gli slug reali del portfolio.

export function generateStaticParams() {
    return (portfolio as PortfolioProject[]).map((p) => ({ project: p.slug }));
}

2. Content Management con MDX

La funzionalità chiave di questo aggiornamento è l'integrazione di MDX.

Il problema: In un portfolio standard, ogni pagina progetto ha la stessa struttura rigida (Titolo, Immagine, Testo).

La mia soluzione: Con MDX, ho trasformato ogni pagina progetto in un canvas flessibile. Posso alternare semplici descrizioni a veri e propri Case Study strutturati, inserire componenti React interattivi direttamente nel testo e personalizzare il layout in base alla storia che voglio raccontare per quel progetto specifico.

3. UI/UX e Performance

L'obiettivo di design era "invisibile ma intuitivo". Ho lavorato molto sui tag semantici e sugli attributi ARIA per garantire che il sito fosse navigabile da chiunque, indipendentemente dal dispositivo o dagli ausili utilizzati.

I risultati su PageSpeed Insights confermano la perfomance dell'approccio SSG unito a un codice pulito:

Risultati PageSpeed Insights

4. Le Sfide e Cosa Ho Imparato

La sfida maggiore è stata tecnica: l'integrazione di MDX con il sistema di routing multilingua di Next.js. La documentazione ufficiale su casi d'uso avanzati era scarna, e venivo da un periodo di pausa dal codice.

Superare questo ostacolo mi ha insegnato a scavare nel codice sorgente delle librerie e a non dipendere solo dai tutorial. La lezione più grande? Next.js è il framework che si adatta al mio pensiero: strutturato ma flessibile, perfetto per scalare da un semplice sito statico a un'applicazione complessa.