{
    "componentChunkName": "component---src-templates-case-study-jsx",
    "path": "/codevmy/case-studies/parco-corolla-il-nuovo-portale-web-dal-php-legacy-allheadless",
    "result": {"pageContext":{"caseStudy":{"images":[],"cover":{"childImageSharp":{"fluid":{"src":"/static/ed6a199867e7d5931ce3307c8c410c2a/87438/35feed6366005cdc991f7a6c861efd0d.png","srcSet":"/static/ed6a199867e7d5931ce3307c8c410c2a/0e8e4/35feed6366005cdc991f7a6c861efd0d.png 200w,\n/static/ed6a199867e7d5931ce3307c8c410c2a/f6195/35feed6366005cdc991f7a6c861efd0d.png 400w,\n/static/ed6a199867e7d5931ce3307c8c410c2a/87438/35feed6366005cdc991f7a6c861efd0d.png 800w,\n/static/ed6a199867e7d5931ce3307c8c410c2a/e6812/35feed6366005cdc991f7a6c861efd0d.png 1200w,\n/static/ed6a199867e7d5931ce3307c8c410c2a/6650f/35feed6366005cdc991f7a6c861efd0d.png 1600w,\n/static/ed6a199867e7d5931ce3307c8c410c2a/e2890/35feed6366005cdc991f7a6c861efd0d.png 2149w","srcSetWebp":"/static/ed6a199867e7d5931ce3307c8c410c2a/e4239/35feed6366005cdc991f7a6c861efd0d.webp 200w,\n/static/ed6a199867e7d5931ce3307c8c410c2a/01f4a/35feed6366005cdc991f7a6c861efd0d.webp 400w,\n/static/ed6a199867e7d5931ce3307c8c410c2a/0c3ce/35feed6366005cdc991f7a6c861efd0d.webp 800w,\n/static/ed6a199867e7d5931ce3307c8c410c2a/0790f/35feed6366005cdc991f7a6c861efd0d.webp 1200w,\n/static/ed6a199867e7d5931ce3307c8c410c2a/a44d4/35feed6366005cdc991f7a6c861efd0d.webp 1600w,\n/static/ed6a199867e7d5931ce3307c8c410c2a/f960a/35feed6366005cdc991f7a6c861efd0d.webp 2149w","srcWebp":"/static/ed6a199867e7d5931ce3307c8c410c2a/0c3ce/35feed6366005cdc991f7a6c861efd0d.webp"}}},"id":"Project_6ac63f4a18bf1a0015c1542e","preview_image":{"childImageSharp":{"fluid":{"src":"/static/998ee4751e1468e23554eab07bd0ea85/e2764/70cd975af907495ce4fa32234b121c42.jpg","srcSet":"/static/998ee4751e1468e23554eab07bd0ea85/728b9/70cd975af907495ce4fa32234b121c42.jpg 200w,\n/static/998ee4751e1468e23554eab07bd0ea85/aee8e/70cd975af907495ce4fa32234b121c42.jpg 400w,\n/static/998ee4751e1468e23554eab07bd0ea85/e2764/70cd975af907495ce4fa32234b121c42.jpg 800w,\n/static/998ee4751e1468e23554eab07bd0ea85/66b8e/70cd975af907495ce4fa32234b121c42.jpg 1200w,\n/static/998ee4751e1468e23554eab07bd0ea85/23a1d/70cd975af907495ce4fa32234b121c42.jpg 1600w,\n/static/998ee4751e1468e23554eab07bd0ea85/5d698/70cd975af907495ce4fa32234b121c42.jpg 2800w","srcSetWebp":"/static/998ee4751e1468e23554eab07bd0ea85/e4239/70cd975af907495ce4fa32234b121c42.webp 200w,\n/static/998ee4751e1468e23554eab07bd0ea85/01f4a/70cd975af907495ce4fa32234b121c42.webp 400w,\n/static/998ee4751e1468e23554eab07bd0ea85/0c3ce/70cd975af907495ce4fa32234b121c42.webp 800w,\n/static/998ee4751e1468e23554eab07bd0ea85/0790f/70cd975af907495ce4fa32234b121c42.webp 1200w,\n/static/998ee4751e1468e23554eab07bd0ea85/a44d4/70cd975af907495ce4fa32234b121c42.webp 1600w,\n/static/998ee4751e1468e23554eab07bd0ea85/bb840/70cd975af907495ce4fa32234b121c42.webp 2800w","srcWebp":"/static/998ee4751e1468e23554eab07bd0ea85/0c3ce/70cd975af907495ce4fa32234b121c42.webp"}}},"section":[{"title":null,"solution":[{"text":"Il Parco Corolla è un centro commerciale siciliano con decine di negozi, servizi, eventi e un magazine editoriale. Il suo portale storico, [parcocorolla.it](https://www.parcocorolla.it/), era stato realizzato e ampliato nel corso degli anni in PHP. Aveva servito bene il suo scopo, ma rendeva ormai difficile evolvere contenuti, design e performance.\n\nAbbiamo progettato e sviluppato la nuova piattaforma con un **approccio headless**: i contenuti vivono in Directus, il frontend è un'applicazione Next.js che li compone in pagine attraverso un page builder a blocchi. La redazione del centro commerciale pubblica in autonomia, il sito si aggiorna da solo e in tempo reale.\n\n","title":null}]},{"title":"La sfida: quattro vincoli, nessun compromesso ","solution":[{"text":"Riscrivere il portale di un centro commerciale attivo non significa solo \"rifare il sito\". Il progetto doveva muoversi dentro una serie di vincoli stretti, tutti da rispettare contemporaneamente: \n\n### Non perdere nulla\nAnni di contenuti (news, eventi, schede negozio, volantini) e soprattutto anni di posizionamento sui motori di ricerca, con URL indicizzati da preservare uno a uno.\n\n### Autonomia editoriale\nLa redazione doveva poter costruire pagine e sezioni senza passare dagli sviluppatori, con aggiornamenti visibili online immediatamente.\n\n### Convivenza con il legacy\nL'app mobile storica del parco continuava a leggere feed JSON esposti dal vecchio sito PHP, che dovevano restare funzionanti.\n\n### Sostenibilità dei costi\nUn sito ricco di immagini e contenuti, su infrastruttura cloud a consumo, richiede una strategia di caching precisa per non far esplodere i costi di esercizio.\n\n \n\n![Corolla-Articolo-03.jpg](https://assets.acadevmy.it/Corolla_Articolo_03_fcdbaf3faa.jpg)\n\n \n\n","title":null}]},{"title":"La soluzione","solution":[{"text":"Abbiamo affrontato il progetto con un approccio integrato, dalla migrazione dei contenuti fino all'ottimizzazione delle performance in produzione.\n\n\n","title":null},{"text":"Il vecchio CMS PHP poggiava su un database MySQL raggiungibile solo tramite export manuali. Abbiamo costruito una **pipeline di migrazione dedicata**: export dei dati, inventario e caricamento delle immagini, mappatura delle entità legacy sulle nuove collection Directus, importazione dei record e delle relazioni, validazione finale. La pipeline supporta anche la **sincronizzazione incrementale**: durante lo sviluppo il vecchio sito è rimasto online e i nuovi contenuti pubblicati nel frattempo sono stati riallineati automaticamente prima del go-live.\nIn pratica, la redazione ha potuto continuare a pubblicare come sempre fino al giorno del lancio, senza fermare l'attività in attesa della migrazione: i contenuti pubblicati nel frattempo sono confluiti automaticamente nella nuova piattaforma.\n\n \n\n![Corolla-Articolo-05.jpg](https://assets.acadevmy.it/Corolla_Articolo_05_2f5dca4d5a.jpg)\n\n\n \n","title":"Migrazione dei contenuti: una pipeline dedicata"},{"text":"Ogni URL storico è stato trattato come un asset. Gli slug dei contenuti replicano la forma degli URL indicizzati dal vecchio sito, gli identificativi legacy sono mantenuti nei nuovi percorsi di dettaglio e una collection dedicata in Directus permette alla redazione di gestire **redirect 301** senza toccare il codice. Sitemap unificata, metadati SEO gestiti da CMS e URL canonici completano il quadro.\nUn problema inatteso è emerso subito dopo il go-live: i crawler continuavano a richiedere migliaia di varianti degli URL ```.php``` del vecchio sito, generando di fatto una \"crawler trap\" che costituiva la maggior parte del traffico e costringeva il server a un render completo per ogni 404. Lo abbiamo neutralizzato rispondendo **direttamente all'edge**, nel middleware, prima che la richiesta tocchi l'applicazione.\n\nIl risultato per il Parco Corolla è che chi trovava una pagina del parco su Google prima del lancio la trova ancora oggi, senza dover ricostruire da zero anni di posizionamento.\n\n","title":"Continuità SEO by design"},{"text":"Le pagine del portale sono costruite dalla redazione con un **page builder a blocchi**: circa 24 tipologie di blocco componibili (hero, griglie negozi e servizi, anteprime news ed eventi, orari di apertura, mappe, gallery, form) ognuna con il suo componente Frontend tipizzato e validato.\n\nIl requisito \"quando pubblico, il sito si aggiorna subito\" è stato risolto senza rinunciare alla cache: le pagine sono statiche (ISR) e vengono **invalidate chirurgicamente via webhook**. Quando un redattore salva un contenuto, Directus notifica il frontend, che rigenera solo le pagine interessate grazie a un sistema di cache tag granulari per collection e per singolo record. Il meglio dei due mondi: performance da sito statico, freschezza da sito dinamico.\n\nPer la redazione questo significa poter lanciare una nuova sezione o aggiornare una pagina eventi in autonomia e vederla online subito, senza aprire un ticket agli sviluppatori.\n\n \n\n![Corolla-Articolo-02.jpg](https://assets.acadevmy.it/Corolla_Articolo_02_15bb542fef.jpg)\n\n \n","title":"Page builder: la redazione compone, il sito si aggiorna da solo"},{"text":"Il patrimonio fotografico migrato includeva immagini fino a 10 MB. Abbiamo implementato un **image loader personalizzato **che delega le trasformazioni a Directus (ridimensionamento - conversione WebP - compressione) e serve gli asset attraverso una CDN edge con cache hit ratio intorno al 95%.\n\nSu un sito così ricco di immagini, questa ottimizzazione incide direttamente sulla velocità di caricamento e sulla banda consumata e quindi sui costi di esercizio dell'infrastruttura cloud, uno dei vincoli di partenza del progetto.\n\n \n\n![Corolla-Articolo-04.jpg](https://assets.acadevmy.it/Corolla_Articolo_04_eb2ee8afcf.jpg)\n\n\n \n","title":"Immagini: da 10 MB a 133 KB"},{"text":"Il portale include una **mappa interattiva multi-livello** dei negozi (galleria, primo piano, aree esterne) con parità di funzionalità rispetto al vecchio sito, un'area account basata su Firebase Authentication (email, Apple, Facebook) condivisa con l'ecosistema dell'app mobile MyCorolla, la registrazione agli eventi con biglietto QR code, l'iscrizione alla newsletter integrata con Brevo e i form di contatto e richiesta spazi espositivi gestiti da CMS.","title":"Mappa interattiva, area riservata e servizi"},{"text":"L'app mobile storica del parco leggeva feed JSON esposti dal vecchio sito. Invece di forzare un big bang, il nuovo frontend riproduce quegli stessi endpoint (stessi percorsi ```.php```, stesso schema dati) alimentandoli però da Directus.\n\nIn pratica, per chi visita il sito il passaggio è stato trasparente, stesso accesso, stessa mappa, stesse funzionalità di sempre. E lo stesso vale per gli utenti dell'app, che hanno continuato a usarla come sempre, ignari del completo cambio di piattaforma.\n\n \n\n![Corolla-Articolo-01.jpg](https://assets.acadevmy.it/Corolla_Articolo_01_582da6a658.jpg)\n\n\n \n\n\n","title":"Convivenza con l'app legacy"}]},{"title":"Architetture e tecnologie","solution":[{"text":"Per garantire performance, sicurezza e manutenibilità, abbiamo utilizzato uno stack tecnologico moderno e affidabile.\n\n- **Frontend:** Next.js (App Router) con React e TypeScript, styling con Tailwind CSS, animazioni GSAP, data-fetching con TanStack Query e validazione dei contenuti con Zod.\n- **CMS:** Directus su PostgreSQL, dockerizzato, esteso con plugin per SEO, slug e interfacce editoriali avanzate.\n- **Monorepo:** workspace Nx con frontend, CMS, libreria condivisa di tipi (generati dallo schema Directus e validati con Zod) e tooling di migrazione.\n- **Infrastruttura:** frontend su Vercel, Directus su DigitalOcean App Platform, asset su object storage con CDN edge.\n- **Internazionalizzazione:** next-intl con dizionari gestiti direttamente in Directus, predisposto per il multilingua.\n- **Qualità e delivery:** CI/CD su GitLab, conventional commit, versionamento automatico con semantic-release, monitoraggio errori con Sentry, Storybook per la libreria di componenti UI.\n","title":null}]},{"title":"Sviluppo AI-augmented","solution":[{"text":"L'architettura CMS→UI è codificata in **regole e documentazione machine-readable** che guidano gli agenti di sviluppo AI direttamente nel repository. Ogni merge request riceve una **code review automatica AI in italiano**, che affianca (non sostituisce) la review dei colleghi. La documentazione tecnica è trattata come source of truth e mantenuta allineata al codice. \n\nQuesto approccio ha permesso al team di muoversi più velocemente mantenendo coerenza architetturale su tutto il progetto.\n","title":null}]},{"title":"Risultati e impatto","solution":[{"text":"- **Continuità totale**: contenuti, URL e posizionamento SEO preservati; l'app mobile legacy ha continuato a funzionare durante tutta la transizione.\n- **Redazione autonoma**: pagine componibili a blocchi e pubblicazione in tempo reale, senza interventi degli sviluppatori.\n- **Performance**: pagine statiche servite da CDN, immagini ottimizzate con riduzioni di peso fino al 98,7%.\n- **Costi sotto controllo**: la strategia di caching e l'ottimizzazione degli asset hanno ridotto in modo significativo i costi di esercizio dell'infrastruttura cloud.\n- **Base per il futuro**: architettura tipizzata e componibile, pronta per nuove sezioni, nuove lingue e l'integrazione sempre più stretta con l'ecosistema MyCorolla.\n","title":"Cosa vede chi visita il sito "}]}],"slug":"parco-corolla-il-nuovo-portale-web-dal-php-legacy-allheadless","description":"Riscrittura completa di [parcocorolla.it ](https://www.parcocorolla.it/) con Next.js e Directus: migrazione dei contenuti, continuità SEO e pubblicazione in tempo reale.","details":[{"value":"2026","name":"Anno"},{"value":"Parco Corolla","name":"Committente:"},{"value":"Portale Web","name":"Prodotto:"},{"value":"Retail / Centri commerciali","name":"Ambito:"},{"value":"Next.js, React, TypeScript, Directus, PostgreSQL, Tailwind CSS, Firebase, Vercel","name":"Tecnologie: "},{"value":"Sviluppo","name":"Tipologia:"}],"name":"Parco Corolla: il nuovo portale web, dal PHP legacy all'headless","keywords":"Per il Parco Corolla abbiamo riscritto da zero il portale web, sostituendo una piattaforma PHP cresciuta a strati nel tempo con un'architettura **headless moderna**: Directus come CMS e Next.js come frontend. Il risultato è un sito veloce, componibile dalla redazione e capace di aggiornarsi in tempo reale, che ha preservato l'intero patrimonio SEO accumulato negli anni.","mobile":false,"category":"Portale Web","download":[]}}},
    "staticQueryHashes": ["63159454"]}