Exercise 1: The Catch-All Route — Possible Solution
====================================================================
THE ROUTE FILE
------------------------------
Per this chapter, app/[...path]/page.tsx:
export default async function CatchAllPage({ params }: PageProps<'/[...path]'>) {
const { path } = await params;
const fullPath = path.join('/');
const page = await prisma.page.findUnique({ where: { fullPath } });
if (!page) {
notFound();
}
return
{page.title}
;
}
WHY EACH STEP IS NEEDED
------------------------------
params is awaited because Next.js 16 requires async access to it (per
Chapter 1's own baseline notes) - accessing params.path directly without
awaiting first would be a type error, not just a runtime one.
path.join('/') is needed because params.path arrives as a string array
(one element per URL segment), not a pre-joined string - the fullPath
column this chapter's own Chapter 2 designed expects a single
slash-joined string like "programming/python", not an array.
CONFIRMATION
------------------------------
Visiting the real stored path (e.g. /programming/python if that page
exists in the database) renders that page's own title correctly,
confirming the array was joined correctly and the Prisma lookup matched
the right row.
WHY THIS WORKS AS AN ANSWER
------------------------------
It correctly awaits params before destructuring it, correctly joins the
resulting array into the slash-separated string format the database
column actually stores, and confirms the result against a real page
rather than just trusting the code compiles.