O que o Next.js adiciona

Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 1 de 47.

Você já consegue criar componentes com React. Então, por que quase todo aplicativo React real usa um framework sobre ele?

Porque o React, por si só, faz apenas uma coisa: transforma seus componentes no que aparece na tela. Todo o resto, você mesmo constrói:

Páginas e URLs: o React não faz ideia do que é uma URL
Obtendo dados: você os busca no navegador, depois que a página já foi carregada
Salvando dados: você escreve uma API manualmente

Next.js preenche exatamente essas lacunas. Suas respostas são agradavelmente diretas:

Uma folder é uma URL
Os componentes são executados no servidor por padrão, então podem carregar dados antes que a page seja enviada
Uma function pode salvar dados, sem precisar escrever uma API

Esse último ponto merece uma pausa. Neste curso, você buscará dados com um simples await dentro de um componente, sem indicador de carregamento e sem useEffect, porque o componente foi executado no servidor antes que o usuário visse qualquer coisa.

Tudo o que você aprendeu em Fundamentals ainda se aplica: estes são os mesmos component, as mesmas props, o mesmo JSX. Next.js é a estrutura construída ao redor deles.

Desafio

Iniciante

Aqui está sua primeira página Next.js, já escrita para você.

O que fazer:

Veja onde o file está localizado: app/page.jsx.
Pressione o botão Run.
A visualização mostra essa página na URL /.

Nada registrou essa route: a pasta fez isso. Essa é a ideia na qual toda a seção se baseia.

Experimente você mesmo

import './globals.css';

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

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