Recipe 02 · Choose your ingredients
Next.js + React + TypeScript
For a richer web application when a simple page is no longer enough.
Learn by building: Open the guided GRC project lesson for this stack.
Each recipe uses the same learning path: understand the ingredients, follow one realistic example, build a small first version, test failure cases, then decide whether to add more. You do not need every ingredient on day one.
All five recipes · Jump to a recipe
When to choose this
What problem does it solve?
A dashboard or portal with reusable screens, changing data, and a real need for server-side features.
Try the simpler option first: Try a static HTML/JavaScript dashboard first if nobody needs accounts or shared edits.
New to the terminology? Start with What Is a Technology Stack? or follow the browser-to-server diagram.
Under the hood
Meet the ingredients
React components written in TypeScript, organized with Next.js
Next.js server functions or API routes when needed
Start with versioned JSON or Markdown for reference data; PostgreSQL for shared records
GitHub
Why it works with AI-assisted coding: AI tools can generate and explain small typed components, helping you review one interface at a time. TypeScript can surface certain mistakes early, but it does not replace tests.
See the stack in action
One project, from input to result
Goal: Filter a control-status dashboard
Five fictional controls with owner, status, and due date in JSON
React renders cards and filters them; Next.js organizes pages; TypeScript defines record shapes
A dashboard with Open and Complete filters
Your first working milestone
One page, five sample controls, one working filter; no accounts or database
Filtering changes visible controls and shows a useful empty state
Missing fields do not crash the page; invalid records have clear fallbacks
Only then consider: Add authenticated server functions and shared storage only when people must securely edit records
Three GRC ideas
What could you build?
- Compliance status dashboard with filterable controls
- Interactive control mapping across frameworks
- GRC learning portal with progress tracking
Your first version
Build a little, test a little
- Sketch one dashboard screen with fictional controls and status values.
- Build a read-only version using local sample data.
- Only add accounts, server functions, and PostgreSQL when users must securely manage shared records.
- Test empty states, permissions, and a failed data request before deploying.
Where it runs: Choose hosting that supports the Next.js features you use, such as a compatible managed Node.js platform or an appropriately configured AWS deployment. A static export works only if your app does not require runtime server features.
Ask AI, then decide
A prompt worth trying
My GRC project needs a dashboard. First identify which requirements genuinely need Next.js server features or a database. Suggest a static version, then a shared-records version. Explain tradeoffs and tests.
Review the recommendation against your Playbook blueprint. Ask what can be removed, what could go wrong, and how you will test it.