Open jemluz opened 9 months ago
jemluz
commented
9 months ago No Next, a pasta pages quase que tem vida própria.
Para criar uma rota no Next, basta criar um arquivo.
Para criar rotas aninhadas, basta criar pastas com arquivos dentro.
Para criar rotas parametrizadas, crie pastas com arquivos seguindo a nomenclatura [nome].tsx
Importante! Se não nomear com export default as rotas não funcionam corretamente.
jemluz
commented
9 months ago Se no React tudo era um componente, o Next levou isso ainda mais a sério e transformou até o HTML de entrada em um componente tbm ;-; coitado. Conheçam o _document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="en">
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}Não tem muito segredo, assim como em outros frameworks, ainda é desejado manter nosso "index" enxuto ao máximo, então lembre-se de só colocar algo nele se for necessário ser carregado em toda aplicação!
A tag <Main> é correspondente a velha <div id="app" />.
A tag <NextScript /> é correspondente a velha tag script que carrega o js do framework.
Atributos de tags devem ser escritos com camelCase e ser declarativos (receber valor)
Conhecendo o Next.js
Server Side Rendering
Ao invés do usuário acessar diretamente o frontend da aplicação, ele irá acessar um backend, que é o Next.js. O next.js é um servidor escrito em node, para trabalhar com frontend. React é código js, Node interpreta codigo js tbm. Isso é performático.
O servidor next irá se comunicar com os backends "verdadeiros". Isso permite que os dados sejam carregados de modo independente da interface frontend. Ou seja, não precisa mais ficar esperando o front carregar para dar inicio as requisições que irão alimentar a aplicação.
Escreva sobre SSG qnd for atrás de aplicaçoes de grande escala