Lesson 4.1 · 40 minHow the backend works

What you will have

You can follow a form submission from the browser to the server and back, and you can point to the request, the response and the status code in the browser's network tab. You also know why keys live in environment variables and never in the code or the chat.

Video

The video for this lesson is not recorded yet.

Prompts used in this lesson

Part 6 — Demonstration: a tiny endpoint

Purpose: I am learning how requests and responses work, so I need one tiny test endpoint.

Context: this is our Next.js App Router project at checkpoint lesson-3.9. There are no API endpoints yet. I created .env.local myself with one variable, GREETING_NAME. Do not open or print .env.local.

Done looks like:
- A GET request to /api/time returns JSON with two fields: "time" (the server's current time as an ISO string) and "greeting" ("Hello from " plus the value of the GREETING_NAME environment variable).
- The time must be produced on each request, not fixed at build time.
- Nothing else in the project changes.

Constraints: use a route handler, the standard App Router way. No new packages. This endpoint is temporary; I will ask you to remove it at the end of the lesson.

Before you report: make sure the dev server is running, request /api/time twice a few seconds apart, and show me both responses and their status codes.

Part 7 — Clean up

Purpose: remove the temporary test endpoint so the project matches checkpoint lesson-3.9 again.

Done looks like: the /api/time route and its folder are deleted, nothing else is changed, and `git status` shows a clean working tree.

Before you report: run git status and the production build, and tell me the result of both.

Do along

Pause the video where a step says so and do it on your own project.

1. Before you start: project at checkpoint lesson-3.9, dev server running.
2. Pause after Part 3. Open your landing page with the Network tab open and reload. Click the first line and find the URL, the method and the status code.
3. Pause after Part 5. Create .env.local in the project root by hand. Add GREETING_NAME= followed by your own business name (one word, no spaces). Save. Run git status and confirm .env.local is not listed.
4. Pause after Part 6. Give Claude the endpoint prompt from Part 6 unchanged.
5. Open /api/time in the browser with the Network tab open. Find the request, the status code and the response body. Reload and watch the time change.
6. Request a wrong address and find the 404.
7. After Part 7, give Claude the clean-up prompt.

Check your work

1. With /api/time open, point to the request line in the Network tab. Expected: URL ending in /api/time, method GET.
2. Point to the status code. Expected: 200.
3. Open the response body. Expected: JSON with time and greeting, and the greeting contains your business name.
4. Load the wrong address. Expected: status 404.
5. After clean-up, run git status. Expected: nothing to commit, and .env.local is not listed.

Common problems

• The Network tab is empty → it records only while it is open → keep developer tools open and reload the page.
• The greeting says "Hello from undefined" → the dev server started before .env.local existed, or the name is misspelled → check the spelling in the file, restart the dev server, reload.
• The time never changes → the response was produced once and cached → tell Claude: "the time from /api/time does not change between requests; make it run on every request and test it twice".
• /api/time returns 404 → the file is in the wrong folder or the dev server did not pick it up → tell Claude the status code and ask it to check the route's location and test again.
• .env.local shows up in git status → the ignore rule is missing → tell Claude: ".env.local is not ignored by Git, fix .gitignore and confirm with git status". Do not commit before this is fixed.

Homework

About 20 minutes. Keep written answers in your own notes, outside the project folder. Nothing here changes the project.

1. Three requests on your live site. Open your own domain with the Network tab open. Pick the page itself, one image and one address you break on purpose. For each, write down the URL, the method and the status code. Done when: your notes have three lines and one of them shows 404.
2. Browser or server? List the pieces of your own lead path: the hints next to form fields, the rule "an email must look like an email", the database password, the key that sends email, saving the lead, the thank-you page. Mark each "browser", "server" or "both", with one sentence of reason. Done when: every item has a place and a reason, and nothing secret is marked "browser".
3. The key rule in your words. Write three sentences for a future helper of your business: why a key never goes into the code, into a chat with Claude, or into a variable whose name starts with NEXT_PUBLIC_. Done when: someone who has not seen this lesson could follow the rule from your note.