Starting out all 3 written

app/layout.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14export const metadata = {
  title: 'Shelf',
  description: 'A small app for the Next.js course',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <div data-layout="root">{children}</div>
      </body>
    </html>
  );
}

app/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14import { version } from 'react';
import ClientVersion from './ClientVersion';

export default function Home() {
  return (
    <main>
      <h1>Hello from the server</h1>
      <p>
        Rendered by React <span data-where="server">{version}</span> on the server, and by React{' '}
        <ClientVersion /> in a client component.
      </p>
    </main>
  );
}

home.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13const base = process.env.BASE_URL;
const res = await fetch(base + '/');
const html = await res.text();

console.log(res.status, res.headers.get('content-type'));
console.log(html.match(/<h1>.*?<\/h1>/)[0]);
console.log(html.match(/<title>.*?<\/title>/)[0]);

check('status', res.status, 200);
check('content type', res.headers.get('content-type'), 'text/html; charset=utf-8');
check('the page content is in the HTML', html.includes('<h1>Hello from the server</h1>'), true);
check('the title comes from the layout', html.includes('<title>Shelf</title>'), true);
check('React payload for the browser is in the same response', html.includes('self.__next_f.push'), true);

app/api/hello/route.js

1
2
3export function GET() {
  return Response.json({ hello: 'world' });
}

endpoints.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18const base = process.env.BASE_URL;

const api = await fetch(base + '/api/hello');
console.log(api.status, api.headers.get('content-type'));
const body = await api.json();
console.log(body);

const file = await fetch(base + '/hello.txt');
console.log(file.status, file.headers.get('content-type'));
console.log((await file.text()).trim());

const missing = await fetch(base + '/nope');
console.log(missing.status);

check('a route handler answers with JSON', body, { hello: 'world' });
check('as application/json', api.headers.get('content-type'), 'application/json');
check('a file in public/ is served from the root', file.status, 200);
check('an address with no file behind it is a 404', missing.status, 404);

app/ClientVersion.js

1
2
3
4
5
6
7'use client';

import { version } from 'react';

export default function ClientVersion() {
  return <span data-where="client">{version}</span>;
}

react-version.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18import { readFileSync } from 'node:fs';

const html = await (await fetch(process.env.BASE_URL + '/')).text();
const pick = (where) => new RegExp('data-where="' + where + '">([^<]+)<').exec(html)[1];
const server = pick('server');
const client = pick('client');
const installed = JSON.parse(
  readFileSync(process.env.APP_DIR + '/node_modules/react/package.json', 'utf8'),
).version;

console.log('server component: ', server);
console.log('client component: ', client);
console.log('node_modules/react:', installed);

check('server and client components render with the same React', server, client);
check('node_modules/react is what package.json asks for', installed, '19.2.7');
check('the App Router does not use that copy', server !== installed, true);
check('it uses a canary build of React 19', /^19\.\d+\.\d+-canary-/.test(server), true);

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14{
  "name": "app",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "16.3.1",
    "react": "19.2.7",
    "react-dom": "19.2.7"
  }
}

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;

app/layout.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14export const metadata = {
  title: 'Shelf',
  description: 'A small app for the Next.js course',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <div data-layout="root">{children}</div>
      </body>
    </html>
  );
}

app/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14import { version } from 'react';
import ClientVersion from './ClientVersion';

export default function Home() {
  return (
    <main>
      <h1>Hello from the server</h1>
      <p>
        Rendered by React <span data-where="server">{version}</span> on the server, and by React{' '}
        <ClientVersion /> in a client component.
      </p>
    </main>
  );
}

project.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 { readdirSync, readFileSync, statSync } from 'node:fs';

const root = process.env.APP_DIR;

function tree(dir, prefix = '') {
  const lines = [];
  for (const name of readdirSync(dir).sort()) {
    if (name === 'node_modules' || name === '.next') continue;
    const dirp = statSync(dir + '/' + name).isDirectory();
    lines.push(prefix + name + (dirp ? '/' : ''));
    if (dirp) lines.push(...tree(dir + '/' + name, prefix + '  '));
  }
  return lines;
}

const lines = tree(root);
console.log(lines.join('\n'));

const pkg = JSON.parse(readFileSync(root + '/package.json', 'utf8'));
const next = JSON.parse(readFileSync(root + '/node_modules/next/package.json', 'utf8'));
console.log(pkg.scripts);
console.log('installed next:', next.version);

const served = await (await fetch(process.env.BASE_URL + '/hello.txt')).text();
const direct = await fetch(process.env.BASE_URL + '/public/hello.txt');

check('the project has an app folder with a root layout and page', lines.includes('app/') && lines.includes('  layout.js') && lines.includes('  page.js'), true);
check('and a public folder', lines.includes('public/'), true);
check('the three scripts are next dev, next build and next start', pkg.scripts, { dev: 'next dev', build: 'next build', start: 'next start' });
check('the installed Next.js', next.version, '16.3.1');
check('public/hello.txt is served from the root', served, readFileSync(root + '/public/hello.txt', 'utf8'));
check('and not from /public', direct.status, 404);

app/page.js

1
2
3
4
5
6
7export default function Home() {
  return (
    <main>
      <h1>Hello from next dev</h1>
    </main>
  );
}

dev.mjs

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

const base = process.env.BASE_URL;

async function timed(path) {
  const started = performance.now();
  const res = await fetch(base + path);
  await res.text();
  return { status: res.status, ms: performance.now() - started };
}

const first = await timed('/');
const second = await timed('/');
const about = await timed('/about');

console.log('GET /      ', first.status);
console.log('GET / again', second.status);
console.log('GET /about ', about.status);
console.log('the first request took more than three times the second:', first.ms > second.ms * 3);
console.log('.next holds:', readdirSync(process.env.APP_DIR + '/.next').sort().join(' '));

check('every request was answered', [first.status, second.status, about.status], [200, 200, 200]);
check('next dev keeps its files in .next/dev and nothing else', readdirSync(process.env.APP_DIR + '/.next').sort(), ['dev']);
check('the first request had to compile', first.ms > second.ms * 3, true);

inspect.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15import { readFileSync, statSync } from 'node:fs';

const root = process.env.APP_DIR;
const id = readFileSync(root + '/.next/BUILD_ID', 'utf8');
const routes = Object.keys(JSON.parse(readFileSync(root + '/.next/prerender-manifest.json', 'utf8')).routes).sort();
const swc = statSync(root + '/node_modules/@next/swc-darwin-x64/next-swc.darwin-x64.node');

console.log('build id characters:', id.length);
console.log('prerendered:', routes.join(' '));
console.log('native compiler is a file of more than a megabyte:', swc.size > 1_000_000);

check('the build wrote an id of 21 characters', id.length, 21);
check('it prerendered the static pages of lessons 1 to 4', ['/', '/_global-error', '/_not-found', '/about', '/dashboard', '/dashboard/settings'].map((r) => routes.includes(r)), [true, true, true, true, true, true]);
check('and not the route handler', routes.includes('/api/hello'), false);
check('the compiler is the native binary that came with the vendored tree', swc.size > 1_000_000, true);

app/about/page.js

1
2
3
4
5
6
7
8export default function About() {
  return (
    <main>
      <h1>About</h1>
      <p>This page is a file at app/about/page.js.</p>
    </main>
  );
}

start.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15import { readFileSync } from 'node:fs';

const base = process.env.BASE_URL;
const a = await (await fetch(base + '/about')).text();
const res = await fetch(base + '/about');
const b = await res.text();

const help = readFileSync(process.env.APP_DIR + '/node_modules/next/dist/bin/next', 'utf8');

console.log(res.status, 'cache-control:', res.headers.get('cache-control'));
console.log('the same page twice:', a === b);

check('a static page is the same on every request', a === b, true);
check('and is served with a long shared-cache lifetime', res.headers.get('cache-control'), 's-maxage=31536000');
check('the hostname flag defaults to every interface', help.includes('Specify a hostname on which to start the application (default: 0.0.0.0).'), true);