Next.js Noções básicas: Criação de páginas e Routing explicações básicas

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.