Next.js Black Belt

Nov 2021

@AtilaFassina

Atila Fassina

11 years

Brazilian in Germany

Tech Lead

/youtube

/twitter

/linkedin

/github

@AtilaFassina

architecture

CDN

Serverless

@AtilaFassina

Server

Boot up

Build

Deploy

Stop

JavaScript, APIs, Mark-up

Jamstack

@AtilaFassina

Edge

Boot up

Deliver

Cache

Stop

JavaScript, APIs, Mark-up

Jamstack

@AtilaFassina

TL;DR

no long standing process

Jamstack

Deploy

@AtilaFassina

merge, build, deploy

Data and Rendering

@AtilaFassina

getStaticPaths

getStaticProps

getServerSideProps

SSPR / SSG / ISR

SSR

Web Vitals

@AtilaFassina

Time to First Byte

First Contentful Paint

Largest Contentful Paint

First Input Delay

Time to Interactive

Total Blocking Time

Cumulative Layout Shift

web.dev/metrics

LCP

@AtilaFassina

web.dev/lcp

Largest Contentful Paint

render time of the largest image or text block visible within the viewport.

FID

@AtilaFassina

web.dev/fid

First Input Delay

time from when the user interacts with the page, to when browser is able to process the request

@AtilaFassina

web.dev/cls

Cumulative Layout Shift

the total sum of all individual layout shifts for every one that occurs in the lifespan of the page

CLS

@AtilaFassina

web.dev/measure

Performance and Web Vitals

Measure

webpagetest.org

`reportWebVitals`

@AtilaFassina

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
  }
}

@AtilaFassina

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
  }
}

@AtilaFassina

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

@AtilaFassina

Caveats

@AtilaFassina

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

@AtilaFassina

Tailwind

JIT Compiler

PostCSS

@AtilaFassina

Design System

Tailwind config

@AtilaFassina

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

tailwind default config

Get started

@AtilaFassina

github.com/atilafassina/worknet

yarn create next-app --typescript

git clone https://github.com/atilafassina/worknet.git