search

jemluz / ignite-shop

An intermediate project to deepen knowledge in NextJS and scalability (by @rocketseat)
https://jemluz-ignite-shop.vercel.app/
1 stars 0 forks source link

Fundamentos do Next.js #1

Open jemluz opened 1 year ago

jemluz commented 1 year ago

Conhecendo o Next.js

image

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

jemluz commented 1 year ago

Rotas e parametros

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

image

Importante! Se não nomear com export default as rotas não funcionam corretamente.

jemluz commented 1 year ago

Configurando documento HTML (entendendo o _document.tsx)

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 image 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)