The Building Blocks

Your trip planner works. It has a frontend and a backend, all handled by Next.js. The pages display what the user sees. The API routes handle the AI and the secrets. Clean separation. Everything works.

Now try this. Ask Claude Code to add a loading spinner while the trip is generating. Then ask it to show an error message if something goes wrong. Then ask it to add a “save this trip” button at the bottom of each itinerary.

Each change works on its own. But notice what’s happening to your main page file. Every new feature touches the same file. The loading spinner needs to show and hide. The error message needs to appear and disappear. The save button needs to know which trip it belongs to. Claude Code is juggling all of these in one big page, and every time you add something, it has to be careful not to break something else.

This is where single-file pages start to struggle. Not because the code is bad, because the approach doesn’t scale. Imagine a page with ten features, each one showing, hiding, and updating different parts of the screen. It’s like trying to renovate every room in a house at the same time with one contractor who has to remember the state of every room at once.