Front-end, back-end endpoints, and scheduled jobs — one repo, one deploy. That's why a solo builder reaches for Next.js.
01 · the scene
"So where does the server part go?"
my-day had a React front-end. But it also needed a back-end — an endpoint to talk to the model, and a job that runs once a day on its own. My mental picture was two separate things to build, host, and keep in sync. It felt like twice the project.
my-day — planning the build
// my picture: two separate projects front-end (React) → a website to host back-end (API + daily job) → ...a SECOND server to run? "do I really have to stand up and babysit a server too?"
Neill51% · the terrain
"I assumed the front-end and the back-end were two builds, two hosts, two things to keep in step. As a solo operator that sounded like double the work — and double the ways to break."
Claude49% · the execution
"I should've named the choice up front: Next.js puts the pages, the API routes, and the scheduled job in one repo that ships together. You weren't facing two projects — you were facing one, and I let you carry the heavier picture longer than needed."
02 · the why
React draws the screen. Next.js gives it a server.
React only handles the part that runs in the browser. The moment your app needs a server — an endpoint to call the model with a key the browser can't see, or a job that fires on a schedule — plain React isn't enough. Next.js is the full-stack framework built on top of React: pages, server-side code, API routes, and cron all live in one repo, and it deploys with near-zero config. One repo = the whole app.
▤
Pages
the front-end
Your React UI — the screens the user sees. The part React already gave you, now with a home.
⇄
API routes
the back-end, same repo
Server endpoints that live beside the pages — where the secret key lives and the model gets called.
⏱
Cron
scheduled jobs
Code that runs on a timer (a daily flag sweep), defined in the same project. No separate server.
The model: think of it as a building with the shop floor, the back office, and the night-shift all under one roof, sharing one address. You don't run three buildings — you run one and ship it with a single push. That's exactly how my-day works: Next.js pages + API routes + Vercel Cron for the daily processing, one repo.
03 · predict it
You have a React UI. You need to call the model with a secret key. Where does that code go?
The key must never reach the browser. Your app is React. What's the right move?
Not it. Putting the key in React leaks it to every browser (you met that scar with env vars), and a whole separate server is more than a solo build needs. There's a middle path that lives in the same repo.
Exactly. A Next.js API route is server code that ships in the same project as your pages. The browser calls your route, the route holds the key out of the browser's reach and calls the model. Front-end and back-end, one repo, one deploy — the whole point of Next.js.
04 · the walkthrough
One repo, front to back, in four frames.
app/page.tsx
step 1Your React pages live here — the front-end the user sees. Same React you already know.
app/api/chat/route.ts
step 2A server endpoint in the same repo. The browser calls it; it holds the secret key and talks to the model.
vercel.json — cron
step 3A scheduled job (e.g. a daily sweep) defined right in the project — no separate server to babysit.
git push → live
step 4One git push ships pages, API, and cron together. Front-end and back-end never drift out of sync.
05 · prove it · gate
Teach it back to unlock the payoff.
Same rule as always: answer it right, or the module isn't done.
What does Next.js give you that plain React doesn't?
// one correct answer unlocks Module 08
Not the load-bearing answer. Next.js is built on React, not instead of it — and it isn't about looks. Think about what a back-end needs that the browser can't do.
That's it. Next.js = React plus a server, in one box. Pages, API routes, and cron in one repo, one deploy — fewer moving parts, nothing drifting between a separate front and back end. Module unlocked. ↓
the durable idea
React draws the screen; Next.js gives it a server. The whole app — front-end, endpoints, scheduled jobs — in one repo that ships with a single push.
06 · factory payoff
⊘ locked — pass the teach-back to claim this piece of the factory
A real Next.js page + API route, ready to run.
A minimal Next.js App-Router page.tsx (the front-end) and a matching route.ts API endpoint (the back-end, where the secret key stays server-side) — the exact one-repo shape every consumer app in the portfolio starts from. Drop them in and you have front-and-back in one project, not two.