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.
Next.js Black Belt
Nov 2021
Atila Fassina
11 years
Brazilian in Germany
Tech Lead
architecture
CDN
Serverless
Server
Boot up
Build
Deploy
Stop
JavaScript, APIs, Mark-up
Jamstack
Edge
Boot up
Deliver
Cache
Stop
JavaScript, APIs, Mark-up
Jamstack
TL;DR
no long standing process
Jamstack
Deploy
merge, build, deploy
Data and Rendering
getStaticPaths
getStaticProps
getServerSideProps
SSPR / SSG / ISR
SSR
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
render time of the largest image or text block visible within the viewport.
FID
First Input Delay
time from when the user interacts with the page, to when browser is able to process the request
Cumulative Layout Shift
the total sum of all individual layout shifts for every one that occurs in the lifespan of the page
CLS
Performance and Web Vitals
Measure
`reportWebVitals`
built-in method in Next.js
Report Web Vitals
export function reportWebVitals(metric) {
switch (metric.name) {
case 'FCP':
// handle FCP results
break
case 'LCP':
// handle LCP results
break
case 'CLS':
// handle CLS results
break
case 'FID':
// handle FID results
break
case 'TTFB':
// handle TTFB results
break
default:
break
}
}custom metrics
Report Web Vitals
export function reportWebVitals(metric) {
switch (metric.name) {
case 'Next.js-hydration':
// handle hydration results
break
case 'Next.js-route-change-to-render':
// handle route-change to render results
break
case 'Next.js-render':
// handle render results
break
default:
break
}
}metric object
Report Web Vitals
type Metric = {
id: string
name: string
startTime: number
value: number
label: 'web-vital' | 'custom'
}- id: unique identifier per page load
- name: metric name
- startTime: milliseconds
- value: duration in milliseconds
- label: metric type
Platforms
Caveats
Fallback Pages
Incremental Static Regeneration
`revalidate` in `getStaticProps` is not fully supported
revalidate flag in getStaticProps is not fully supported
Styles
Styled-JSX
CSS Modules
TailwindCSS
CSS imports
PostCSS
CSS-in-JS
Global
Component
Tailwind
JIT Compiler
PostCSS
Design System
Tailwind config
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Get started
yarn create next-app --typescriptgit clone https://github.com/atilafassina/worknet.gitNext.js Black Belt
By Atila
