Princípio Básico de Funcionamento do Framework NextJS

Nas lições anteriores, instalamos o framework NextJS e nos familiarizamos com sua estrutura básica. Chegou a hora de começar o trabalho principal.

A parte principal do NextJS é o roteamento (routing). O roteamento funciona da seguinte forma: quando um usuário digita um URL na barra de endereços do navegador, o framework NextJS irá entregar ao navegador um arquivo específico, correspondente a esse URL.

O roteamento no NextJS é organizado de uma maneira especial. Sua essência reside no fato de que cada URL solicitado corresponde a uma certa pasta dentro de src/app.

Além disso, dentro da pasta deve haver um arquivo com o nome page.jsx. É exatamente este arquivo que será entregue ao navegador. E neste arquivo nós escreveremos código em JSX, e no navegador será enviado o código HTML pronto da página.

Vamos ver um exemplo. Suponha que queremos que no URL /test/ seja exibido um determinado texto.

Vamos criar a pasta correspondente: src/app/test. Dentro desta pasta, vamos criar um arquivo page.jsx com o seguinte conteúdo:

export default function Test() {
	return <h1>hello, user!</h1>;
}

Abra no navegador nosso URL: /test. E você verá o texto que escrevemos dentro do arquivo JSX.

Tente alterar o texto e salvar o arquivo. Depois disso, o texto mudará automaticamente também no navegador. É assim que o NextJS funciona no modo de desenvolvimento.

Faça com que ao acessar o endereço /about seja exibida no navegador uma mensagem com seu nome e sobrenome.