Claude Code Guide
বাংলায় পড়ুন

20 min / intermediate / 5 steps

Start a Next.js Project with Claude Code

Scaffold, configure, build, test, and deploy a production-ready Next.js 16 App Router project using Claude Code as your development partner.

Claude Code is not a code generator you paste from. It is a development partner that reads your project, understands context, and keeps your conventions consistent from the first file to the last commit. This tutorial walks through a full Next.js workflow: scaffold with one prompt, configure a proper CLAUDE.md, build a real feature with data fetching, lock in TypeScript strict mode and tests, then ship to Vercel. By the end you will have a live project and a repeatable process for every Next.js project after this.

follow along in

You need: A Claude account. Open claude.ai in a browser, or the Claude desktop app.

  1. step 01 / 05

    Scaffold with one prompt

    One prompt creates the full project. Specify App Router, TypeScript strict mode, Tailwind CSS 4, and your preferred src layout. Claude handles the scaffolding, installs dependencies, and confirms the dev server starts.

    Prompt
    Create a Next.js 16 App Router project called dashboard-app. TypeScript strict mode, Tailwind CSS 4, src/ layout. Start with a minimal home page. Run dev and confirm it starts.

    what you should see

  2. step 02 / 05

    Set up your CLAUDE.md

    A project CLAUDE.md tells Claude your conventions so it applies them consistently across every file it touches. Cover build commands, naming conventions, component patterns, and import style. This is the single biggest leverage point for a clean codebase.

    Prompt
    Generate a CLAUDE.md for this project. Conventions: Server Components by default, named exports only, PascalCase component files, no barrel files, @/ imports, strict TypeScript, Tailwind only for styling.

    what you should see

  3. step 03 / 05

    Build your first feature

    Build a dashboard page that fetches data server-side. This covers the core App Router pattern: async Server Component, loading state with Suspense, and a reusable card component with typed props.

    Prompt
    Build a dashboard page at app/dashboard/page.tsx. Async Server Component, fetches user stats from a mock function in lib/data.ts, displays stats in a StatCard grid, Suspense with loading skeleton, all TypeScript typed.

    what you should see

  4. step 04 / 05

    Add tests and types

    Claude writes Vitest tests for the components and utility functions, verifies TypeScript strict mode passes with zero errors, and flags any type gaps it finds. No untested code ships.

    Prompt
    Add Vitest and Testing Library. Write tests for getUserStats and StatCard. Run them. Then run tsc --noEmit and fix any TypeScript errors.

    what you should see

  5. step 05 / 05

    Deploy to Vercel

    One command ships the project live. Vercel detects Next.js automatically, builds with the right settings, and gives you a production URL. No configuration file needed for a standard Next.js 16 App Router project.

    Prompt
    Commit everything and deploy to Vercel production.

    what you should see

Tell someone what you built

Just finished "Start a Next.js Project with Claude Code" on Claude Code Guide. Took about 20 min, and it's free: https://claudecodeguide.dev/tutorials/nextjs-with-claude

Share on LinkedIn

New guides, when they ship

One email, roughly weekly. CLAUDE.md templates, workflows I actually use, and the cut-for-length stuff that does not make the public guides. One-click unsubscribe.

Or read Product Field Notes, the Substack