Lorem Ipsum Lab Project Title
A one-line description of what this experiment is exploring and why it matters.
- Next.js 16
- React 19
- TypeScript
- Tailwind 4
- MDX
- Museum
- Experiential
- Marketing
- Content
Built by
Jason Yarrington
Web Solutions
Hands-on with this build from frontmatter to deploy. Curious about anything that makes the gap between "draft in a doc" and "live on the site" smaller.
(01)Overview
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- What we tried: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Why it matters: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Where it could go: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
(02)Key Code
The piece that made it click
Lorem ipsum dolor sit amet, consectetur adipiscing elit. The snippet below is the smallest piece of code that captures the idea — everything else is plumbing around this.
import { NextResponse } from "next/server";
import { fetchDocFromPantheon } from "@/lib/pantheon";
export async function GET(
_req: Request,
{ params }: { params: { id: string } },
) {
const doc = await fetchDocFromPantheon(params.id);
if (!doc) {
return NextResponse.json({ error: "not found" }, { status: 404 });
}
return NextResponse.json(doc, {
headers: {
"Cache-Control": "s-maxage=60, stale-while-revalidate=300",
},
});
}
A thin route handler that fetches a doc by ID and lets the CDN handle re-validation.
(03)Approach
How the pieces fit together
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
- Step one — lorem ipsum dolor sit amet.
- Step two — consectetur adipiscing elit, sed do eiusmod.
- Step three — tempor incididunt ut labore et dolore.
const PANTHEON_API = process.env.PANTHEON_API_URL!;
export async function fetchDocFromPantheon(id: string) {
const res = await fetch(`${PANTHEON_API}/documents/${id}`, {
headers: { Authorization: `Bearer ${process.env.PANTHEON_TOKEN}` },
next: { revalidate: 60 },
});
if (!res.ok) return null;
return res.json();
}
Wrapping the Pantheon Docs API in a small typed helper keeps fetch options consistent across routes.
(04)Screencast
A short walkthrough of the result
Below is a short screencast walking through the editing experience end-to-end — from authoring in the docs tool through publishing on the live site.
Takeaway
Lorem ipsum dolor sit amet, consectetur adipiscing elit — sed do eiusmod tempor incididunt ut labore.
(05)Next Steps
Where this could go next
Lorem ipsum dolor sit amet, consectetur adipiscing elit. A few directions worth exploring once the foundation is in place:
- Idea one — lorem ipsum dolor sit amet.
- Idea two — consectetur adipiscing elit.
- Idea three — sed do eiusmod tempor incididunt.
Team
Experiential Team
Fast Forward
The crew that builds for screens you walk up to, not just sit in front of. Touch tables, kiosks, projected installs, and the stitched-together web tooling that keeps them all in sync.
