Receita-Next-2

Objeto: criação páginas e componentes para páginas (as chamadas marcas) numa aplicação Next JS

Principais termos técnicos abordados: npm, rota, página, componente, JavaScript, HTML 

Requisitos para as instruções funcionarem: ter o projeto resultante da Receita1 aberto e funcional

Requisitos para compreensão das instruções: noções bem básicas de programação e HTML

Como ler essa receita: instruções, dentro dos passos da receita e que requerem ação sua no computador, estarão escritas em cor azul. Comentários sobre os passos estarão em fonte normal, cor preta. Comandos, código-fonte, termos técnicos ou configuração explícita, estarão com fonte diferenciada.

Observação: eventuais instruções de terminal serão comandos Linux. Adapte caso esteja usando outro sistema operacional

Introdução

Vamos, em linhas gerais, criar funções que vão poder "virar" marcas em código HTML. Se nossa função se chamar MariaPrea(), por exemplo, um código HTML poderá conter a marca

<MariaPrea/> 

entre as suas marcas convencionais (div, h1 etc.).

- E o que acontece quando a gente usa a marca <MariaPrea/>, já que ela não é uma marca HTML padrão e, assim, o navegador não pode interpretá-la?

A marca <MariaPrea/> será processada e em seu lugar constará o valor retornado pela função MariaPrea().

Esse valor deve conter marcas convencionais HTML ou código que possa ser convertido em marcar convencionais HTML.

Vamos à receita.

Passo 1

Criar uma página de nome app/novarota/page.js no seu projeto criado na Receita1

Passo 2

Escrever em app/novarota/page.js a função exportada por default:

export default function NovaRotaHome(){

   return (

      <div>

         <h1>Nova Rota, Nova Página</h1>

      </div>

   )

}

Já vimos que essa função exportada por default fica associada à rota do arquivo em que é escrita. Assim, quando solicitarmos o endereço http://localhost:3000/novarota o Next JS vai construir uma página HTML e, em meio a seu conteúdo, estará o retorno da função. Não vamos chamar essa função de "componente". Vamos chamá-la de página, pois está associada à rota de uma página Web, muito embora o conteúdo final enviado quando a rota é solicitada não seja apenas o resultado computado pela função (ver Receita1).

Passo 3

Criar o arquivo app/novarota/componentes.js, a função...

export function MariaPrea(){

   return (

      <h2>Morreu Maria Preá...</h2>

   )

}

Pronto. Essa função é o que chamamos, aqui, de componente - um "pedaço de interface com o usuário". O que ela tem de diferente da outra? É exportada, mas não como default, e não está dentro do arquivo page.js. Ou seja: ela não está associada a nenhuma rota, e não estaria nem se estivesse escrita dentro do arquivo app/novarota/page.js. Apenas a função exportada por default vira rota. 

Assim, MariaPrea não é uma página.

E, se não é uma página. o Next JS não chama essa função em resposta a nenhuma requisição de uma rota pelo navegador.

Mas como usar essa função, então?

Vamos lá...

Passo 4

Modificar o arquivo app/novarota/page.js para que fique assim:

import { MariaPrea } from "./componentes";

export default function NovaRotaHome(){

    return (

       <div>

          <h1>Nova Rota, Nova Página</h1>

          <MariaPrea/>

       </div>

    )

}

Preste atenção a duas besteirinhas que, se esquecidas, podem quebrar as pernas da gente. O . antes da / em ./componentes e a ausência de .js no nome componentes.

Passo 5

Salvar arquivo: Ctrl+S

Iniciar a aplicação: digitar  npm run dev  no terminal (caso já tenha iniciado a aplicação, bastará salvar o arquivo) 

Abrir a página http://localhost:3000/novarota

Você deve ver algo como...

Passo 6

Inspecionar a página ou visualizar seu código fonte (clique com botão direito e procure a opção adequada).

Procurar o código HTML que você escreveu no código da página. Em meio a muitas outras coisas, você deve encontrar:

<div><h1>Nova Rota, Nova Página</h1><h2>Morreu Maria Preá...</h2></div>

Ou seja: o Next JS chamou sua função Principal() para criar uma página para a rota /novaPagina e a sua função principal chamou a função MariaPrea(), não do modo convencional ao qual estamos acostumados, mas através de uma marca HTML.

Comentários

Sua função MariaPrea() é o que chamamos, aqui, de componente. Sua função Principal é o que chamamos, aqui, de página.

Um arquivo no diretório pages pode ter apenas uma função como export default e inúmeras como apenas export.

As funções rotuladas apenas como export não estão associadas a nenhuma rota, mas podem ser usadas como marcas em código HTML dentro de outras funções. Notem que essas funções podem ter variáveis, if's, for's e fazer o processamento que quiserem, mas precisam retornar um código HTML. As funções exportadas como default também podem ser usadas como marcas em outas funções.  

Notas sobre atualizações mais recentes do next:

• Novo diretório padrão: As páginas agora podem ser criadas dentro do diretório app/, em vez de pages/. Arquivos no diretório pages/ ainda funcionam, mas são considerados "legados".

• Componentes Server e Client: Por padrão, os componentes no App Router são tratados como server components. Para comportamentos que exigem interação com o cliente (como eventos onClick), é necessário declarar explicitamente o componente como client-side, adicionando a instrução:

  • 'use client';

• Rotas dinâmicas e layouts: O novo sistema organiza rotas e layouts de forma hierárquica, permitindo maior reuso e organização do código.

• Para que as instruções funcionem com o App Router, você pode:

  •     Criar a nova página em app/novaPagina/page.js (em vez de pages/novaPagina.js).

  •     Estruturar o componente MariaPrea como um cliente, se necessário, com a instrução 'use client' antes da definição da função.

  •     Aproveitar os layouts do App Router para compartilhar estrutura comum entre as páginas.

Para saber mais

Página oficial do Next JS: nextjs.org

Vídeo (em inglês), que mostra duas abordagens para a criação de componentes (funcional e OO): https://www.youtube.com/watch?v=Om5ISHGM9Cw [prefira a opção funcional]

Página Web tratando o mesmo assunto: https://hcode.com.br/blog/4-nextjs-entendendo-o-sistemas-de-rotas-no-nextjs

Texto no site oficial do NextJS abordando links entre páginas: https://nextjs.org/learn/basics/create-nextjs-app/editing-the-page

Texto no site oficial do NextJS abordando rotas: https://nextjs.org/learn/basics/navigate-between-pages

Exercícios

1. Fazer novos componentes e novas páginas, criando, inclusive, subdiretórios dentro do diretório novarota

2. Fazer com que uma página use um componente escrito num arquivo page.js

3. Funções, como sabemos, podem receber parâmetros. Marcas HTML, como também sabemos, podem ter propriedades. Escreva um componente que recebe parâmetro(s) e retorna uma marca HTML que faz uso desse(s) parâmetro(s) (por exemplo, a mensagem de MariaPrea() poderia ser recebida como parâmetro em vez de ser simplesmente "Morreu Maria Preá"). Use esse componente em algum código HMTL, passando o(s) parâmetro(s) definidos.