Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fundamentos do Next.js #1

Open
jemluz opened this issue Nov 22, 2023 · 2 comments
Open

Fundamentos do Next.js #1

jemluz opened this issue Nov 22, 2023 · 2 comments
Assignees
@jemluz
Labels
documentation Improvements or additions to documentation

Comments

@jemluz
Copy link
Owner

jemluz commented Nov 22, 2023 •
edited
Loading

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 jemluz added the documentation Improvements or additions to documentation label Nov 22, 2023
@jemluz jemluz self-assigned this Nov 22, 2023
@jemluz
Copy link
Owner Author

jemluz commented Nov 22, 2023 •
edited
Loading

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
Copy link
Owner Author

jemluz commented Nov 22, 2023

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)

jemluz added a commit that referenced this issue Nov 23, 2023
@jemluz
Fundamentos do Next.js - Criando rotas da aplicação
c8d577a 
- see notes at (#1)[#1]
jemluz added a commit that referenced this issue Nov 23, 2023
@jemluz
Fundamentos do Next.js - Criando rotas da aplicação
facae70 
- see notes at issue #1
jemluz added a commit that referenced this issue Nov 23, 2023
@jemluz
Configurando documento HTML
bea298a 
- see notes at issue #1 (Fundamentos do Next.js)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jemluz jemluz

Labels
documentation Improvements or additions to documentation
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@jemluz