Perché ho scelto Next.js con strumenti basati sull'IA invece di WordPress per ricostruire il mio sito web

Volevo ridisegnare il mio sito web in un fine settimana e ho considerato tre possibili strumenti: Drupal, WordPress e Next.js. Dato che il mio sito esistente era basato su WordPress, sembrava la scelta migliore. Con WordPress, non avrei avuto bisogno di migrare i contenuti, il mio server era già configurato e tutto ciò che dovevo fare era applicare un nuovo tema.

Tuttavia, ho scelto Next.js con strumenti basati sull'IA per ridisegnare il mio sito web. Ecco perché.

Il Processo di Riprogettazione

Una riprogettazione del sito web è più di un semplice lancio di una nuova versione. Il processo dipende dalla complessità del progetto e dagli obiettivi. Alcune riprogettazioni sono semplici aggiornamenti, mentre altre richiedono la ricostruzione dell'intero sito, inclusi layout, design e funzionalità.

Le parti chiave di una riprogettazione possono includere:

• Creare un nuovo design o migliorare quello esistente
• Modificare il layout dei contenuti per renderlo più facile da leggere e utilizzare
• Migliorare la SEO rendendo il sito più veloce e facile da trovare sui motori di ricerca
• Aggiungere nuove funzionalità basate sulle esigenze degli utenti
• Impostare reindirizzamenti in modo che gli URL vecchi funzionino ancora e non danneggino il posizionamento sui motori di ricerca
• Rendere il sito più accessibile e veloce per una migliore esperienza utente
• Spostare contenuti o ristrutturare dati se si cambia piattaforma

Il mio progetto di riprogettazione avrebbe dovuto affrontare tutti questi aspetti.

Sfide di Progettazione

Sapevo di non avere competenze di design. Ancora più importante, non mi piace il processo di design. Ho cercato temi WordPress che corrispondessero alla mia visione ma non ne ho trovati. Ciò significava che avrei dovuto creare un tema personalizzato o modelli di page builder se fossi rimasto con WordPress. Lo stesso problema si applicava a Drupal perché nulla soddisfaceva le mie esigenze.

Dato che non sono un designer, avevo due scelte:

• Utilizzare un tema esistente
• Chiedere aiuto

Ho deciso di utilizzare strumenti basati sull'IA per dare vita alle mie idee. Con pochi prompt descrittivi, l'IA ha creato tutti i componenti UI di cui avevo bisogno, dai menu di navigazione ai layout dei contenuti e ai design reattivi.

Dal backend (area amministrativa), Drupal e WordPress non supportano ancora completamente gli strumenti basati sull'IA per la generazione di layout personalizzati, o non funzionano in modo ottimale. Le opzioni disponibili richiedono ancora l'accesso al sito e il clic ripetuto su più passaggi. Tuttavia, la community di Drupal sta facendo progressi significativi in quest'area e ho intenzione di scriverne presto.

Perché ho scelto Next.js

Ho escluso WordPress e Drupal perché richiedevano troppo lavoro manuale. Nonostante la mia esperienza con Drupal, la configurazione di un sito con moduli e temi avrebbe richiesto più tempo di quanto avessi. Avendo solo un fine settimana per completare il progetto, avevo bisogno di una soluzione semplice senza complessità inutili.

Invece, mi sono rivolto a Next.js con strumenti di sviluppo moderni. Cursor e Windsurf, entrambi IDE, semplificano la progettazione dell'interfaccia utente generando codice strutturato e pronto per la produzione da semplici prompt. Puoi descrivere ciò che desideri in linguaggio naturale, come "crea un menu di navigazione reattivo con un logo e collegamenti", e ottenere codice distribuibile istantaneamente. Utilizzo questi strumenti per progetti personali e di lavoro da parecchio tempo.

Una delle chiavi per uno sviluppo efficiente basato sull'IA è la creazione di buoni prompt. Per il processo di migrazione, ho fornito gli URL delle mie pagine WordPress esistenti e ho descritto la struttura dei contenuti desiderata in Next.js. Con questi prompt dettagliati, Cursor ha generato script per estrarre i contenuti dal mio vecchio sito e trasformarli nel nuovo formato. Lo stesso approccio ha aiutato a creare URL ottimizzati e regole di reindirizzamento per mantenere il posizionamento SEO, garantendo al contempo metadati appropriati e una struttura HTML semantica in tutto il sito.

Tradizionalmente, scriveresti ogni riga di codice manualmente. Questi IDE generano interi componenti e pagine tramite semplici prompt, seguendo le migliori pratiche e mantenendo la qualità del codice. Il codice generato può essere distribuito immediatamente sul tuo server.

Per semplificare il processo, ho utilizzato:

• ChatGPT, Gemini e Claude per il brainstorming e la creazione di prompt efficaci
• Cursor e Windsurf per la generazione e la struttura del codice
• Tailwind CSS per lo styling rapido e il design reattivo

Tailwind ha consentito uno styling veloce con risultati coerenti e ottimizzati.

Come bonus, l'hosting sul piano gratuito di Vercel mi fa risparmiare 5$ al mese in costi di hosting ed elimina ore dedicate agli aggiornamenti di WordPress e alla manutenzione del server ogni mese.

La Potenza dell'IA

L'IA ci consente di realizzare cose che prima non potevamo, sia per mancanza di competenze che per mancanza di interesse.

Un altro fattore importante nella mia decisione è stata la velocità.

Il mio vecchio sito WordPress ha ottenuto solo 65 su PageSpeed Insights per i dispositivi mobili, come dimostra un ultimo test delle prestazioni:

Al contrario:

• Next.js è incredibilmente veloce, ottenendo 100 su PageSpeed sia per mobile che per desktop
• Raggiungere questo risultato ha richiesto solo pochi prompt ben formulati e pochi minuti

Abbracciare l'IA Mantenendo il Controllo

L'IA sta rivoluzionando lo sviluppo software aumentando drasticamente la produttività. Permette agli sviluppatori di svolgere attività che in precedenza richiedevano team interi o sembravano irraggiungibili a causa di vincoli di tempo, mancanza di competenze o interesse limitato per alcuni aspetti dello sviluppo.

Tuttavia, è fondamentale capire che l'IA è un potente assistente, non un sostituto delle conoscenze fondamentali e del pensiero critico. Ecco alcune intuizioni chiave che ho acquisito:

• Imparare i fondamenti è più importante che mai. Devi capire cosa sta facendo l'IA e perché
• Posizionati come il pilota, con l'IA come tuo assistente che gestisce attività ripetitive e manuali
• Concentra le tue energie sugli aspetti impegnativi: comprensione delle esigenze degli utenti, progettazione del sistema, decisioni architetturali e risoluzione dei problemi
• Forti capacità di comunicazione come l'ascolto attivo sono diventate ancora più cruciali nell'era dell'IA

La chiave è abbracciare l'IA mantenendo il controllo sul tuo processo di sviluppo. Ciò significa rivedere attentamente il codice generato, comprenderne le implicazioni e assicurarsi che sia in linea con i requisiti del tuo progetto e le migliori pratiche.

Nel mio caso, l'IA mi ha permesso di trasformare le mie idee in realtà con pochi prompt ben formulati. Mi ha aiutato a iterare rapidamente, sperimentare e perfezionare fino a ottenere un risultato che mi piaceva, tutto a un costo di tempo molto inferiore.

Sebbene ami Drupal e WordPress, e siano ottimi strumenti per molti casi d'uso che continuerò a utilizzare dove hanno senso, lo sviluppo basato sull'IA con Next.js si è rivelato la soluzione perfetta per questo particolare progetto.

Stack Tecnologico

Ecco lo stack completo che ho utilizzato per costruire questo sito web: