Mutating and serving all 5 written

app/actions/actions.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17'use server';
import { cookies } from 'next/headers';
import { redirect } from 'next/navigation';
import { addNote } from '../_lib/store.js';

// Anyone who can send a POST can run this function, so it checks its own input.
export async function createNote(formData) {
  const title = String(formData.get('title') ?? '').trim();
  if (title.length === 0 || title.length > 40) return;
  addNote(title);
}

export async function finish() {
  const jar = await cookies();
  jar.set('finished', 'yes', { path: '/actions', httpOnly: true });
  redirect('/actions/done');
}

app/actions/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23import { connection } from 'next/server';
import { createNote, finish } from './actions.js';
import { notes } from '../_lib/store.js';

export default async function Actions() {
  await connection();
  return (
    <main data-page="actions">
      <ul data-notes>
        {notes.map((title, i) => (
          <li key={i}>{title}</li>
        ))}
      </ul>
      <form action={createNote}>
        <input name="title" />
        <button type="submit">Add</button>
      </form>
      <form action={finish}>
        <button type="submit">Finish</button>
      </form>
    </main>
  );
}

app/_lib/store.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14// One object for the whole server process, kept on globalThis so that every route that
// imports this file sees the same one. A real app would use a database.
const store = (globalThis.__shelfStore ??= { notes: [], members: [] });

export const notes = store.notes;
export const members = store.members;

export function addNote(title) {
  notes.push(title);
}

export function addMember(member) {
  members.push(member);
}

form.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
25const base = process.env.BASE_URL;
const page = await (await fetch(base + '/actions')).text();
const forms = page.match(/<form[\s\S]*?<\/form>/g);
console.log(forms[0]);

const ids = [...page.matchAll(/name="(\$ACTION_ID_[0-9a-f]+)"/g)].map((m) => m[1]);
const send = async (id, fields) => {
  const body = new FormData();
  body.append(id, '');
  for (const [name, value] of Object.entries(fields)) body.append(name, value);
  return fetch(base + '/actions', { method: 'POST', body, redirect: 'manual', headers: { origin: base } });
};
const posted = await send(ids[0], { title: 'Read Middlemarch' });
const html = await posted.text();
const empty = await (await send(ids[0], { title: '   ' })).text();
const notes = (text) => [...text.matchAll(/<li>(.*?)<\/li>/g)].map((m) => m[1]);

console.log('POST with a title ->', posted.status, JSON.stringify(notes(html)));
console.log('POST with a blank title ->', JSON.stringify(notes(empty)));

check('the page has one form per action, each with its own id', [forms.length, new Set(ids).size], [2, 2]);
check('the form is a POST of multipart form data, to the same address', ['method="POST"', 'encType="multipart/form-data"', 'action=""'].map((a) => forms[0].includes(a)), [true, true, true]);
check('the id is a name starting with $ACTION_ID_ followed by hex digits', ids.every((id) => /^\$ACTION_ID_[0-9a-f]{20,}$/.test(id)), true);
check('a form post with no JavaScript ran the function', [posted.status, notes(html)], [200, ['Read Middlemarch']]);
check('a blank title was refused by the function itself', notes(empty), ['Read Middlemarch']);

redirect.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14const base = process.env.BASE_URL;
const page = await (await fetch(base + '/actions')).text();
const ids = [...page.matchAll(/name="(\$ACTION_ID_[0-9a-f]+)"/g)].map((m) => m[1]);
const body = new FormData();
body.append(ids[1], '');
const res = await fetch(base + '/actions', { method: 'POST', body, redirect: 'manual', headers: { origin: base } });
const cookie = res.headers.getSetCookie()[0];
console.log('status:', res.status);
console.log('location:', new URL(res.headers.get('location'), base).pathname);
console.log('set-cookie:', cookie);
check('redirect() in an action answers 303 See Other', res.status, 303);
check('and says where to go', new URL(res.headers.get('location'), base).pathname, '/actions/done');
check('cookies().set sent a cookie', cookie.startsWith('finished=yes'), true);
check('with the attributes asked for', ['Path=/actions', 'HttpOnly'].map((a) => cookie.includes(a)), [true, true]);

forged.mjs

1
2
3
4
5
6const base = process.env.BASE_URL;
const forged = new FormData();
forged.append('$ACTION_ID_' + '0'.repeat(40), '');
const res = await fetch(base + '/actions', { method: 'POST', body: forged, headers: { origin: base } });
console.log('a post naming an action that does not exist ->', res.status);
check('the server refused it', res.status >= 400, true);

app/_lib/validate.js

1
2
3
4
5
6
7
8// Validation by hand: a pure function, so it can be tested without Next.js (lesson 28).
export function validateSignup({ name, email, password }) {
  const errors = {};
  if (name.trim().length === 0) errors.name = 'Enter your name.';
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) errors.email = 'Enter an email address like you@example.com.';
  if (password.length < 8) errors.password = 'Use at least 8 characters.';
  return errors;
}

app/forms/actions.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15'use server';
import { redirect } from 'next/navigation';
import { addMember } from '../_lib/store.js';
import { validateSignup } from '../_lib/validate.js';

export async function signup(previous, formData) {
  const values = {
    name: String(formData.get('name') ?? ''),
    email: String(formData.get('email') ?? ''),
  };
  const errors = validateSignup({ ...values, password: String(formData.get('password') ?? '') });
  if (Object.keys(errors).length > 0) return { errors, values };
  addMember({ name: values.name.trim(), email: values.email });
  redirect('/forms/thanks');
}

app/forms/SignupForm.js

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'use client';
import { useActionState } from 'react';
import { signup } from './actions.js';

const initial = { errors: {}, values: { name: '', email: '' } };

export default function SignupForm() {
  const [state, formAction, pending] = useActionState(signup, initial);
  return (
    <form action={formAction} data-form="signup">
      <label>
        Name <input name="name" defaultValue={state.values.name} />
      </label>
      {state.errors.name && <p role="alert" data-error="name">{state.errors.name}</p>}
      <label>
        Email <input name="email" defaultValue={state.values.email} />
      </label>
      {state.errors.email && <p role="alert" data-error="email">{state.errors.email}</p>}
      <label>
        Password <input name="password" type="password" />
      </label>
      {state.errors.password && <p role="alert" data-error="password">{state.errors.password}</p>}
      <button type="submit" disabled={pending}>Sign up</button>
    </form>
  );
}

app/forms/signup/page.js

1
2
3
4
5
6
7
8
9
10import SignupForm from '../SignupForm.js';

export default function Signup() {
  return (
    <main data-page="signup">
      <h1>Sign up</h1>
      <SignupForm />
    </main>
  );
}

invalid.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
33const base = process.env.BASE_URL;
const decode = (text) => text.replace(/&quot;/g, '"').replace(/&#x27;/g, "'").replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
const hiddenFields = (page) => {
  const form = /<form[\s\S]*?<\/form>/.exec(page)[0];
  return (form.match(/<input[^>]*type="hidden"[^>]*>/g) || []).map((tag) => [
    decode(/name="([^"]*)"/.exec(tag)[1]),
    decode(/value="([^"]*)"/.exec(tag)?.[1] ?? ''),
  ]);
};

const page = await (await fetch(base + '/forms/signup')).text();
const hidden = hiddenFields(page);
console.log('hidden fields in the form:', hidden.map(([name]) => name).join('  '));

const body = new FormData();
for (const [name, value] of hidden) body.append(name, value);
body.append('name', '');
body.append('email', 'nope');
body.append('password', 'short');
const bad = await fetch(base + '/forms/signup', { method: 'POST', body, redirect: 'manual', headers: { origin: base } });
const html = await bad.text();
const errors = [...html.matchAll(/data-error="(\w+)">([^<]*)</g)].map((m) => m[1] + ': ' + m[2]);
console.log('POST with three mistakes ->', bad.status);
console.log(errors.join('\n'));
console.log('the email field kept what was typed:', html.includes('value="nope"'));
console.log('the password field did not:', !/type="password"[^>]*value=/.test(html));

check('the form carries hidden fields that name the action and its state', hidden.map(([name]) => name), ['$ACTION_REF_1', '$ACTION_1:0', '$ACTION_1:1', '$ACTION_KEY']);
check('one of them holds the state the form began with', hidden.some(([name, value]) => name === '$ACTION_1:1' && value.includes('errors')), true);
check('the form posted with no JavaScript came back as a page', bad.status, 200);
check('with a message for each field', errors.length, 3);
check('and what the person typed is still in the field', html.includes('value="nope"'), true);
check('but the password is not sent back', /type="password"[^>]*value=/.test(html), false);

app/forms/thanks/page.js

1
2
3
4
5
6
7import { connection } from 'next/server';
import { members } from '../../_lib/store.js';

export default async function Thanks() {
  await connection();
  return <main data-page="thanks"><p data-members>{`${members.length} member(s) so far.`}</p></main>;
}

valid.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 decode = (text) => text.replace(/&quot;/g, '"').replace(/&#x27;/g, "'").replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
const page = await (await fetch(base + '/forms/signup')).text();
const form = /<form[\s\S]*?<\/form>/.exec(page)[0];
const body = new FormData();
for (const tag of form.match(/<input[^>]*type="hidden"[^>]*>/g)) {
  body.append(decode(/name="([^"]*)"/.exec(tag)[1]), decode(/value="([^"]*)"/.exec(tag)?.[1] ?? ''));
}
body.append('name', 'Ada');
body.append('email', 'ada@example.com');
body.append('password', 'correct horse');
const res = await fetch(base + '/forms/signup', { method: 'POST', body, redirect: 'manual', headers: { origin: base } });
const thanks = await (await fetch(base + '/forms/thanks')).text();
console.log('status:', res.status, ' location:', new URL(res.headers.get('location'), base).pathname);
console.log(/<p data-members[^>]*>.*?<\/p>/.exec(thanks)[0]);
check('a valid form redirects with 303', res.status, 303);
check('to the thanks page', new URL(res.headers.get('location'), base).pathname, '/forms/thanks');
check('after the member was saved', /1 member\(s\) so far/.test(thanks), true);

app/api/books/route.js

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

export async function GET(request) {
  const q = new URL(request.url).searchParams.get('q')?.toLowerCase();
  const books = q ? BOOKS.filter((book) => book.title.toLowerCase().includes(q)) : BOOKS;
  return Response.json(books);
}

export async function POST(request) {
  let body;
  try {
    body = await request.json();
  } catch {
    return Response.json({ error: 'the body is not JSON' }, { status: 400 });
  }
  if (typeof body.title !== 'string' || body.title.trim() === '') {
    return Response.json({ error: 'title is required' }, { status: 400 });
  }
  const book = { slug: body.title.trim().toLowerCase().replace(/\s+/g, '-'), title: body.title.trim() };
  return Response.json(book, { status: 201, headers: { Location: `/api/books/${book.slug}` } });
}

app/api/books/[id]/route.js

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

export async function GET(request, { params }) {
  const { id } = await params;
  const book = findBook(id);
  if (!book) return Response.json({ error: `no book called ${id}` }, { status: 404 });
  return Response.json(book);
}

export async function DELETE(request, { params }) {
  const { id } = await params;
  return new Response(null, { status: findBook(id) ? 204 : 404 });
}

get.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17const base = process.env.BASE_URL;
const get = async (path) => {
  const res = await fetch(base + path);
  return { status: res.status, type: res.headers.get('content-type'), body: await res.json() };
};
const all = await get('/api/books');
const some = await get('/api/books?q=dra');
const one = await get('/api/books/persuasion');
const none = await get('/api/books/nope');
console.log('/api/books            ', all.status, all.type, all.body.map((b) => b.slug).join(','));
console.log('/api/books?q=dra      ', some.status, some.body.map((b) => b.slug).join(','));
console.log('/api/books/persuasion ', one.status, JSON.stringify(one.body));
console.log('/api/books/nope       ', none.status, JSON.stringify(none.body));
check('a handler returns what Response.json builds, as JSON', [all.status, all.type, all.body.length], [200, 'application/json', 3]);
check('the query string is on request.url', some.body.map((b) => b.slug), ['dracula']);
check('params is awaited in a handler too', one.body.title, 'Persuasion');
check('a status is chosen by the handler', none.status, 404);

methods.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
27const base = process.env.BASE_URL;
const send = (path, init) => fetch(base + path, init);
const json = { 'content-type': 'application/json' };

const created = await send('/api/books', { method: 'POST', headers: json, body: JSON.stringify({ title: 'Frankenstein' }) });
const notJson = await send('/api/books', { method: 'POST', headers: json, body: 'not json' });
const noTitle = await send('/api/books', { method: 'POST', headers: json, body: '{}' });
const removed = await send('/api/books/dracula', { method: 'DELETE' });
const patched = await send('/api/books', { method: 'PATCH' });
const head = await send('/api/books', { method: 'HEAD' });
const options = await send('/api/books', { method: 'OPTIONS' });

console.log('POST   valid ->', created.status, created.headers.get('location'), JSON.stringify(await created.json()));
console.log('POST   text  ->', notJson.status);
console.log('POST   {}    ->', noTitle.status);
console.log('DELETE       ->', removed.status, JSON.stringify(await removed.text()));
console.log('PATCH        ->', patched.status);
console.log('HEAD         ->', head.status, head.headers.get('content-type'), JSON.stringify(await head.text()));
console.log('OPTIONS      ->', options.status, 'allow:', options.headers.get('allow'));

check('POST made something and said where', [created.status, created.headers.get('location')], [201, '/api/books/frankenstein']);
check('a body that is not JSON is refused by the handler', notJson.status, 400);
check('and a body without a title', noTitle.status, 400);
check('DELETE answered 204 with no body', removed.status, 204);
check('a method with no handler is 405', patched.status, 405);
check('HEAD is answered from GET, without a body', [head.status, await head.text()], [200, '']);
check('OPTIONS is answered by Next.js, listing the methods the file exports and HEAD', [options.status, ['GET', 'HEAD', 'OPTIONS', 'POST'].map((m) => options.headers.get('allow').includes(m))], [204, [true, true, true, true]]);

handlers-table.mjs

1
2
3
4
5
6import { readFileSync } from 'node:fs';
const manifest = JSON.parse(readFileSync(process.env.APP_DIR + '/.next/prerender-manifest.json', 'utf8'));
const routes = Object.keys(manifest.routes);
console.log('prerendered routes with api in the name:', routes.filter((r) => r.includes('/api/')).join(' '));
check('the force-static handler was run at build time', routes.includes('/api/static'), true);
check('the other handlers were not', ['/api/time', '/api/books', '/api/hello'].map((r) => routes.includes(r)), [false, false, false]);

app/api/static/route.js

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

export function GET() {
  return Response.json({ at: Date.now() });
}

app/api/time/route.js

1
2
3export function GET() {
  return Response.json({ at: Date.now() });
}

static.mjs

1
2
3
4
5
6
7
8
9
10
11
12const base = process.env.BASE_URL;
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const at = async (path) => (await (await fetch(base + path)).json()).at;
const fixed = [await at('/api/static')];
const live = [await at('/api/time')];
await sleep(50);
fixed.push(await at('/api/static'));
live.push(await at('/api/time'));
console.log('/api/static answered with the same time twice:', fixed[0] === fixed[1]);
console.log('/api/time answered with a later time the second time:', live[1] > live[0]);
check('the force-static handler ran once', fixed[0] === fixed[1], true);
check('the default handler ran for each request', live[1] > live[0], true);

proxy.js

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
34import { NextResponse } from 'next/server';

export function proxy(request) {
  const { pathname } = request.nextUrl;

  // Lesson 27: an optimistic check. It looks only for the presence of the session cookie, which
  // is cheap, and sends strangers to the login page before any page code runs. It does not
  // decide who someone is; the pages and actions do (app/_lib/session.js).
  if (pathname.startsWith('/account')) {
    if (!request.cookies.has('shelf_session')) {
      return NextResponse.redirect(new URL('/login', request.url));
    }
    return NextResponse.next();
  }

  // A redirect to an address that has no page at all: the proxy runs before the routes.
  if (pathname === '/proxy-demo/old') {
    return NextResponse.redirect(new URL('/proxy-demo/new', request.url));
  }

  // Pass the request on, with a header added to what the page will see
  // and another added to what the browser will get.
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-from-proxy', 'added before the page ran');
  const response = NextResponse.next({ request: { headers: requestHeaders } });
  response.headers.set('x-course-proxy', 'ran');
  response.headers.set('x-course-url', request.url);
  response.headers.set('x-course-runtime', process.versions && process.versions.node ? 'node' : 'other');
  return response;
}

export const config = {
  matcher: ['/proxy-demo/:path*', '/account/:path*'],
};

proxy-table.mjs

1
2
3
4
5import { readdirSync } from 'node:fs';
const server = readdirSync(process.env.APP_DIR + '/.next/server');
const found = server.filter((name) => /proxy|middleware/i.test(name)).sort();
console.log('files in .next/server with proxy or middleware in the name:', found.join(' '));
check('the build wrote the proxy as middleware.js, the name from before the rename', found.includes('middleware.js'), true);

app/proxy-demo/new/page.js

1
2
3
4
5
6
7
8
9
10import { headers } from 'next/headers';

export default async function New() {
  const list = await headers();
  return (
    <main data-page="proxy-new">
      <p data-added>{list.get('x-from-proxy') ?? 'no header'}</p>
    </main>
  );
}

proxy.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23const base = process.env.BASE_URL;
const get = (path, init) => fetch(base + path, { redirect: 'manual', ...init });

const old = await get('/proxy-demo/old');
const page = await get('/proxy-demo/new');
const pageHtml = await page.text();
const nothing = await get('/proxy-demo/nothing-here');
const about = await get('/about');

console.log('/proxy-demo/old     ', old.status, 'location:', new URL(old.headers.get('location'), base).pathname);
console.log('/proxy-demo/new     ', page.status, 'x-course-proxy:', page.headers.get('x-course-proxy'), 'x-course-runtime:', page.headers.get('x-course-runtime'));
console.log('  the page saw the header the proxy added:', pageHtml.match(/<p data-added[^>]*>.*?<\/p>/)[0]);
console.log('request.url inside the proxy:', page.headers.get('x-course-url'), ' (the request was sent to ' + base.replace(/:\d+$/, ':<port>') + ')');
console.log('/proxy-demo/nothing-here', nothing.status, 'x-course-proxy:', nothing.headers.get('x-course-proxy'));
console.log('/about              ', about.status, 'x-course-proxy:', about.headers.get('x-course-proxy'));

check('a redirect is decided before any page is looked for', [old.status, new URL(old.headers.get('location'), base).pathname], [307, '/proxy-demo/new']);
check('next() lets the request through with a header on the response', page.headers.get('x-course-proxy'), 'ran');
check('and a header on the request that the page could read', pageHtml.includes('added before the page ran'), true);
check('request.url names loopback addresses as localhost, whatever the request was sent to', [new URL(base).hostname, new URL(page.headers.get('x-course-url')).hostname], ['127.0.0.1', 'localhost']);
check('the proxy runs on Node.js', page.headers.get('x-course-runtime'), 'node');
check('it ran for an address no page answers', [nothing.status, nothing.headers.get('x-course-proxy')], [404, 'ran']);
check('the matcher left other addresses alone', about.headers.get('x-course-proxy'), null);

app/request/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18import { cookies, headers } from 'next/headers';

export default async function Request({ searchParams }) {
  // cookies() returns a Promise. Holding it first shows what it is before it is awaited.
  const pending = cookies();
  const kind = typeof pending.then;
  const jar = await pending;
  const list = await headers();
  const query = await searchParams;
  return (
    <main data-page="request">
      <p data-promise={kind}>{`cookies() returned something whose then is of type ${kind}`}</p>
      <p data-theme>{jar.get('theme')?.value ?? 'no theme cookie'}</p>
      <p data-header>{list.get('x-demo') ?? 'no x-demo header'}</p>
      <p data-query>{query.q ?? 'no q'}</p>
    </main>
  );
}

read.mjs

1
2
3
4
5
6
7
8
9
10
11
12const base = process.env.BASE_URL;
const res = await fetch(base + '/request?q=hello', { headers: { cookie: 'theme=light', 'x-demo': 'from the driver' } });
const html = await res.text();
const text = (name) => new RegExp('<p data-' + name + '[^>]*>(.*?)</p>').exec(html)[1];
console.log(text('promise'));
console.log('theme cookie:', text('theme'));
console.log('x-demo header:', text('header'));
console.log('q:', text('query'));
check('cookies() returns a Promise before it is awaited', /data-promise="function"/.test(html), true);
check('the cookie the request sent was read', text('theme'), 'light');
check('and the header', text('header'), 'from the driver');
check('and searchParams, awaited, held the query string', text('query'), 'hello');

app/api/cookie/route.js

1
2
3
4
5
6
7import { cookies } from 'next/headers';

export async function GET() {
  const jar = await cookies();
  jar.set('theme', 'dark', { httpOnly: true, path: '/', maxAge: 3600, sameSite: 'lax' });
  return Response.json({ set: 'theme' });
}

write.mjs

1
2
3
4
5
6
7
8
9
10
11const base = process.env.BASE_URL;
const res = await fetch(base + '/api/cookie');
const header = res.headers.getSetCookie()[0];
const parts = header.split('; ').map((part) => part.split('=')[0]);
console.log('set-cookie begins:', header.split(';')[0]);
console.log('and carries these attributes:', parts.slice(1).join(', '));
const back = await (await fetch(base + '/request', { headers: { cookie: header.split(';')[0] } })).text();
check('the route handler sent the cookie', header.startsWith('theme=dark'), true);
check('with the attributes it was given, and an Expires that Next.js added', parts.slice(1), ['Path', 'Expires', 'Max-Age', 'HttpOnly', 'SameSite']);
check('whose values are the ones given', ['Path=/', 'Max-Age=3600', 'SameSite=lax'].map((a) => header.includes(a)), [true, true, true]);
check('and a request that sends it back is read by a page', /<p data-theme[^>]*>dark<\/p>/.test(back), true);

app/request/bad-set/page.js

1
2
3
4
5
6
7
8import { cookies } from 'next/headers';

export default async function BadSet() {
  const jar = await cookies();
  // Not allowed while a page renders: only a Server Action or a route handler may write cookies.
  jar.set('theme', 'dark');
  return <main>unreachable</main>;
}

bad-set.mjs

1
2
3
4
5const base = process.env.BASE_URL;
const res = await fetch(base + '/request/bad-set');
console.log('status:', res.status);
check('a page that sets a cookie fails', res.status, 500);
check('and sends no cookie', res.headers.getSetCookie().length, 0);