Ce que Next.js apporte

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 1 sur 47.

Vous pouvez déjà créer des composants avec React. Alors, pourquoi presque toutes les véritables applications React utilisent-elles un framework par-dessus ?

Parce que React, à lui seul, ne fait qu’une seule chose : transformer vos composants en ce qui s’affiche à l’écran. Tout le reste, vous devez le construire vous-même :

Pages et URL : React n’a aucune idée de ce qu’est une URL
Récupérer des données : vous les récupérez dans le navigateur, après le chargement de la page
Enregistrer des données : vous écrivez une API à la main

Next.js comble exactement ces lacunes. Ses réponses sont d'une franchise rafraîchissante :

Un folder est une URL
Les composants s'exécutent sur le serveur par default, ce qui leur permet de charger les données avant même que la page ne soit envoyée
Une function peut enregistrer des données, sans API à écrire

Ce dernier point mérite une pause. Dans ce cours, tu récupéreras des données avec un simple await à l’intérieur d’un composant, sans indicateur de chargement ni useEffect, car le composant s’est exécuté sur le serveur avant que l’utilisateur ne voie quoi que ce soit.

Tout ce que vous avez appris dans Fundamentals s’applique toujours : ce sont les mêmes composants, les mêmes props, le même JSX. Next.js est la structure qui les entoure.

Défi

Débutant

Voici votre première page Next.js, déjà écrite pour vous.

À faire :

Regardez où se trouve le file : app/page.jsx.
Appuyez sur le bouton Run.
L’aperçu affiche cette page à l’URL /.

Rien n’a enregistré cette route : c’est le dossier qui l’a fait. C’est l’idée sur laquelle repose toute cette section.

Essayez vous-même

import './globals.css';

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

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