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
next-black Created with Sketch.

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 --typescript
git clone https://github.com/atilafassina/worknet.git

Next.js Black Belt

By Atila

Next.js Black Belt

  • 388