Dalla sua introduzione, Next.js ha continuato a evolversi, offrendo funzionalità avanzate che semplificano lo sviluppo, migliorano le prestazioni e ottimizzano la SEO.
Perché Next.js?
Next.js estende React introducendo la generazione di pagine lato server (SSR), la generazione di siti statici (SSG), l'ottimizzazione automatica delle pagine e molte altre caratteristiche che migliorano l'esperienza di sviluppo e l'efficacia dell'applicazione finale. Questo rende Next.js ideale per progetti che necessitano di SEO avanzata, caricamento veloce delle pagine e una gestione semplificata del routing.
Crea un Nuovo Progetto Next.js
Utilizza il seguente comando per creare un nuovo progetto Next.js. Questo comando crea una nuova directory con un progetto Next.js preconfigurato.
- npx create-next-app@latest nome-del-mio-progetto
- cd nome-del-mio-progetto
- npm run dev
Struttura del Progetto
Esplora la struttura del progetto generato. Troverai directory importanti come pages, dove ogni file corrisponde a una route dell'applicazione, e public, per risorse statiche come le immagini.
Creare Pagine con Next.js
Next.js utilizza un sistema di routing basato sui file nella directory "pages". Creare una nuova pagina è semplice quanto aggiungere un nuovo file JavaScript o TypeScript all'interno di questa directory.
// pages/about.js
export const About = () => {
return <div>Benvenuto nella pagina About!</div>;
}
export default About;Visita "http://localhost:3000/about" per vedere la tua nuova pagina in azione.
SSR e SSG con Next.js
Una delle caratteristiche distintive di Next.js è la sua capacità di pre-renderizzare pagine sia attraverso Server-Side Rendering (SSR) che Static Site Generation (SSG).
SSR: Utilizza getServerSideProps per fetchare dati al momento della richiesta.
// pages/post/[...slug]/index.js
export const getServerSideProps = async ({ params }: Context) => {
const { slug } = params;
const res = await fetch(`https://api.theartcode.dev/post/${slug}`);
const post = await res.json();
return { props: { post } };
}
export const Post = ({ post }) => {
return <div>{post.title}</div>;
}
export default Post;SSG: Utilizza getStaticProps e getStaticPaths per generare pagine statiche al momento della build.
// pages/post/[...slug]/index.js
export const getStaticPaths = async () => {
const res = await fetch('https://api.theartcode.dev/posts');
const posts = await res.json();
const paths = posts.map((post) => ({
params: { id: post.id.toString() },
}));
return { paths, fallback: false };
}
export const getStaticProps = async ({ params }) => {
const { slug } = params;
const res = await fetch(`https://api.theartcode.dev/post/${slug}`);
const post = await res.json();
return { props: { post } };
}
Ottimizzazione e SEO
Next.js offre diverse funzionalità integrate per ottimizzare il tuo sito per i motori di ricerca (SEO). Una di queste è l'utilizzo del componente per modificare il titolo della pagina e aggiungere meta tag specifici, che sono cruciali per la SEO.
Utilizzando "Head", puoi personalizzare il titolo della pagina, la descrizione, i meta tag per la condivisione sui social media e altro ancora, direttamente all'interno dei componenti della tua pagina Next.js. Questo ti permetterà di avere un controllo dettagliato sulle informazioni che i motori di ricerca e le piattaforme di condivisione social raccoglieranno dal tuo sito, migliorando la visibilità e la pertinenza nei risultati di ricerca.
import { Head } from 'next/document';
export const Home = () => {
return (
<>
<Head>
<title>The artCode - Code Test</title>
<meta name="description" content="Where art meets code..." />
<meta property="og:title" content="The artCode - Where art meets code" />
<meta property="og:description" content="Benvenuto su the artCode. Qui troverai informazioni su..." />
<meta property="og:image" content="https://theartcode.dev/immagine-condivisa.jpg" />
<meta property="og:url" content="https://theartcode.dev" />
<link rel="icon" href="/favicon.ico" />
</Head>
/// Next scripts
</>
);
};
export default Home;
