Configuration and assets all 4 written

dot-env

1
2
3
4
5# Read by next build, next start and next dev.
APP_GREETING=hello from .env
SHARED_VALUE=from .env
LEVEL=from .env
NEXT_PUBLIC_SHELF_NAME=Shelf (from .env)

dot-env.production

1
2
3# Read by next build and next start only, and wins over .env.
SHARED_VALUE=from .env.production
LEVEL=from .env.production

dot-env.local

1
2# Read in every mode except test, and wins over .env.production.
LEVEL=from .env.local

app/env/client/ShelfName.js

1
2
3
4
5'use client';

export default function ShelfName() {
  return <p data-shelf-name>{process.env.NEXT_PUBLIC_SHELF_NAME}</p>;
}

inlined.mjs

1
2
3
4
5
6
7
8
9
10
11import { readdirSync, readFileSync } from 'node:fs';
const chunks = readdirSync(process.env.APP_DIR + '/.next/static/chunks', { recursive: true, withFileTypes: true })
  .filter((entry) => entry.isFile() && entry.name.endsWith('.js'))
  .map((entry) => readFileSync(entry.parentPath + '/' + entry.name, 'utf8'));
const inChunks = (text) => chunks.some((chunk) => chunk.includes(text));
console.log('client chunks searched:', chunks.length > 0);
console.log('public value in a client chunk: ', inChunks('Shelf (from .env)'));
console.log('server value in a client chunk:  ', inChunks('hello from .env'));
check('there are client chunks to search', chunks.length > 0, true);
check('the NEXT_PUBLIC_ value was written into the code sent to browsers', inChunks('Shelf (from .env)'), true);
check('a server-only value was not', inChunks('hello from .env'), false);

app/env/page.js

1
2
3
4
5
6
7
8
9
10
11
12import { connection } from 'next/server';

export default async function Env() {
  await connection();
  return (
    <main data-page="env">
      <p data-greeting>{process.env.APP_GREETING}</p>
      <p data-shared>{process.env.SHARED_VALUE}</p>
      <p data-level>{process.env.LEVEL}</p>
    </main>
  );
}

order.mjs

1
2
3
4
5
6
7
8
9
10const base = process.env.BASE_URL;
const page = async (path) => (await fetch(base + path)).text();
const text = (html, name) => new RegExp('<p data-' + name + '[^>]*>(.*?)</p>').exec(html)[1];
const env = await page('/env');
console.log('GET /env  APP_GREETING:', text(env, 'greeting'));
console.log('GET /env  SHARED_VALUE:', text(env, 'shared'));
console.log('GET /env  LEVEL:       ', text(env, 'level'));
check('a value only .env has comes from .env', text(env, 'greeting'), 'hello from .env');
check('.env.production wins over .env', text(env, 'shared'), 'from .env.production');
check('.env.local wins over .env.production', text(env, 'level'), 'from .env.local');

app/env/baked/page.js

1
2
3
4
5
6
7
8// No request API is used, so this page is rendered once, at build time.
export default function Baked() {
  return (
    <main data-page="env-baked">
      <p data-greeting>{process.env.APP_GREETING}</p>
    </main>
  );
}

runtime.mjs

1
2
3
4
5
6
7
8
9
10
11
12const base = process.env.BASE_URL;
const page = async (path) => (await fetch(base + path)).text();
const text = (html, name) => new RegExp('<p data-' + name + '[^>]*>(.*?)</p>').exec(html)[1];
const env = await page('/env');
const baked = await page('/env/baked');
const client = await page('/env/client');
console.log('GET /env         APP_GREETING:', text(env, 'greeting'));
console.log('GET /env/baked   APP_GREETING:', text(baked, 'greeting'));
console.log('GET /env/client  NEXT_PUBLIC_SHELF_NAME:', text(client, 'shelf-name'));
check('a page that runs per request sees the variable set when next start began', text(env, 'greeting'), 'hello from the shell');
check('a page built ahead kept the value it had at build time', text(baked, 'greeting'), 'hello from .env');
check('the public variable was not touched', text(client, 'shelf-name'), 'Shelf (from .env)');

public.mjs

1
2
3
4
5const base = process.env.BASE_URL;
const client = await (await fetch(base + '/env/client')).text();
const name = /<p data-shelf-name[^>]*>(.*?)<\/p>/.exec(client)[1];
console.log('GET /env/client  NEXT_PUBLIC_SHELF_NAME:', name);
check('a NEXT_PUBLIC_ variable set later does not change what was built in', name, 'Shelf (from .env)');

next.config.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16/** @type {import('next').NextConfig} */
const nextConfig = {
  // Stop sending the x-powered-by: Next.js header.
  poweredByHeader: false,
  // A permanent redirect decided by configuration, before any page is looked for.
  async redirects() {
    return [{ source: '/shelf', destination: '/books', permanent: true }];
  },
  // Extra response headers for the addresses that match.
  async headers() {
    return [{ source: '/about', headers: [{ key: 'x-shelf-config', value: 'set in next.config.mjs' }] }];
  },
  // Lesson 24: the image optimiser only produces the qualities listed here.
  images: { qualities: [60, 75] },
};
export default nextConfig;

config.mjs

1
2
3
4
5
6
7
8
9
10const base = process.env.BASE_URL;
const get = (path) => fetch(base + path, { redirect: 'manual' });
const shelf = await get('/shelf');
const about = await get('/about');
console.log('/shelf ->', shelf.status, new URL(shelf.headers.get('location'), base).pathname);
console.log('/about  x-shelf-config:', about.headers.get('x-shelf-config'));
console.log('/about  x-powered-by:  ', about.headers.get('x-powered-by'));
check('a configured redirect is permanent', [shelf.status, new URL(shelf.headers.get('location'), base).pathname], [308, '/books']);
check('configured headers are on the matching address', about.headers.get('x-shelf-config'), 'set in next.config.mjs');
check('poweredByHeader: false removed x-powered-by', about.headers.get('x-powered-by'), null);

app/meta/layout.js

1
2
3
4
5
6
7
8
9
10// A layout's metadata is the default for every page under it; the template wraps their titles.
export const metadata = {
  metadataBase: new URL('http://localhost'),
  title: { template: '%s | Shelf', default: 'Shelf notes' },
  description: 'Set by the meta layout.',
};

export default function MetaLayout({ children }) {
  return <section data-section="meta">{children}</section>;
}

app/meta/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18// Static metadata: an object, known at build time.
export const metadata = {
  title: 'Static metadata',
  description: 'A page whose title is a fixed string.',
  alternates: { canonical: '/meta' },
  openGraph: { title: 'Static metadata (for link previews)', type: 'website' },
};

export default function Page() {
  // Structured data for search engines is a script tag the page renders itself.
  const jsonLd = { '@context': 'https://schema.org', '@type': 'WebPage', name: 'Static metadata' };
  return (
    <main>
      <h1>Static metadata</h1>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c') }} />
    </main>
  );
}

static.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24const base = process.env.BASE_URL;
const html = await (await fetch(base + '/meta')).text();
const first = (pattern) => (pattern.exec(html) || [])[1];

const title = first(/<title>([^<]*)<\/title>/);
const description = first(/<meta name="description" content="([^"]*)"/);
const canonical = first(/<link rel="canonical" href="([^"]*)"/);
const ogTitle = first(/<meta property="og:title" content="([^"]*)"/);
const twitterCard = first(/<meta name="twitter:card" content="([^"]*)"/);
const jsonLd = JSON.parse(first(/<script type="application\/ld\+json">([^<]*)<\/script>/));

console.log('title:      ', title);
console.log('description:', description);
console.log('canonical:  ', canonical);
console.log('og:title:   ', ogTitle);
console.log('twitter:card', twitterCard);
console.log('json-ld:    ', JSON.stringify(jsonLd['@type']), jsonLd.name);

check('the title is the string the page exported, without the layout template', title, 'Static metadata');
check('the description is the page\u2019s, not the layout\u2019s', description, 'A page whose title is a fixed string.');
check('the canonical address was resolved against metadataBase', canonical, 'http://localhost/meta');
check('Open Graph tags came from the openGraph object', ogTitle, 'Static metadata (for link previews)');
check('and a Twitter card tag came with them', twitterCard, 'summary');
check('the JSON-LD script is valid JSON about the page', [jsonLd['@type'], jsonLd.name, jsonLd['@context'].endsWith('schema.org')], ['WebPage', 'Static metadata', true]);

app/meta/[slug]/page.js

1
2
3
4
5
6
7
8
9
10// Dynamic metadata: a function that gets the same params as the page, as a Promise.
export async function generateMetadata({ params }) {
  const { slug } = await params;
  return { title: `Book: ${slug}`, description: `Everything about ${slug}.` };
}

export default async function Page({ params }) {
  const { slug } = await params;
  return <h1>{`Book: ${slug}`}</h1>;
}

dynamic.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16const base = process.env.BASE_URL;
const read = async (agent) => {
  const html = await (await fetch(base + '/meta/dracula', { headers: { 'user-agent': agent } })).text();
  return {
    title: (/<title>([^<]*)<\/title>/.exec(html) || [])[1],
    description: (/<meta name="description" content="([^"]*)"/.exec(html) || [])[1],
  };
};
const browser = await read('Mozilla/5.0 (course browser)');
const crawler = await read('Googlebot/2.1');
console.log('browser :', browser.title, '|', browser.description);
console.log('crawler :', crawler.title, '|', crawler.description);
check('generateMetadata made the title from the params, and the layout template wrapped it', browser.title, 'Book: dracula | Shelf');
check('and the description', browser.description, 'Everything about dracula.');
check('a crawler\u2019s user agent gets the same title in the HTML', crawler.title, 'Book: dracula | Shelf');
check('and the same description', crawler.description, 'Everything about dracula.');

app/robots.js

1
2
3
4
5
6
7// app/robots.js becomes /robots.txt.
export default function robots() {
  return {
    rules: [{ userAgent: '*', allow: '/', disallow: '/account' }],
    sitemap: 'http://localhost/sitemap.xml',
  };
}

app/sitemap.js

1
2
3
4
5
6
7// app/sitemap.js becomes /sitemap.xml.
export default function sitemap() {
  return [
    { url: 'http://localhost/', lastModified: new Date('2026-01-01T00:00:00Z') },
    { url: 'http://localhost/meta', lastModified: new Date('2026-02-01T00:00:00Z') },
  ];
}

files.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17const base = process.env.BASE_URL;
const robots = await fetch(base + '/robots.txt');
const robotsText = await robots.text();
const sitemap = await fetch(base + '/sitemap.xml');
const sitemapText = await sitemap.text();
console.log(robots.status, robots.headers.get('content-type'));
console.log(robotsText.trim());
console.log(sitemap.status, sitemap.headers.get('content-type'));
console.log(sitemapText.trim());

const locs = [...sitemapText.matchAll(/<loc>([^<]*)<\/loc>/g)].map((m) => m[1]);
check('robots.js is served as plain text at /robots.txt', [robots.status, robots.headers.get('content-type')], [200, 'text/plain']);
check('with the rules the function returned', robotsText.split('\n').filter(Boolean), ['User-Agent: *', 'Allow: /', 'Disallow: /account', 'Sitemap: http://localhost/sitemap.xml']);
check('sitemap.js is served as XML at /sitemap.xml', [sitemap.status, sitemap.headers.get('content-type')], [200, 'application/xml']);
check('with one <loc> for each entry', locs, ['http://localhost/', 'http://localhost/meta']);
check('and the dates it was given, as ISO strings', [...sitemapText.matchAll(/<lastmod>([^<]*)<\/lastmod>/g)].map((m) => m[1]), ['2026-01-01T00:00:00.000Z', '2026-02-01T00:00:00.000Z']);
check('both were made at build time and are served from the cache', [robots.headers.get('x-nextjs-cache'), sitemap.headers.get('x-nextjs-cache')], ['HIT', 'HIT']);

app/images/page.js

1
2
3
4
5
6
7
8
9
10
11import Image from 'next/image';

export default function Page() {
  return (
    <main>
      <h1>Images</h1>
      <Image src="/shelf.png" alt="Five books on a shelf" width={120} height={80} />
      <Image src="/shelf.png" alt="The same shelf, high priority" width={120} height={80} priority quality={60} sizes="120px" />
    </main>
  );
}

scripts/make-png.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47// Writes public/shelf.png: a 120 x 80 picture of five books standing on a shelf, drawn pixel
// by pixel and encoded with node:zlib. It is run by hand, once; the file it wrote is in the
// project. Nothing here needs a package, and nothing here touches the network.
import { crc32, deflateSync } from 'node:zlib';
import { writeFileSync } from 'node:fs';

const WIDTH = 120;
const HEIGHT = 80;
const BOOKS = [[200, 60, 60], [60, 120, 200], [230, 180, 50], [70, 160, 100], [150, 90, 180]];

function pixel(x, y) {
  if (y >= 70) return [120, 80, 50]; // the shelf board
  const book = Math.floor((x - 10) / 20);
  const top = 70 - (30 + book * 7); // taller books to the right
  if (x >= 10 && x < 110 && y >= top && (x - 10) % 20 < 18) return BOOKS[book];
  return [245, 240, 230]; // the wall
}

function chunk(type, data) {
  const body = Buffer.concat([Buffer.from(type, 'latin1'), data]);
  const out = Buffer.alloc(body.length + 8);
  out.writeUInt32BE(data.length, 0);
  body.copy(out, 4);
  out.writeUInt32BE(crc32(body), body.length + 4);
  return out;
}

const header = Buffer.alloc(13);
header.writeUInt32BE(WIDTH, 0);
header.writeUInt32BE(HEIGHT, 4);
header.set([8, 2, 0, 0, 0], 8); // 8 bits, RGB, deflate, no filter scheme, no interlace

const rows = Buffer.alloc((WIDTH * 3 + 1) * HEIGHT);
for (let y = 0; y < HEIGHT; y++) {
  const start = y * (WIDTH * 3 + 1);
  rows[start] = 0; // filter type "none"
  for (let x = 0; x < WIDTH; x++) rows.set(pixel(x, y), start + 1 + x * 3);
}

const png = Buffer.concat([
  Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
  chunk('IHDR', header),
  chunk('IDAT', deflateSync(rows, { level: 9 })),
  chunk('IEND', Buffer.alloc(0)),
]);
writeFileSync(new URL('../public/shelf.png', import.meta.url), png);
console.log('wrote public/shelf.png,', png.length, 'bytes');

markup.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32import { existsSync, readFileSync } from 'node:fs';

const base = process.env.BASE_URL;
const html = await (await fetch(base + '/images')).text();
const png = readFileSync(process.env.APP_DIR + '/public/shelf.png');
const decode = (text) => text.replace(/&/g, '&');
const attr = (tag, name) => {
  const m = new RegExp(' ' + name + '="([^"]*)"').exec(tag);
  return m ? decode(m[1]) : null;
};
const [normal, priority] = html.match(/<img[^>]*>/g);
const entries = attr(normal, 'srcSet').split(', ');
const widths = attr(priority, 'srcSet').split(', ').map((entry) => /w=(\d+)/.exec(entry)[1]);
const preload = /<link rel="preload" as="image"[^>]*>/.test(html);

console.log('the file:        ', png.readUInt32BE(16), 'x', png.readUInt32BE(20), 'pixels');
console.log('first image:     ', attr(normal, 'width'), 'x', attr(normal, 'height'), 'loading=' + attr(normal, 'loading'));
console.log('its srcSet:      ', entries.map((entry) => entry.replace('/_next/image?url=%2Fshelf.png&', '')).join(' | '));
console.log('second image:    ', 'loading=' + attr(priority, 'loading'), 'preload link in the page:', preload);
console.log('with sizes:      ', widths.length, 'widths, from', widths[0], 'to', widths.at(-1));

check('the file is a PNG of 120 x 80 pixels', [png.subarray(1, 4).toString(), png.readUInt32BE(16), png.readUInt32BE(20)], ['PNG', 120, 80]);
check('the img carries the size it was given, so the page does not jump', [attr(normal, 'width'), attr(normal, 'height')], ['120', '80']);
check('and loads lazily by default', attr(normal, 'loading'), 'lazy');
check('its src is the optimiser\u2019s address, not the file', attr(normal, 'src').startsWith('/_next/image?url=%2Fshelf.png'), true);
check('its srcSet has one address for 1x screens and one for 2x', entries.map((entry) => entry.split(' ')[1]), ['1x', '2x']);
check('at the first configured widths that are at least 120 and 240 pixels', entries.map((entry) => /w=(\d+)/.exec(entry)[1]), ['128', '256']);
check('priority takes lazy loading away', attr(priority, 'loading'), null);
check('and puts a preload link for the image in the page', preload, true);
check('with sizes, the srcSet lists every configured width', [widths.length, widths[0], widths.at(-1)], [15, '32', '3840']);
check('and the quality prop is in every address', attr(priority, 'srcSet').split(', ').every((entry) => entry.includes('q=60')), true);
check('the native image library that does the work is part of the vendored tree', existsSync(process.env.APP_DIR + '/node_modules/@img/sharp-darwin-x64'), true);

next.config.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16/** @type {import('next').NextConfig} */
const nextConfig = {
  // Stop sending the x-powered-by: Next.js header.
  poweredByHeader: false,
  // A permanent redirect decided by configuration, before any page is looked for.
  async redirects() {
    return [{ source: '/shelf', destination: '/books', permanent: true }];
  },
  // Extra response headers for the addresses that match.
  async headers() {
    return [{ source: '/about', headers: [{ key: 'x-shelf-config', value: 'set in next.config.mjs' }] }];
  },
  // Lesson 24: the image optimiser only produces the qualities listed here.
  images: { qualities: [60, 75] },
};
export default nextConfig;

optimiser.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29import { readFileSync } from 'node:fs';

const base = process.env.BASE_URL;
const ask = async (query, accept) => {
  const res = await fetch(base + '/_next/image?url=%2Fshelf.png&' + query, { headers: { accept } });
  const body = Buffer.from(await res.arrayBuffer());
  return { status: res.status, type: res.headers.get('content-type'), vary: res.headers.get('vary'), csp: res.headers.get('content-security-policy'), body };
};
const webp = await ask('w=128&q=75', 'image/webp');
const png = await ask('w=128&q=75', 'image/png');
const sixty = await ask('w=128&q=60', 'image/webp');
const fifty = await ask('w=128&q=50', 'image/webp');
const huge = await ask('w=3000&q=75', 'image/webp');
const docs = readFileSync(process.env.APP_DIR + '/node_modules/next/dist/docs/01-app/03-api-reference/02-components/image.md', 'utf8');

console.log('Accept webp, w=128 q=75 ->', webp.status, webp.type);
console.log('Accept png,  w=128 q=75 ->', png.status, png.type);
console.log('Accept webp, w=128 q=60 ->', sixty.status);
console.log('Accept webp, w=128 q=50 ->', fifty.status, fifty.body.toString());
console.log('Accept webp, w=3000     ->', huge.status, huge.body.toString());

check('a browser that accepts WebP gets WebP', [webp.status, webp.type, webp.body.subarray(0, 4).toString(), webp.body.subarray(8, 12).toString()], [200, 'image/webp', 'RIFF', 'WEBP']);
check('one that does not gets the original format', [png.status, png.type, png.body.subarray(1, 4).toString()], [200, 'image/png', 'PNG']);
check('the answer depends on the Accept header, and says so', webp.vary, 'Accept');
check('it also forbids scripts in what it serves', webp.csp.includes("script-src 'none'"), true);
check('a quality the configuration lists is served', sixty.status, 200);
check('one it does not list is refused', [fifty.status, fifty.body.toString()], [400, '"q" parameter (quality) of 50 is not allowed']);
check('and so is a width that is not on the ladder', [huge.status, huge.body.toString()], [400, '"w" parameter (width) of 3000 is not allowed']);
check('the vendored documentation says the qualities list is required since version 16', docs.includes('This field is required starting with Next.js 16'), true);

app/styled/layout.js

1
2
3
4
5
6
7
8
9import localFont from 'next/font/local';
import './styled.css';

// The font file is in the project: nothing is fetched, at build time or later.
const inter = localFont({ src: '../fonts/Inter-400.woff2', weight: '400', style: 'normal', display: 'swap' });

export default function StyledLayout({ children }) {
  return <div className={inter.className} data-section="styled">{children}</div>;
}

font.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31import { readFileSync } from 'node:fs';

const base = process.env.BASE_URL;
const html = await (await fetch(base + '/styled')).text();
const get = async (path) => {
  const res = await fetch(base + path);
  return { status: res.status, type: res.headers.get('content-type'), body: Buffer.from(await res.arrayBuffer()) };
};

const preload = /<link rel="preload" href="([^"]*)" as="font" crossorigin="" type="font\/woff2"\/>/.exec(html);
const stylesheets = [...html.matchAll(/<link rel="stylesheet" href="([^"]*)"/g)].map((m) => m[1]);
const css = (await Promise.all(stylesheets.map(async (path) => (await get(path)).body.toString()))).join('\n');
const font = await get(preload[1]);
const file = readFileSync(process.env.APP_DIR + '/app/fonts/Inter-400.woff2');
const fontClass = /<div class="(inter_[^"]*__className)"/.exec(html)[1];

console.log('preload link for a font under /_next/static/media/:', preload[1].startsWith('/_next/static/media/Inter_400'));
console.log('the font answers:', font.status, font.type, font.body.subarray(0, 4).toString());
console.log('same bytes as the file in the project:', font.body.equals(file));
console.log('stylesheets linked:', stylesheets.length);
console.log('@font-face with swap:', css.includes('@font-face') && css.includes('font-display:swap'));
console.log('a fallback face with size-adjust:', css.includes('inter Fallback') && css.includes('size-adjust'));

check('the page preloads a font file hosted under /_next/static/media', [preload[1].startsWith('/_next/static/media/Inter_400'), preload[1].endsWith('.woff2')], [true, true]);
check('the file in the project is the 48,432 bytes the text says', file.length, 48432);
check('the server answers for it with a WOFF2 file', [font.status, font.body.subarray(0, 4).toString()], [200, 'wOF2']);
check('and the bytes are the ones in the project', font.body.equals(file), true);
check('the stylesheet declares the face with the weight and the display setting', ['@font-face{font-family:inter;src:url(../media/Inter_400', 'font-weight:400', 'font-display:swap'].map((part) => css.includes(part)), [true, true, true]);
check('and a metric-matched fallback face, so text does not jump when the font arrives', css.includes('inter Fallback') && css.includes('size-adjust'), true);
check('the class from next/font sets the family with that fallback', css.includes('.' + fontClass + '{font-family:inter,inter Fallback'), true);
check('nothing in the page is loaded from another host', [...html.matchAll(/(?:href|src)="(https?:[^"]*)"/g)].length, 0);

app/styled/styled.css

1
2
3
4/* Global CSS: imported by a layout, applied to the whole page. */
[data-section='styled'] h1 {
  color: rebeccapurple;
}

app/styled/Card.module.css

1
2
3
4
5/* A CSS Module: the class names are made unique for this file. */
.card {
  border: 1px solid #999;
  padding: 8px;
}

app/styled/page.js

1
2
3
4
5
6
7
8
9
10import styles from './Card.module.css';

export default function Page() {
  return (
    <main>
      <h1>Fonts and CSS</h1>
      <p className={styles.card}>A card styled by a CSS Module.</p>
    </main>
  );
}

css.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16const base = process.env.BASE_URL;
const html = await (await fetch(base + '/styled')).text();
const stylesheets = [...html.matchAll(/<link rel="stylesheet" href="([^"]*)"/g)].map((m) => m[1]);
const css = (await Promise.all(stylesheets.map(async (path) => (await fetch(base + path)).text()))).join('\n');
const card = /<p class="(Card-module__[^"]*__card)"/.exec(html)[1];

console.log('stylesheets:', stylesheets.length, stylesheets.every((path) => path.startsWith('/_next/static/chunks/') && path.endsWith('.css')));
console.log('the class in the page looks like Card-module__<hash>__card:', /^Card-module__[\w-]+__card$/.test(card));
console.log('that class is in the stylesheet:', css.includes('.' + card + '{'));
console.log('the global rule is in the stylesheet:', css.includes('[data-section=styled] h1{'));

check('the page links stylesheets under /_next/static/chunks', stylesheets.length > 0 && stylesheets.every((path) => path.startsWith('/_next/static/chunks/') && path.endsWith('.css')), true);
check('a CSS Module class was renamed, and the page uses the new name', /^Card-module__[\w-]+__card$/.test(card), true);
check('the stylesheet has a rule for that name and the file\u2019s declarations', css.includes('.' + card + '{border:1px solid #999;padding:8px}'), true);
check('the global rule is in a stylesheet', css.includes('[data-section=styled] h1{'), true);
check('and was minified: the colour name in the source became a short hex code', [css.includes('rebeccapurple'), css.includes('color:#639')], [false, true]);