Test Yourself!

// 1. The only files under app/dash are this layout, page.js, settings/page.js and
//    @side/page.js. Loading /dash puts "Side: live" in the <aside>. What lands
//    there on a hard load of /dash/settings, and what does `next build` say?
export default function DashLayout({ children, side }) {
  return <div>{children}<aside>{side}</aside></div>
}
// 2. Two pages, both ending in notFound(); Book() sleeps 300 ms and then calls it.
//    curl reports a different status code for each. Which is which, and why?
export default async function Early() { await connection(); notFound() }
export default async function Late() {
  await connection()
  return <Suspense fallback={<p>Loading...</p>}><Book /></Suspense>
}
// 3. Price is a 'use client' component that renders {money.format()}. What does a
//    request to /money return, and what does the value echoed in the error prove
//    about how far the prop got?
class Money {
  constructor(cents) { this.cents = cents }
  format() { return '$' + (this.cents / 100).toFixed(2) }
}
export default function Page() { return <Price money={new Money(1999)} /> }
// 4. A dynamic page renders two <Row/>s, and each one awaits hits(). The API
//    counts every request it serves. What number does each row print, how many
//    lines does one page load add to the API's log, and does 'no-store' change it?
const hits = () =>
  fetch('http://localhost:4170/hits', { cache: 'no-store' }).then((r) => r.json())

// 5. Requests every 2 s against `next start`; the page was prerendered at build
//    time. At t=6s the response carries x-nextjs-cache: STALE. Which timestamp
//    does that response show, which one does t=8s show, and which file changed?
export const revalidate = 5
export default function Page() {
  return <p>generated at {new Date().toISOString()}</p>
}
// 6. What status and what body does GET /api/go return, and what is err.digest?
export async function GET() {
  try {
    redirect('/thanks')
  } catch (err) {
    return Response.json({ redirected: false })
  }
}
// 7. This route file exports GET and POST and nothing else. What do OPTIONS,
//    PUT and HEAD on /api/products answer, and which response header on the
//    first of the three tells you where its answer came from?
export async function GET() { return Response.json({ products: ['p1', 'p2'] }) }
export async function POST(req) { return Response.json(await req.json(), { status: 201 }) }

// 8. proxy.js mints a nonce per request and sets it in the CSP header for /login.
//    /login is a Server Component holding one 'use client' button, and `next build`
//    marks it ○ (Static). How many nonce= attributes does the served HTML carry,
//    what does Chrome do with it, and which one-line change fixes it?
const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
const csp = `script-src 'self' 'nonce-${nonce}' 'strict-dynamic';`
// 9. panel.module.scss, imported as `styles`, declares $accent: #1565c0, then
//    ":export { accent: $accent }" and ".title { color: $accent }", and the heading
//    really is blue. What do these two lines print, and what does `next build` warn?
<p>accent is {String(styles.accent)}</p>
<p>keys: {Object.keys(styles).join(', ')}</p>
// 10. next.config.mjs sets output: 'standalone'. You copy .next/standalone to a
//     server and run `node server.js`. GET / answers 200 with exactly the right
//     markup, but the page is unstyled and inert and /robots.txt is 404. What did
//     the file trace leave behind, and which two paths must you copy yourself?