What Is Next.js? The React Framework Your AI Keeps Generating

Why AI Coders Need to Know This

Here's what happens to most vibe coders: you ask your AI to build something — a dashboard, a blog, a SaaS landing page. The AI generates a project. You look at the files and see app/, layout.tsx, page.tsx, next.config.js, and you have no idea what any of it means.

That's Next.js. And if you don't understand the basic structure, you can't debug it when something breaks. You can't tell your AI what's wrong. You'll be stuck copying error messages and hoping for the best.

You don't need to master Next.js. You need to understand what it does so you can work with your AI effectively when it generates Next.js code.

React vs. Next.js: What's the Difference?

Think of it like this: React gives you the materials to build a house — bricks, wood, nails. Next.js gives you the materials plus a blueprint, plumbing, and electrical already wired up.

The Next.js File Structure Your AI Generates

When your AI creates a Next.js project, you'll see something like this:

my-app/
├── app/
│   ├── layout.tsx      ← wraps every page (header, footer, global styles)
│   ├── page.tsx        ← the homepage (what shows at /)
│   ├── about/
│   │   └── page.tsx    ← the about page (what shows at /about)
│   ├── blog/
│   │   ├── page.tsx    ← blog listing (what shows at /blog)
│   │   └── [slug]/
│   │       └── page.tsx ← individual blog posts (/blog/my-post)
│   └── api/
│       └── users/
│           └── route.ts ← API endpoint (backend logic at /api/users)
├── public/             ← static files (images, fonts)
├── next.config.js      ← Next.js settings
├── package.json        ← dependencies and scripts
└── tsconfig.json       ← TypeScript settings

The magic: folders become URLs. Create a folder called app/pricing/ with a page.tsx inside it, and your site now has a /pricing page. No router configuration. No import statements. The folder structure is the routing.

Server Components vs. Client Components

This is the single most confusing thing about modern Next.js — and the #1 reason AI-generated Next.js code breaks.

Here's what this looks like in practice:

// ❌ This BREAKS — server component trying to use browser features
export default function Counter() {
  const [count, setCount] = useState(0)  // ERROR!
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

// ✅ This WORKS — marked as client component
'use client'
export default function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Why your AI gets this wrong: AI models were trained on older React code where everything ran in the browser. They'll sometimes generate components with useState or onClick without adding 'use client'. When you see the error "useState is not a function" or "Event handlers cannot be passed to Server Component" — this is why.

API Routes: Your Backend in a Folder

One of Next.js's most powerful features for vibe coders: you can write backend code right inside your project. No separate server. No Express.js setup. Just create a file in app/api/.

// app/api/users/route.ts
import { NextResponse } from 'next/server'

export async function GET() {
  // This runs on the server, not in the browser
  const users = await db.query('SELECT * FROM users')
  return NextResponse.json(users)
}

export async function POST(request: Request) {
  const body = await request.json()
  const newUser = await db.insert('users', body)
  return NextResponse.json(newUser, { status: 201 })
}

Your frontend calls /api/users and gets data back. Your REST API lives right next to your UI code. When you ask your AI to "add a backend," this is usually what it creates.

What AI Gets Wrong About Next.js

• Missing 'use client': The #1 bug. AI generates interactive components without the directive. Fix: add 'use client' at the top.
• Mixing App Router and Pages Router: Next.js has two routing systems. The old one uses pages/, the new one uses app/. AI sometimes generates code for the wrong one. If you see getServerSideProps — that's the old system.
• Import confusion: AI imports next/router (old) instead of next/navigation (new). If routing isn't working, check imports.
• Over-engineering: AI might generate Next.js for a simple calculator or single-page tool. You can ask it to use plain React + Vite instead.

Deploying Next.js (It's Ridiculously Easy)

Next.js was built by Vercel, and deploying to Vercel is effectively one click:

1. Push your code to GitHub
2. Connect the repo to Vercel
3. Vercel detects Next.js automatically and deploys it

You can also deploy to other platforms — Netlify, Railway, a VPS — but Vercel is the path of least resistance because they literally built the framework.

When to Use Next.js (and When Not To)

What to Learn Next

• What Is React? — Understand the library Next.js is built on.
• What Is TypeScript? — Next.js projects use TypeScript by default.
• What Is a REST API? — Understand the API routes Next.js generates.
• What Are ES Modules? — How import/export works in Next.js files.
• What Is Vercel? — The deployment platform built for Next.js.
• What Are React Server Components? — The feature that splits Next.js code between server and browser. Essential for App Router.
• What Is React Router? — Client-side routing for React apps (Next.js has its own router, but understanding routing concepts helps).
• What Is Edge Computing? — What "edge runtime" means when Vercel deploys your Next.js middleware.
• Deploy to Vercel with AI — Step-by-step tutorial to get your Next.js app live.
• What Are Server Actions? — The Next.js feature AI puts in every form. Understand 'use server'.
• What Is React Suspense? — Why AI keeps wrapping your components in loading states.
• What Is Remix? — The alternative React framework AI sometimes suggests instead of Next.js.

FAQ