Routing all 4 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/dashboard/layout.js

1
2
3
4
5
6
7
8export default function DashboardLayout({ children }) {
  return (
    <section data-layout="dashboard">
      <nav>Dashboard menu</nav>
      {children}
    </section>
  );
}

app/dashboard/settings/page.js

1
2
3
4
5
6
7export default function Settings() {
  return (
    <main data-page="settings">
      <h1>Settings</h1>
    </main>
  );
}

layouts.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20const base = process.env.BASE_URL;
const get = async (path) => (await fetch(base + path)).text();

const settings = await get('/dashboard/settings');
const dashboard = await get('/dashboard');
const about = await get('/about');

console.log(settings.match(/<div data-layout="root">.*?<\/main>/)[0]);

const at = (text, needle) => text.indexOf(needle);
const nested =
  at(settings, 'data-layout="root"') < at(settings, 'data-layout="dashboard"') &&
  at(settings, 'data-layout="dashboard"') < at(settings, 'data-page="settings"');
console.log('root, then dashboard, then the page:', nested);

check('the root layout wraps the dashboard layout, which wraps the page', nested, true);
check('both dashboard pages sit inside the dashboard layout', [dashboard, settings].map((h) => h.includes('data-layout="dashboard"')), [true, true]);
check('a page outside the folder does not', about.includes('data-layout="dashboard"'), false);
check('but every page sits inside the root layout', [dashboard, settings, about].map((h) => h.includes('data-layout="root"')), [true, true, true]);
check('and the title the root layout set is on all of them', [dashboard, settings, about].map((h) => h.includes('<title>Shelf</title>')), [true, true, true]);

app/books/[slug]/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18import { BOOKS, findBook } from '../../_lib/books.js';

export const dynamicParams = false;

export function generateStaticParams() {
  return BOOKS.map((book) => ({ slug: book.slug }));
}

export default async function Book({ params }) {
  const { slug } = await params;
  const book = findBook(slug);
  return (
    <main data-page="book">
      <h1>{book.title}</h1>
      <p>by {book.author}</p>
    </main>
  );
}

app/docs/[...parts]/page.js

1
2
3
4
5
6
7
8
9
10
11
12export default async function Docs({ params }) {
  const isThenable = typeof params.then;
  const { parts } = await params;
  return (
    <main data-page="docs">
      <h1>Docs</h1>
      <p data-params-then={isThenable} data-kind={Array.isArray(parts) ? 'array' : typeof parts} data-parts={String(parts)}>
        {parts.length} segment(s): {parts.join(' / ')}
      </p>
    </main>
  );
}

app/guide/[[...parts]]/page.js

1
2
3
4
5
6
7
8
9
10
11export default async function Guide({ params }) {
  const { parts } = await params;
  return (
    <main data-page="guide">
      <h1>Guide</h1>
      <p data-kind={Array.isArray(parts) ? 'array' : typeof parts} data-parts={String(parts)}>
        {parts ? parts.join(' / ') : 'the top of the guide'}
      </p>
    </main>
  );
}

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

const base = process.env.BASE_URL;
const root = process.env.APP_DIR + '/.next';
const get = async (path) => {
  const res = await fetch(base + path);
  return { status: res.status, html: await res.text() };
};
const attr = (html, name) => new RegExp(name + '="([^"]*)"').exec(html)?.[1];

const dracula = await get('/books/dracula');
const nope = await get('/books/nope');
const deep = await get('/docs/a/b/c');
const bare = await get('/docs');
const top = await get('/guide');
const guideDeep = await get('/guide/x/y');

console.log('/books/dracula', dracula.status, dracula.html.match(/<h1>.*?<\/h1>/)[0]);
console.log('/books/nope   ', nope.status);
console.log('/docs/a/b/c   ', deep.status, 'parts:', attr(deep.html, 'data-kind'), attr(deep.html, 'data-parts'));
console.log('/docs         ', bare.status);
console.log('/guide        ', top.status, 'parts:', attr(top.html, 'data-kind'));
console.log('/guide/x/y    ', guideDeep.status, 'parts:', attr(guideDeep.html, 'data-kind'), attr(guideDeep.html, 'data-parts'));

const built = readdirSync(root + '/server/app/books').filter((f) => f.endsWith('.html')).sort();
const manifest = JSON.parse(readFileSync(root + '/prerender-manifest.json', 'utf8'));
console.log('built at build time:', built.join(' '));

check('a slug that generateStaticParams listed renders its book', [dracula.status, dracula.html.includes('<h1>Dracula</h1>')], [200, true]);
check('params is a Promise in Next.js 16', attr(deep.html, 'data-params-then'), 'function');
check('the build wrote one HTML file per slug', built, ['dracula.html', 'middlemarch.html', 'persuasion.html']);
check('dynamicParams = false is recorded as no fallback', manifest.dynamicRoutes['/books/[slug]'].fallback, false);
check('any other slug is a 404', nope.status, 404);
check('[...parts] gets an array of every segment', [attr(deep.html, 'data-kind'), attr(deep.html, 'data-parts')], ['array', 'a,b,c']);
check('and needs at least one segment', bare.status, 404);
check('[[...parts]] also matches the folder itself, with parts undefined', [top.status, attr(top.html, 'data-kind')], [200, 'undefined']);
check('and any depth after it', [guideDeep.status, attr(guideDeep.html, 'data-kind'), attr(guideDeep.html, 'data-parts')], [200, 'array', 'x,y']);

app/(marketing)/layout.js

1
2
3export default function MarketingLayout({ children }) {
  return <div data-layout="marketing">{children}</div>;
}

app/(marketing)/pricing/page.js

1
2
3
4
5
6
7
8export default function Pricing() {
  return (
    <main data-page="pricing">
      <h1>Pricing</h1>
      <p>This file is at app/(marketing)/pricing/page.js and the address is /pricing.</p>
    </main>
  );
}

app/_drafts/page.js

1
2
3export default function Drafts() {
  return <main data-page="drafts">Drafts</main>;
}

groups.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19const base = process.env.BASE_URL;
const get = async (path) => {
  const res = await fetch(base + path);
  return { status: res.status, html: await res.text() };
};

const pricing = await get('/pricing');
const literal = await get('/%28marketing%29/pricing');
const drafts = await get('/_drafts');

console.log('/pricing                ', pricing.status, pricing.html.match(/<div data-layout="root">.*?<\/main>/)[0]);
console.log('/(marketing)/pricing    ', literal.status);
console.log('/_drafts                ', drafts.status);

const at = (needle) => pricing.html.indexOf(needle);
check('the group name is not in the address', pricing.status, 200);
check('the group layout sits inside the root layout and around the page', at('data-layout="root"') < at('data-layout="marketing"') && at('data-layout="marketing"') < at('data-page="pricing"'), true);
check('the group name is not an address either', literal.status, 404);
check('a page.js in a private folder is not reachable', drafts.status, 404);

patterns.mjs

1
2
3
4
5
6
7
8import { readFileSync } from 'node:fs';

const manifest = JSON.parse(readFileSync(process.env.APP_DIR + '/.next/routes-manifest.json', 'utf8'));
const patterns = manifest.dynamicRoutes.map((route) => route.page);
console.log('dynamic route patterns:', patterns.join(' '));

check('the three patterns of this lesson are in the routes manifest as written', ['/books/[slug]', '/docs/[...parts]', '/guide/[[...parts]]'].map((p) => patterns.includes(p)), [true, true, true]);
check('no pattern contains a group or a private folder', patterns.some((p) => p.includes('(') || p.includes('_drafts')), false);

app/books/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17import Link from 'next/link';
import { BOOKS } from '../_lib/books.js';

export default function Books() {
  return (
    <main data-page="books">
      <h1>Books</h1>
      <ul>
        {BOOKS.map((book) => (
          <li key={book.slug}>
            <Link href={`/books/${book.slug}`}>{book.title}</Link>
          </li>
        ))}
      </ul>
    </main>
  );
}

app/books/NavLink.js

1
2
3
4
5
6
7
8
9
10
11
12'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function NavLink({ href, children }) {
  const pathname = usePathname();
  return (
    <Link href={href} aria-current={pathname === href ? 'page' : undefined}>
      {children}
    </Link>
  );
}

links.mjs

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

const link = (html, href) => new RegExp('<a [^>]*href="' + href + '"[^>]*>[^<]*</a>').exec(html)?.[0];
console.log(link(list, '/books/dracula'));
console.log('on /books:         ', link(list, '/books'));
console.log('on /books/dracula: ', link(one, '/books'));

check('each book is an ordinary anchor with an href', link(list, '/books/dracula'), '<a href="/books/dracula">Dracula</a>');
check('the link to the current address is marked', link(list, '/books').includes('aria-current="page"'), true);
check('the other menu link is not', link(list, '/pricing').includes('aria-current'), false);
check('on another address the same link is not marked', link(one, '/books').includes('aria-current'), false);

payload.mjs

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

const html = await fetch(base + '/books/dracula');
const rsc = await fetch(base + '/books/dracula', { headers: { RSC: '1' } });
const payload = await rsc.text();

console.log('html:   ', html.status, html.headers.get('content-type'));
console.log('payload:', rsc.status, rsc.headers.get('content-type'), '(redirected:', rsc.redirected + ')');
console.log('payload ends up at', new URL(rsc.url).pathname + new URL(rsc.url).search);
console.log('vary:', rsc.headers.get('vary').split(', ').slice(0, 2).join(', '), '...');

check('the same address answers HTML without the header', html.headers.get('content-type'), 'text/html; charset=utf-8');
check('and the payload with it', rsc.headers.get('content-type'), 'text/x-component');
check('after one redirect to an address with _rsc', [rsc.redirected, new URL(rsc.url).searchParams.has('_rsc')], [true, true]);
check('the payload is not an HTML document', payload.startsWith('<!DOCTYPE'), false);
check('but it holds the page content', payload.includes('Dracula'), true);
check('a cache is told to keep the two apart', rsc.headers.get('vary').split(', ').includes('rsc'), true);

app/old-shelf/page.js

1
2
3
4
5import { redirect } from 'next/navigation';

export default function OldShelf() {
  redirect('/books');
}

app/moved/page.js

1
2
3
4
5import { permanentRedirect } from 'next/navigation';

export default function Moved() {
  permanentRedirect('/books');
}

redirects.mjs

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

const base = process.env.BASE_URL;
const temporary = await fetch(base + '/old-shelf', { redirect: 'manual' });
const permanent = await fetch(base + '/moved', { redirect: 'manual' });
const followed = await fetch(base + '/old-shelf');
const meta = JSON.parse(readFileSync(process.env.APP_DIR + '/.next/server/app/old-shelf.meta', 'utf8'));

console.log('/old-shelf', temporary.status, 'location:', temporary.headers.get('location'));
console.log('/moved    ', permanent.status, 'location:', permanent.headers.get('location'));
console.log('followed  ', followed.status, new URL(followed.url).pathname);
console.log('.next/server/app/old-shelf.meta:', meta.status, meta.headers.location);

check('redirect() in a page is a 307 with a location', [temporary.status, temporary.headers.get('location')], [307, '/books']);
check('permanentRedirect() is a 308', [permanent.status, permanent.headers.get('location')], [308, '/books']);
check('a client that follows ends up on the target', [followed.status, new URL(followed.url).pathname], [200, '/books']);
check('the redirect was decided at build time and stored', [meta.status, meta.headers.location], [307, '/books']);

app/reports/page.js

1
2
3
4
5
6
7
8
9
10
11
12export const dynamic = 'force-dynamic';

export default async function Reports() {
  const res = await fetch(`${process.env.DATA_URL}/slow?ms=800`);
  const { waited } = await res.json();
  return (
    <main data-page="reports">
      <h1>Reports</h1>
      <p>The report arrived after {waited} ms of waiting.</p>
    </main>
  );
}

app/reports/loading.js

1
2
3export default function Loading() {
  return <p data-state="loading">Loading the reports...</p>;
}

loading.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
26const base = process.env.BASE_URL;
const res = await fetch(base + '/reports');
const reader = res.body.getReader();
const decoder = new TextDecoder();
const chunks = [];
const started = performance.now();
for (;;) {
  const { done, value } = await reader.read();
  if (done) break;
  chunks.push({ at: performance.now() - started, text: decoder.decode(value, { stream: true }) });
}
const all = chunks.map((c) => c.text).join('');
const first = chunks[0].text;
const reportAt = chunks.findIndex((c) => c.text.includes('The report arrived'));

console.log('status', res.status, '- body arrives in pieces:', chunks.length > 1);
console.log('first piece has the loading UI:', first.includes('Loading the reports...'));
console.log('first piece has the report:    ', first.includes('The report arrived'));
console.log('the report arrives later, after a wait of more than 500 ms:', reportAt > 0 && chunks[reportAt].at - chunks[0].at > 500);

check('the response is a 200', res.status, 200);
check('the first piece holds the fallback from loading.js', first.includes('Loading the reports...'), true);
check('and not the page', [first.includes('The report arrived'), first.includes('<h1>Reports</h1>')], [false, false]);
check('the page arrives in a later piece', reportAt > 0, true);
check('which came after the 800 ms wait on the data server, not before', chunks[reportAt].at - chunks[0].at > 500, true);
check('React marked the boundary with a template it later swaps', all.includes('<template id="B:0">'), true);

app/authors/[name]/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14import { notFound } from 'next/navigation';
import { BOOKS } from '../../_lib/books.js';

export default async function Author({ params }) {
  const { name } = await params;
  const books = BOOKS.filter((book) => book.author.toLowerCase().replace(/ /g, '-') === name);
  if (books.length === 0) notFound();
  return (
    <main data-page="author">
      <h1>{books[0].author}</h1>
      <p>{books.map((book) => book.title).join(', ')}</p>
    </main>
  );
}

app/authors/[name]/not-found.js

1
2
3export default function AuthorNotFound() {
  return <main data-page="author-not-found">We have no books by that author.</main>;
}

app/not-found.js

1
2
3
4
5
6
7
8export default function NotFound() {
  return (
    <main data-page="not-found">
      <h1>Nothing on this shelf</h1>
      <p>No page answers this address.</p>
    </main>
  );
}

not-found.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 get = async (path) => {
  const res = await fetch(base + path);
  return { status: res.status, html: await res.text() };
};
/* The payload is a list of JSON string pieces inside script tags. */
const payload = (html) =>
  [...html.matchAll(/self\.__next_f\.push\(\[1,("(?:[^"\\]|\\.)*")\]\)/g)].map((m) => JSON.parse(m[1])).join('');

const known = await get('/authors/bram-stoker');
const unknown = await get('/authors/nobody');
const nowhere = await get('/nope');

console.log('/authors/bram-stoker', known.status);
console.log('/authors/nobody     ', unknown.status, unknown.html.match(/<meta name="robots"[^>]*>/)[0]);
console.log('/nope               ', nowhere.status, nowhere.html.match(/<h1>.*?<\/h1>/)[0]);

check('an author who exists is a 200', known.status, 200);
check('notFound() makes the response a 404', unknown.status, 404);
check('and tells search engines not to index it', unknown.html.includes('<meta name="robots" content="noindex"/>'), true);
check('the HTML is the recovery shell', unknown.html.includes('<html id="__next_error__">'), true);
check('the text of authors/[name]/not-found.js is in the payload', payload(unknown.html).includes('We have no books by that author.'), true);
check('an address with no page is a 404 as well', nowhere.status, 404);
check('with the text of app/not-found.js in the HTML itself', nowhere.html.includes('<h1>Nothing on this shelf</h1>'), true);

app/flaky/page.js

1
2
3
4
5export const dynamic = 'force-dynamic';

export default function Flaky() {
  throw new Error('the shelf fell over');
}

app/flaky/error.js

1
2
3
4
5
6
7
8
9
10'use client';

export default function ErrorPage({ error, reset }) {
  return (
    <main data-page="flaky-error">
      <p>Something went wrong on this page.</p>
      <button onClick={() => reset()}>Try again</button>
    </main>
  );
}

error.mjs

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

const base = process.env.BASE_URL;
const res = await fetch(base + '/flaky');
const html = await res.text();
const root = process.env.APP_DIR + '/.next';
/* The payload is a list of JSON string pieces inside script tags. */
const payload = [...html.matchAll(/self\.__next_f\.push\(\[1,("(?:[^"\\]|\\.)*")\]\)/g)].map((m) => JSON.parse(m[1])).join('');
const chunks = readdirSync(root + '/static/chunks').filter((f) => f.endsWith('.js'));
const inClient = chunks.filter((f) => readFileSync(root + '/static/chunks/' + f, 'utf8').includes('Something went wrong on this page'));

console.log('status', res.status);
console.log('the payload has a digest:', /"digest":"\d+"/.test(payload));
console.log('the response has the message:', html.includes('the shelf fell over') || payload.includes('the shelf fell over'));
console.log('files in static/chunks holding the text of error.js:', inClient.length);

check('a page that throws is a 500', res.status, 500);
check('the browser is sent a digest', /"digest":"\d+"/.test(payload), true);
check('and not the message', html.includes('the shelf fell over') || payload.includes('the shelf fell over'), false);
check('the HTML is the recovery shell, since error.js draws in the browser', html.includes('<html id="__next_error__">'), true);
check('the text of error.js is in a client file', inClient.length >= 1, true);
check('Next.js builds a global error page even when the project has none', existsSync(root + '/server/app/_global-error.html'), true);