Atila
I'm on a mission to make code simple. When not recording screencasts or courses, you may find me either writing and talking about jamstack, performance, or developer tooling.
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
