Hack the Hill / Build with AISlides ↗

Build kit.

The starter, AI prompts, and docs for your next build.

Start here / npm package

Your app, scaffolded.

create-hth-app includes Next.js, the Worker API, local D1, and instructions for Codex and Copilot. Use Node.js 22 or newer.

npm exec --allow-remote=root --yes --package=https://github.com/Aditya-Baindur/hack-the-hill-nextjs-intro/releases/download/starter-v0.1.1/create-hth-app-0.1.1.tgz -- create-hth-app my-idea-board
cd my-idea-board
npm install
npm run db:migrate
npm run dev

Open localhost:3000. One command starts both servers; Ctrl+C stops them. No Cloudflare account is needed for the local demo.

Download npm package ↗ · Package source ↗

Your AI teammate

Pick one. Start small.

Codex

Open the app folder in Codex, or launch codex there. Start with “Explain this app.” Then ask for one change and review the diff.

CLI setup ↗ · AGENTS.md ↗

GitHub Copilot

Open the folder in VS Code and sign in to Copilot. Use Ask to explain a file, then Agent to make a small edit. Review the result and run it.

IDE setup ↗

Try it with either tool

Read the project instructions and app/idea-board.tsx. Add a live character counter beside the idea input, using the existing 120-character limit. Keep the design minimal and leave the API unchanged. Explain the diff, run the relevant checks, and give me a browser check for typing, clearing, and submitting the form.

01 / Code

The complete example

Next.js UI

View the app files ↗
The form and list live in idea-board.tsx.

Worker + D1

View the API files ↗
The schema, binding, and API are here.

02 / Architecture

One idea, four stops

Browser→Next.js UI→Worker API→D1

Next.js makes the page and interactive form. The Worker validates HTTP requests and uses its D1 binding. D1 stores rows so ideas remain after refresh.

03 / Run locally

Two ways to run

With the starter package, run npm run dev from your app folder. The commands below are for the original demo/ in the workshop repository.

Worker · :8787

  1. cd demo/worker
  2. npm install
  3. npm run db:migrate
  4. npm run dev

Next.js · :3000

  1. cd demo
  2. npm install
  3. npm run dev
  4. Open localhost:3000

The Worker uses a local D1 database by default. The all-zero database ID in wrangler.jsonc is a local placeholder. To deploy, create a real D1 database, replace the ID, apply the migration with --remote, and deploy the Worker.

04 / AI workflow

Prompt → inspect → run → verify

Use AI for a plan, one file, a code review, or a debugging hypothesis. Give it the exact stack and error output. Check the changed code and behavior yourself. Keep private data and credentials out of prompts and public client variables.

Open the Markdown prompt pack ↗

1. Plan

You are my pair programmer for a beginner workshop. We have a Next.js App Router UI, a Cloudflare Worker API, and a D1 database. Plan the smallest hackathon idea board with GET /ideas and POST /ideas. Give me the file list, request flow, and one test for each step. Do not write code yet. Avoid extra services.

2. D1 schema

Review this D1 migration for an ideas table with integer id, required title limited to 120 characters, and a creation timestamp. Explain each constraint in beginner language. Point out any change needed for SQLite/D1. Keep it to one migration file.

3. Worker API

Using the current Cloudflare Workers and D1 docs, write a TypeScript Worker for GET /ideas and POST /ideas. The D1 binding is env.DB. Validate a trimmed title of 1–120 characters, use a prepared statement with .bind(title), return JSON status codes, and support browser CORS for this public demo. List assumptions and a curl check for each route. Do not add an ORM or authentication.

4. Next.js UI

Using the Next.js App Router, write a small Client Component that GETs ideas from NEXT_PUBLIC_API_URL, renders them, and POSTs a new title. Show loading, saving, and error states. Do not place secrets in NEXT_PUBLIC_ variables. Give me one browser test that proves the data survives refresh.

5. Review

Review this diff as a careful teammate. Check input validation, parameterized SQL, CORS behavior, loading and error states, accessibility, local-versus-remote D1 commands, and accidental secrets. Report specific problems with file and line references. Do not rewrite unrelated code.

6. Debug

The expected behavior is: [expected]. The actual behavior is: [actual]. The exact command and error are: [paste]. Relevant files: [paste]. Give the most likely cause, the smallest test to confirm it, and then the smallest fix. Do not guess from the symptom alone.

05 / Checkpoints

Prove each layer works

  1. Open http://localhost:8787/ideas. You should see seeded JSON.
  2. Add an idea in the Next.js page at http://localhost:3000.
  3. Refresh. Your new idea should still be there.
  4. Try a blank title. The API should reject it.
  5. Ask AI to explain a failure using the exact error and a small test.

06 / Official docs

Keep learning