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 pasta é uma URL
Os componentes são executados no servidor por padrão, portanto podem carregar dados antes mesmo de a página ser enviada
Uma função pode salvar dados, sem necessidade de 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 Fundamentos ainda se aplica: estes são os mesmos componentes, 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 arquivo está: app/page.jsx.
Pressione o botão Executar.
A visualização mostra essa página na URL /.

Nada registrou essa rota: foi a pasta que 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>
    );
}