Il tuo sito con Next.js e l'AI. Online, Lighthouse 100.

Le lezioni

1. 01

   Le 5 pagine che servono a un'aziendagratis

   Scrivi la mappa del sito: home, servizi, progetti, chi siamo, contatti. Per ogni pagina 1 obiettivo e 1 azione. Niente altro al lancio.

   10 min
2. 02

   I testi prima del codice

   Scrivi i testi delle 5 pagine con Claude a partire dai tuoi appunti, con il tono del corso «Contenuti con l'AI». Titoli a 2 battute, numeri, prezzi scritti.

   12 min
3. 03

   Il progetto Next.js con Claude Code

   Fai creare il progetto con App Router e Tailwind, il layout con testata e piè di pagina e la home vuota. Avvii in locale.

   13 min
4. 04

   Design: 1 font, 3 colori, 1 griglia

   Scegli un font da Google Fonts, 3 colori e una griglia e li scrivi in CLAUDE.md. Fai costruire la home con quelle regole.

   12 min
5. 05

   Le 4 pagine interne, una per conversazione

   Costruisci servizi, progetti, chi siamo e contatti in 4 conversazioni, con un commit ognuna. Riusi i componenti della home.

   14 min
6. 06

   Immagini: next/image, formati e pesi

   Carichi le 10 immagini, le fai servire con next/image in WebP e verifichi che nessuna pesi più di 200 KB. Aggiungi il testo alternativo a ognuna.

   12 min
7. 07

   Il modulo di contatto con Resend

   Fai costruire il modulo con una Server Action che manda l'email via Resend e la copia a chi scrive. Provi l'invio e il caso di errore.

   13 min
8. 08

   Metadati, sitemap, robots, llms.txt e dati strutturati

   Generi title e description per ogni pagina, sitemap.xml, robots.txt con i crawler AI ammessi, un llms.txt e il JSON-LD di tipo Organization. Li controlli con il validatore.

   12 min
9. 09

   Accessibilità: contrasto, tastiera, etichette

   Navighi il sito solo con la tastiera, controlli i contrasti e fai correggere le etichette mancanti. Lighthouse accessibilità a 100.

   11 min
10. 10

    Prestazioni: da 80 a 100

    Esegui Lighthouse, leggi le 3 voci più pesanti e le fai correggere una alla volta: font, script di terzi, immagini. Ripeti fino a 100.

    14 min
11. 11

    Pubblicare su Vercel con il tuo dominio

    Colleghi il repository a Vercel, imposti il dominio con i record DNS e attivi HTTPS. Verifichi il sito da telefono e computer.

    12 min
12. 12

    Search Console e GA4 senza consenso invadente

    Verifichi il dominio in Search Console, invii la sitemap e aggiungi GA4 con la modalità consenso. Il banner cookie dice il vero.

    11 min
13. 13

    Il tema scuro e il telefono

    Aggiungi il tema scuro con le stesse 3 variabili e verifichi ogni pagina a 375 pixel di larghezza. Correggi quello che sborda.

    10 min
14. 14

    Aggiornare il sito da solo

    Cambi un prezzo e aggiungi un progetto con Claude Code, fai il commit e vedi il sito aggiornarsi da solo in 2 minuti. Scrivi la procedura nel README.

    10 min
15. 15

    Progetto: online con 100

    Consegni l'indirizzo, il rapporto Lighthouse con 100 nelle 4 voci, la mappa del sito e la prova del modulo di contatto ricevuta via email.

    14 min

Il progetto finale

Domande

Perché Next.js e non WordPress?

Perché il sito che costruisci è codice tuo, senza plugin da aggiornare, e arriva a 100 su Lighthouse senza sforzi. Se hai un WordPress che funziona, il corso «SEO e GEO» ti serve di più.

Quanto costa tenere il sito online?

Vercel ha un piano gratuito che basta per un sito aziendale con qualche migliaio di visite al mese, più il dominio. I prezzi cambiano e non li scriviamo.

Posso aggiungere un blog o un e-commerce dopo?

Il blog sì, con la stessa procedura della lezione 14. Per vendere online il percorso «Vendere online» spiega cosa serve prima del codice.