Cosa aggiunge Next.js

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 1 di 47.

Sai già creare componenti con React. Allora perché quasi tutte le app React reali usano un framework basato su di esso?

Perché React, da solo, fa una sola cosa: trasforma i tuoi componenti in ciò che appare sullo schermo. Tutto il resto lo costruisci tu:

Pagine e URL: React non ha idea di cosa sia un URL
Recuperare dati: li recuperi nel browser, dopo che la pagina è già stata caricata
Salvare dati: scrivi un'API a mano

Next.js colma esattamente queste lacune. Le sue risposte sono piacevolmente dirette:

Una FOLDER è un URL
I componenti vengono eseguiti sul server per impostazione predefinita, quindi possono caricare i dati prima ancora che la pagina venga inviata
Una funzione può salvare i dati, senza dover scrivere un'API

Quest’ultimo punto merita una pausa. In questo corso recupererai i dati con un semplice await all’interno di un componente, senza indicatore di caricamento e senza useEffect, perché il componente è stato eseguito sul server prima che l’utente vedesse qualsiasi cosa.

Tutto ciò che hai imparato in Fondamenti continua ad applicarsi: sono gli stessi componenti, le stesse props, lo stesso JSX. Next.js è la struttura che li circonda.

Sfida

Principiante

Ecco la tua prima pagina Next.js, già scritta per te.

Cosa fare:

Guarda dove si trova il file: app/page.jsx.
Premi il pulsante Esegui.
L'anteprima mostra quella pagina all'URL /.

Non è stato registrato nulla per quella route: l'ha fatto la cartella. È l'idea su cui si basa l'intera sezione.

Provalo tu

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}