Ehi, collega, siediti che ti racconto come ho affrontato questo next js tutorial italiano per principianti. Sai, l'altro giorno mi è capitato di dover spiegare a un amico come partire da zero con Next.js, e ho pensato: 'Ma perché non scriverlo come se fossimo al bar?'.

Il punto è che creare un sito statico non è roba da maghi, ma se non sai da dove iniziare, ti perdi in mille comandi. Io, per esempio, ho perso ore la prima volta perché non avevo testato bene. Next.js tutorial italiano è proprio quello che serve per evitare casini del genere.

Ok, ma cosa costruiamo oggi? Un sito statico semplice, con una home page e una pagina about, e lo deployiamo su Vercel in un baleno.

Prima di tuffarci nei dettagli, parliamo dei prerequisiti. Devi avere Node.js installato, almeno la versione 14 o superiore, e npm per gestire i pacchetti. Ah, e un editor di codice come VS Code, che io preferisco perché è veloce e non mi fa impazzire con interfacce complicate. Se non ce l'hai, scaricalo e installalo; è una passeggiata.

Passiamo all'installazione di Next.js

Ero scettico all'inizio, ma Next.js rende tutto così fluido. Per iniziare, apri il terminale e crea un nuovo progetto. Digita questo comando: npx create-next-app@latest my-static-site --typescript. Ho aggiunto TypeScript perché, sul serio, ti salva da errori stupidi.

Una volta creato, entra nella cartella: cd my-static-site. E qui, aspetta, non correre: lancia npm run dev per vedere il server locale. Io ho provato senza e ho perso mezz'ora a debuggare. La fregatura è che a volte il browser non si apre da solo.

Costruiamo la home page

Adesso che hai il progetto su, modifichiamo la home. Vai nel file pages/index.tsx e cambia il contenuto. Ecco un esempio semplice:

import Head from 'next/head';
export default function Home() {
  return (
    

      
        
      
      
Benvenuto nel mio sito!
      
Qui impari next js tutorial italiano passo per passo.
    
  );
}

Vedi? È React sotto il cofano, ma Next.js gestisce il routing. Io preferisco questo approccio perché rende le cose più veloci senza dover configurare un sacco di roba. Ma, ehi, se sei come me che odia i delay, prova a ottimizzare con getStaticProps per pagine statiche.

Aggiungiamo una pagina extra

Ma non fermiamoci qui. Creiamo una pagina about. Fai un nuovo file in pages/about.tsx e scrivi:

import Head from 'next/head';
export default function About() {
  return (
    

      
        
      
      
Su di Me
      
Stefano Salvucci, developer da anni, e questa è la mia storia.
    
  );
}

Ora, accedi a localhost:3000/about nel browser. Funziona? Grandioso. L'ultima volta che ho deployato senza test, mi sono giocato il weekend per fixare un link rotto. Spoiler: non ripetere i miei errori.

Stiliamo un po'

E per renderlo carino, aggiungiamo CSS. Next.js supporta CSS modules, che io adoro perché evita conflitti. Crea un file styles/Home.module.css e metti dentro:

.container {
  padding: 20px;
  background-color: #f0f0f0;
}

Poi, nel tuo componente, importa così: import styles from '../styles/Home.module.css'; e usa

← Torna al blog