Projeto Next.js

Dez 2021

Atila Fassina

11 anos de código

Tech Lead @ SAP

Atila Fassina

2011: Formação - Educação Física

2015: Alemanha

2013: Front-in POA

2014: Terra Networks

2012: SENAC - Semana Acadêmica

2019: Nova Zelândia

2019: Alemanha

Atila Fassina

N26

convenções

slug.tsx

/api/slug.ts

_document.tsx

roda sempre que navegação atinge servidor

cria as rotas

cria um endpoint para uma API RESTful

inicializa toda rota

_app.tsx

slug.tsx

/api/slug.ts

_document.tsx

_app.tsx

Data fetching

`getStaticProps`

`getStaticPaths`

`getServerSideProps`

`getInitialProps` ⚠️

props durante tempo de  build

paths para rotas dinâmicas

props para cada request

getServerSideProps

navegação no cliente

faz uma requisição para o servidor pra ter as  `props`

roda apenas no servidor

request para o servidor

renderiza a página de novo no servidor

getStaticProps

dados seriealizados

gera um JSON com o resultado e adiciona na bundle

roda apenas durante build

revalidate

quando passado, renderiza a página de novo automaticamente após o intervalo determinado

getStaticPaths

Rotas dinâmicas

páginas para todas não determinadas

ex.: `[slug].jsx`

pra rotas dinâmicas

fallback

false:  rotas não existentes retornam `404`

blocking:  renderiza páginas sob demanda

true:  serve uma versão fallback para rotas não renderizadas

Page layouts

Composição

const MyWrapperComponent = ({ children, ...otherProps }) => (
  <>
    {children}
    <span>{otherProps?.title}</span>
  </>
)

Web Vitals

Time to First Byte

First Contentful Paint

Largest Contentful Paint

First Input Delay

Time to Interactive

Total Blocking Time

Cumulative Layout Shift

LCP

Largest Contentful Paint

tempo para renderizar a maior imagem ou bloco de texto visível

FID

First Input Delay

tempo de demora para que a interface consiga responder às interações do usuário

Cumulative Layout Shift

soma de todas as alterações de layout que acontecem numa página em determinado intervalo de tempo

CLS

Performance e Web Vitals

Medir

`reportWebVitals`

Estilos

Styled-JSX
CSS Modules
TailwindCSS
CSS imports
PostCSS
CSS-in-JS

Global

Componentes

Projeto

Full Stack Social - Next.js

By Atila

Full Stack Social - Next.js

  • 74