< Return to Video

WEB CAP17 2025 VA06 NEXT.JS GERENCIAMENTO DE ROTAS

  • 0:08 - 0:10
    A navegabilidade net de S facilita
  • 0:10 - 0:13
    uma boa navegação entre as páginas
    de uma forma rápida e dinâmica.
  • 0:14 - 0:16
    Para que isso aconteça
    de uma forma fluída,
  • 0:16 - 0:18
    precisamos de um bom gerenciamento
    de rotas.
  • 0:18 - 0:23
    No projeto precisamos criar algumas
    estrutura, por exemplo, criar o element,
  • 0:23 - 0:27
    o componente NAV e no app
    criar os componentes que serão navegados.
  • 0:27 - 0:31
    Por exemplo,
    a pasta Contato recebe peixes,
  • 0:31 - 0:36
    a pasta Rome recebe PIS,
    a pasta sobre recebe PIS.
  • 0:36 - 0:40
    Quando o renderizador buscar o componente
  • 0:40 - 0:45
    ele vem na pastinha
    e chama o componente da pastinha.
  • 0:45 - 0:47
    Chamam o componente,
    por isso que ele tem o mesmo nome
  • 0:47 - 0:50
    e é uma boa prática utilizar Peng
  • 0:50 - 0:54
    em todas as suas pastas como referência.
  • 0:54 - 0:58
    Lembrando que ele vai buscar também
    o nome da pasta inicial
  • 0:58 - 0:59
    a que chama contato.
  • 0:59 - 1:03
    Aqui chama Rome que isso é uma sobre e,
    em seguida,
  • 1:03 - 1:07
    precisamos trazer o link novamente
    no nosso NAV.
  • 1:08 - 1:10
    Importar o link
  • 1:10 - 1:14
    que é a dependência que realiza o click
  • 1:14 - 1:17
    de chamar as páginas e montar a estrutura.
  • 1:18 - 1:22
    Eu já coloquei a estilização
    utilizando o IDE, criei um nav.
  • 1:23 - 1:24
    Esse navio possui uma ou ele
  • 1:25 - 1:27
    e aí nós temos a lista.
  • 1:27 - 1:32
    A primeira lista ele é um nome,
    a segunda um sobre e a terceira o contato.
  • 1:32 - 1:37
    Se você visualizar aqui no navegador
    temos o nome sobre e contato.
  • 1:37 - 1:41
    Já está estilizado de uma forma bem clara
    e objetiva.
  • 1:43 - 1:46
    Em seguida, voltamos ao nosso app
  • 1:48 - 1:51
    e em cada componente,
    por exemplo, o contato,
  • 1:52 - 1:55
    montamos o componente contato
    e colocamos aqui o contato
  • 1:55 - 1:58
    e chamamos o componente NAV
  • 1:58 - 2:01
    para que ele receba
  • 2:01 - 2:04
    essa estrutura que toda do navegador.
  • 2:04 - 2:08
    Isso vai acontecer da mesma forma
    nos outros componentes.
  • 2:09 - 2:11
    Rome e no Sobre.
  • 2:11 - 2:14
    Fazendo com que ao clicar
  • 2:15 - 2:18
    já apareça a página referente ao Rome,
  • 2:18 - 2:21
    a página referente ao Sobre
  • 2:21 - 2:23
    e a página referente ao contato.
  • 2:23 - 2:26
    Isso é um gerenciamento de rotas
    que você preparou aqui no Nave
  • 2:27 - 2:30
    que o próprio Nick já criou aqui.
  • 2:30 - 2:35
    O seu gerenciamento ao criar as pastinhas
    com o Page de cada uma delas
  • 2:37 - 2:38
    e assim
  • 2:38 - 2:42
    vemos como que funciona
    uma navegabilidade no seu projeto.
  • 2:42 - 2:45
    Criar um gerenciamento de rotas NFS
    é bem simples,
  • 2:45 - 2:48
    torna mais fácil
    a aplicação em seus projetos futuros.
Title:
WEB CAP17 2025 VA06 NEXT.JS GERENCIAMENTO DE ROTAS
Video Language:
Portuguese, Brazilian
Duration:
02:52

Portuguese, Brazilian subtitles

Incomplete

Revisions Compare revisions