No processo de desenvolvimento de aplicações web, gerenciar páginas e navegar entre elas é um aspecto crucial. Nesta série de artigos, nos aprofundaremos nos fundamentos da criação de páginas e da implementação da navegação em Next.js. Esses conceitos fundamentais são essenciais para a construção de aplicações web flexíveis e gerenciáveis.
Criando e exibindo a primeira página
Primeiramente, vamos entender como criar e exibir uma página simples em formato Next.js. Você pode criar páginas criando arquivos dentro do pages diretório do seu projeto. Por exemplo, para criar uma página de boas-vindas, você pode criar um arquivo nomeado welcome.js dentro do pages diretório.
// pages/welcome.js
function WelcomePage() {
return <h1>Welcome to Next.js!</h1>;
}
export default WelcomePage;
No trecho de código acima, criamos uma página de boas-vindas simples. Ao acessar o /welcome caminho em seu navegador, você verá a mensagem "Bem-vindo ao Next.js !" exibido.
básico Routing
Next.js oferece um sistema robusto e intuitivo routing que facilita a navegação entre as páginas. Routing in Next.js é baseado no pages diretório, com cada arquivo neste diretório correspondendo a um caminho específico. Por exemplo, um arquivo nomeado about.js dentro do pages diretório criará uma página acessível no /about caminho.
Criação de Links e Navegação
Para criar links entre páginas e navegar entre elas, podemos usar o <Link> componente da next/link biblioteca. Abaixo está um exemplo de criação de um link da página de boas-vindas para a página sobre nós.
// pages/welcome.js
import Link from 'next/link';
function WelcomePage() {
return(
<div>
<h1>Welcome to Next.js!</h1>
<Link href="/about">Learn more about us</Link>
</div>
);
}
export default WelcomePage;
No exemplo acima, ao clicar no link “Saiba mais sobre nós”, você será redirecionado para a /about página.
Conclusão
Nesta seção, exploramos como criar e exibir páginas simples Next.js e como implementar a navegação entre páginas usando o pages diretório e o <Link> componente. Essas são etapas iniciais cruciais na construção de um Next.js aplicativo. Nos próximos artigos, continuaremos a explorar outros aspectos da Next.js construção de aplicações web dinâmicas e interativas.