Build a Next.js website with AI

Building a website with AI has a sweet spot, and it's Next.js: it's what the coding assistants know best, it deploys for free, and the "plan → build → deploy" loop is genuinely smooth if you don't fight it. The failure mode is asking the AI to "build me a website" in one shot and getting a tangle you can't edit. The working mode is planning the structure first, building page by page, and letting the deploy platform do the boring part. Three to five hours, zero cost.

Planning first isn't bureaucracy — it's what keeps the AI from inventing a random structure you then have to untangle. A sitemap up front means every build step has a target.

What you'll walk away with

• A clear sitemap and a breakdown of the reusable components each page needs
• A working Next.js site with all your planned pages
• A live URL, deployed for free, with room to add a custom domain
• A codebase organized enough to keep extending

Step by step, with the judgment that matters

1. Plan the structure with ChatGPT. State the site's purpose and pages, and ask for a sitemap plus the reusable components each page needs and a simple content structure. The component breakdown is the part that pays off later — a site built from reused components is one you can restyle in one place instead of twenty.

2. Build with Cursor, page by page. Ask it to scaffold a Next.js App Router project with Tailwind and build the pages from your sitemap, keeping components reusable. Build and check each page rather than generating everything at once — it's far easier to catch a layout problem on one page than to debug ten at once.

3. Deploy with Vercel. Push to a Git repo and import it into Vercel — it auto-detects Next.js with zero config and deploys. Add a custom domain later under the project's Domains settings. The Hobby plan is free and genuinely enough for a personal or small-business site.

A real run

For a freelance portfolio, ChatGPT proposes four pages (Home, Work, About, Contact) and a shared header/footer plus a reusable project card. In Cursor you scaffold the project, build each page, and reuse the card component across the Work grid. One styling bug on mobile gets fixed in the shared component, which fixes it everywhere. Push to GitHub, import to Vercel, live in minutes. About four hours total.

Where it goes wrong

• "Is Vercel really free?" Yes — the Hobby plan covers personal and small-business sites at no cost.
• Styling is inconsistent across pages. You didn't reuse components. Ask Cursor to extract repeated UI into shared components so one change propagates.
• The build fails on Vercel but works locally. Usually a missing dependency or env var. The deploy log names it — read it before guessing.

The honest cost

Free. ChatGPT, Cursor's free tier, and Vercel Hobby cover the whole build. You'd only pay for Cursor Pro during heavy sessions, or a custom domain (~$10–15/year) if you want your own URL.