Embedded Files
Objeto: criação páginas com layout e links
Principais termos técnicos abordados: npm, lyout, link, rota, página, componente, JavaScript, HTML
Requisitos para as instruções funcionarem: ter o projeto resultante da Receita2 aberto e funcional
Requisitos para compreensão das instruções: noções bem básicas de programação e HTML e JSX
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
Introdução
Vamos, em linhas gerais, entender o que é um layout de um web app e porque a gente deve usar isso.
Um layout, bem, é um layout, uma estrutura geral de uma página que organiza e abre espaço para componentes onde o conteúdo, em si, é exibido.
Layouts são importantes o suficiente para as versões mais recentes do NextJS terem criado uma burocracia especial para lidarmos com eles. E, conquanto que a palavra "burocracia" tenha uma conotação um tanto negativa, no mundo da tecnologia ela sempre está associada a uma contrapartida interessante, como no caso da "burocracia das rotas", que nos ajuda a botar nossas páginas no mundo.
Pode começar trabalhando sobre o código da Receita2, então abra logo o projeto na IDE de sua preferência.
O programador mais atento deve ter notado que o NextJS criou automaticamente um arquivo layout.js no diretório app quando a gente acessou a página pela primeira vez lá na primeira receita. Assim, além dos diretórios que a gente criou dentro do app, temos lá o arquivo pages.js e layout.js.
Vamos dar uma olhada no conteúdo do layout.js, pois a estrutura geral dele é simples.
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
Aquele metadata é apenas para lembrar a você, programador xibata, que o framework fez um trabalho que você deveria ter feito. Ou seja, você deveria ter dado um layout ao seu sistema criando, na pasta app, um arquivo de nome layout.js, e nele ter escrito uma função exportada por default que recebe um parâmetro que é uma lista de componentes.
Muita coisa, né? Por isso não falei disso nas receitas mais básicas.
Já a função RootLayout é essa função exportada por default que a burocracia dos layouts exige. Ela pode ter qualquer nome, mas aconselho que use os nomes padronizados RootLayout para a função e children para o parâmetro.
O corpo da função é a estrutura geral da nossa página principal.
A moral da história aqui é que o NextJS vai renderizar esse componente RootLayout passando como parâmetro para ele o que retorna da sua função exportada como default lá no page.js.
Os passos a seguir são para tentar convencer você do porquê de se fazer isso.
Passo 1
Passo 1
Abra o arquivo app/layout.js e modifique-o para que fique como a seguir:
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function RootLayout({ children }) {
console.log("montando layout")
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
Bem isso deve "cuspir" essa mensagem para alguém ver em algum momento. É uma gambiarra didática. Vamos adiante.
Passo 2
Passo 2
Agora abra o app/page.js e deixe-o assim:
import Link from 'next/link'
export default function Home(){
return (
<div>
<div>
<h1>
Viva Santana!
</h1>
<Link href="/novarota">Rota1</Link> <br/><br/>
<a href="/novarota">Rota 1, jeito antigo</a>
</div>
</div>
)
}
Estamos apenas escrevendo 2 links, um com um componente React do NextJS, o Link, o outro com a marca HTML padrão a.
Passo 3
Passo 3
Salve a página, suba o Next, abra a página principal e, no navegador, inspecione o código via console.
No console você deve ar algo como...
Já no prompt de comando que subiu o servidor, você deve ver...
Por enquanto, isso significa que a renderização da página passou pelo nosso RootLaytout uma vez, e passou no servidor. Nada de execução daquela função no navegador.
Passo 4
Passo 4
Agora clique no primeiro link, que é o resultado da marca Link do Next e dê uma olhada nos logs do servidor...
Ou seja, a mensagem "montando layout" só apareceu uma vez. Dê uma olhadinha no console do navegador e veja que, por lá, não apareceu nenhuma vez. Tente usar o link convencional, renderizado via marca a, e veja o comportamento como é.
Exercícios
Exercícios
Reflita sobre por que esse comportamento é interessante.
Sua página principal, se você fez a receita1, deve ter um div que representa um menu. Esse div fica melhor dentro do layout que dentro da página. Faça isso.
Faça layouts para os subdiretórios de app.
Google Sites
Report abuse