Building Next.js Sites with Claude Code: A Practical Workflow

Key answer: Use Claude Code as a terminal-native pair programmer — let it scaffold your Next.js App Router project, generate and refactor components in place, and run your dev server while you review diffs. For cinematic 3D pages, describe the scene you want and pull production-ready React Three Fiber components from an AETumi 3D template instead of hand-wiring WebGL from scratch.

Claude Code is Anthropic's agentic coding tool that runs in your terminal. It reads your repository, proposes edits to real files, runs commands, and works turn-by-turn with you rather than dumping a single code blob into a chat window. That model fits Next.js unusually well, because a modern Next.js app is many small, interdependent files — routes, layouts, server and client components, config — exactly the kind of surface an agent can navigate.

Table of contents

• Why Claude Code suits Next.js
• The build workflow
• Working with the App Router
• Adding a cinematic 3D section
• Pulling AETumi templates into the project
• Prompt patterns that work
• FAQ
• Conclusion

Why Claude Code suits Next.js

Next.js pushes you toward a component-per-file discipline and a strict boundary between server and client code. When you ask a chat-only assistant for "a pricing page," it can only guess at your conventions. Claude Code instead reads your existing app/ directory, your tailwind.config, and your component library first, then writes code that matches what is already there. It edits files directly, so you review changes as diffs — the same way you would review a colleague's pull request.

The practical upshot: less copy-paste, fewer integration mismatches, and a tight loop where you can run npm run dev, look at the result, and ask for the next change without leaving the terminal.

The build workflow

Here is a repeatable workflow I use for a new marketing site or app front end. It assumes you have Node installed and Claude Code available in your terminal.

1. Scaffold once, conventionally. Create the project with the official tooling so structure is idiomatic:

npx create-next-app@latest my-site --ts --app --tailwind --eslint
cd my-site

2. Orient the agent. Before asking for features, let Claude Code read the repo and state the plan. A short prompt like "Read this project and summarize the routing structure and styling setup before we build" prevents it from inventing conventions you don't use.

3. Build in vertical slices. Ask for one route or one component at a time — layout, then hero, then pricing — and review each diff. Small slices keep changes reviewable and make regressions easy to spot.

4. Run and observe. Keep the dev server running. After each slice, refresh the browser, then describe the visual gap ("the hero is too tall on mobile; cap it at the viewport and center the headline") rather than re-specifying the whole component.

5. Commit at green. Commit whenever the app builds and looks right. Frequent commits give you clean rollback points if a later change goes sideways.

This loop — scaffold, orient, slice, observe, commit — is the core discipline. Everything else is detail.

Working with the App Router

Two Next.js specifics are worth calling out to the agent explicitly, because they cause the most avoidable bugs:

• Server vs. client components. App Router components are server components by default. Anything using state, effects, browser APIs, or event handlers needs the "use client" directive at the top of the file. When you ask for an interactive component, say so: "This is a client component with scroll state."
• Data and metadata belong on the server. Data fetching and the metadata export live in server components. Tell Claude Code to keep fetching out of client components so you don't accidentally ship secrets or bloat the client bundle.

A useful habit is to ask the agent to explain where a piece of logic should live before it writes it. That surfaces the server/client decision as a design choice instead of a silent default.

Adding a cinematic 3D section

This is where a generic AI workflow tends to stall. Writing raw WebGL — or even hand-rolling a Three.js scene inside React — involves renderer setup, resize handling, a render loop, camera controls, and disposal on unmount. It's a lot of boilerplate to get wrong.

The cleaner path in Next.js is React Three Fiber, the React renderer for Three.js. It lets you express a 3D scene as JSX components, which is exactly the shape Claude Code is good at generating and editing. The one gotcha to hand the agent: the R3F <Canvas> and its contents must be a client component, and in the App Router you typically load it with a dynamic import and ssr: false so the WebGL context never runs on the server.

Describe the outcome, not the math: "A full-viewport hero with a slowly rotating abstract mesh, subtle bloom, and a headline overlaid on top; pause the render loop when the section scrolls out of view." Let the agent produce the R3F component, then iterate on materials, lighting, and motion in small steps.

Pulling AETumi templates into the project

Rather than build every scene from zero, start from a finished, cinematic foundation and let Claude Code adapt it. AETumi is an AI-native 3D web platform — a library of Three.js, WebGL, and Next.js templates: interactive 3D components, scroll-driven scenes, and full page templates — designed to drop into a real build.

The workflow with an agent looks like this:

1. Pick a template or component that matches the section you need (a hero, a scroll sequence, a product showcase). 2. Bring the source into your project and point Claude Code at it: "Read this AETumi hero component and adapt it to our brand tokens and copy." 3. Iterate visually — swap the model, retune the palette, adjust motion timing — while the agent keeps the R3F plumbing intact.

Because AETumi ships full source on the Full Stack plan ($129, buy once, own for life), the agent has real, correct code to read and modify rather than a black box. For the tightest loop, AETumi also exposes an MCP integration so an AI agent can install assets into your project directly — see the docs for setup.

Original workflow: prompt → scaffold → 3D slice

Prompt patterns that work

A reusable prompt for the 3D step you can paste and adapt:

"Add a client-side hero section as its own component. Use React Three Fiber inside a <Canvas>, dynamically imported with ssr: false. Render [describe the mesh/scene]. Pause the animation frame loop when the canvas is off-screen using an intersection observer. Keep all data fetching and metadata in the parent server component. Match our existing Tailwind tokens."

Two rules make every prompt better: name the server/client boundary, and describe the visual result rather than the implementation. The agent handles the mechanics; you own the intent.

FAQ

Can Claude Code create a Next.js project from scratch? Yes. It can run the scaffolding command and then build out routes and components. Letting the official create-next-app tool generate the skeleton first keeps the structure idiomatic.

Does Claude Code understand the App Router vs. Pages Router? It works with both. Because it reads your project first, it follows whichever router you already use. State your intent if you're starting fresh and have a preference.

How do I add 3D without writing raw WebGL? Use React Three Fiber and describe the scene in plain language. For a production-ready starting point, adapt an AETumi 3D component or template rather than building the renderer plumbing by hand.

Can an agent install AETumi assets automatically? AETumi provides an MCP integration and CLI so AI coding agents can install its assets into a project directly. Setup is covered in the docs.

Is my code sent anywhere I don't control? Claude Code works against your local repository and shows edits as diffs you approve. Review changes as you would a teammate's pull request, and commit at each stable point.

Conclusion

Claude Code turns Next.js development into a fast, reviewable loop: scaffold conventionally, orient the agent, build in vertical slices, and observe results in the browser. The one place to not start from zero is cinematic 3D — pair React Three Fiber with a finished AETumi template and let the agent adapt it to your brand.

Ready to build? Explore the React Three Fiber collection, connect the AETumi MCP, and grab a lifetime plan at aetumi.app/pricing — the Full Stack plan includes full source and MCP access.