🤯

Next.js TILs

speed-run

sp

speed-run

🐢

config type-check

/** @type {import('next').NextConfig} */
module.exports = {
  /* ... */
}

⚗️

experimental

export interface ExperimentalConfig {
  newNextLinkBehavior?: boolean;
  swcMinify?: boolean;
  nextScriptWorkers?: boolean;
  reactMode?: 'legacy' | 'concurrent' | 'blocking';
  externalDir?: boolean;
  serverComponents?: boolean;
  urlImports?: NonNullable<
      webpack5.Configuration['experiments']
    >['buildHttp'];
  /*...*/
}

🎖

Rendering Strategies

SSG || SSR

export function async get---Props () {
  const src1 = await fetchSomething()
  const src2 = await fetchOtherThing()
  const src3 = await OmgAnotherRequest()
    
  return {
    props: {
      data: { src1, src2, src3 }
    }
  }
}

SSG

{
  props: {
    data: { src1, src2, src3 }
  }
}

Built time

goes to static file

SSR

{
  props: {
    data: { src1, src2, src3 }
  }
}

Cold navigation

renders on the server-side

{
  props: {
    data: { src1, src2, src3 }
  }
}

Client-side

fetches from single endpoint

Lazy SSG

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: 'blocking',
  }
}

export async function getStaticProps() {
  const data = fetchYourStuff()

  return {
    props: data
  }
}
[slug].jsx

46s deploy

1001 routes

🥸

Response Headers

#useThePlatform

import { NextResponse } from 'next/server'

export function middleware() {
  const response = NextResponse.next()

  response.headers.set('x-modified-edge', 'true')

  return response
}
import { NextRequest, NextResponse } from 'next/server'

const PUBLIC_FILE = /\.(.*)$/

export function middleware(request: NextRequest) {
  const shouldHandleLocale =
    !PUBLIC_FILE.test(request.nextUrl.pathname) &&
    !request.nextUrl.pathname.includes('/api/') &&
    request.nextUrl.locale === 'default'

  return shouldHandleLocale
    ? NextResponse.redirect(`/en${request.nextUrl.href}`)
    : undefined
}

Prefix default locale

🦄

Less common cases

🫠

URL Imports

MiCrOfRoNtEnDs

const nextConfig = {
  reactStrictMode: true,
  outputFileTracing: false,
  experimental: {
    urlImports: [
      'https://cdn.skypack.dev/'
    ],
  },
  /*..*/
}
import confetti from 'https://cdn.skypack.dev/canvas-confetti'

🫶

Multi-Zones

❄️ All pages should be unique across zones

👮‍♂️ main app includes the rewrites to all other apps

🧭 secondary zones set basePath to their own main route

🏯

Honorable mentions

Priority Images

<Image
  src={ginormousPrismicLogo}
  priority
  placeholder="blur"
  alt="Prismic logo"
  quality={100}
/>

ExternalDir modules

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    externalDir: true
  }
};

module.exports = nextConfig;

ExternalDir modules

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@layouts/*": ["layouts/*"],
      "@components/*": ["components/*"],
      "@config/*": ["config/*"],
      "@locales/*": ["locales/*"],
      "@shared/*": ["../../shared/*"],
      "@styles/*": ["styles/*"],
      "@utils/*": ["utils/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "next.config.js",
    "../../shared/components/*.tsx"
  ],
  "exclude": ["node_modules"]
}

Q&A

Can Next.js do that?!

By Atila

Can Next.js do that?!

  • 454