২০ মিনিট / intermediate / 5 ধাপ

Claude Code দিয়ে একটা Next.js project শুরু করুন

Claude Code-কে development partner হিসেবে নিয়ে একটা production-ready Next.js 16 App Router project scaffold, configure, build, test আর deploy করুন।

Claude Code এমন কোনো code generator নয় যেখান থেকে copy-paste করে নেবেন। এটা একজন development partner, যে আপনার project পড়ে, context বোঝে, আর প্রথম file থেকে শেষ commit পর্যন্ত আপনার convention একই রাখে। এই tutorial-এ পুরো একটা Next.js workflow দেখবেন: একটা prompt দিয়ে scaffold, ঠিকঠাক একটা CLAUDE.md configure করা, data fetching সহ একটা আসল feature বানানো, TypeScript strict mode আর test পাকা করা, তারপর Vercel-এ ship করা। শেষে আপনার হাতে থাকবে একটা live project, আর এরপরের প্রতিটি Next.js project-এর জন্য বারবার ব্যবহার করার মতো একটা process।

কোথায় follow করবেন

যা লাগবে: আপনার কম্পিউটারে Claude Code install করা থাকতে হবে। Install guide (English)

ধাপ 01 / 05
একটা prompt দিয়ে scaffold করুন
একটা prompt-এই পুরো project তৈরি হয়ে যায়। App Router, TypeScript strict mode, Tailwind CSS 4, আর আপনার পছন্দের src layout বলে দিন। Claude scaffold করবে, dependency install করবে, আর dev server চালু হচ্ছে কি না confirm করবে।
bash
```
claude "'dashboard-app' নামে একটা Next.js 16 project বানান, এগুলো সহ:
- App Router (Pages Router না)
- TypeScript, strict mode-এ
- Tailwind CSS 4
- src/ directory layout
- ESLint আর Prettier configure করা
- app/page.tsx-এ একটা basic home page, যেখানে শুধু Hello লেখা থাকবে

বানানো হয়ে গেলে npm run dev চালিয়ে দেখুন চালু হয় কি না।"
```
আপনি যা দেখবেন
Claude আপনার Next.js project scaffold করছে

ধাপ 02 / 05

আপনার CLAUDE.md setup করুন

Project-এর CLAUDE.md Claude-কে আপনার convention জানিয়ে দেয়, তাই যে file-এই হাত দিক, Claude সব জায়গায় একইভাবে সেগুলো মেনে চলে। এতে রাখুন build command, naming convention, component pattern আর import style। Codebase পরিষ্কার রাখতে এর চেয়ে বেশি কাজে দেয় এমন আর কিছু নেই।

bash

cat > CLAUDE.md << 'EOF'
# CLAUDE.md - dashboard-app

## Stack
Next.js 16 (App Router), TypeScript (strict), Tailwind CSS 4, Vercel

## Commands
npm run dev      # Turbopack সহ dev server
npm run build    # Production build
npm run lint     # ESLint
npm run test     # Vitest (যোগ করার পর)

## File-এর নাম
- Component: PascalCase file, যেমন UserCard.tsx
- Utility: camelCase file, যেমন formatDate.ts
- Route segment: hyphen দিয়ে lowercase, যেমন app/user-settings/page.tsx

## Component pattern
- Default হিসেবে Server Component
- 'use client' শুধু তখনই, যখন interactivity বা browser API লাগবে
- Props interface-এর নাম [ComponentName]Props, component-এর ঠিক ওপরে define করা
- Shared component-এ কোনো default export নয় (শুধু named export)
- React.FC type annotation নয়

## Import style
- @/ alias দিয়ে absolute import (tsconfig-এ configure করা)
- Group: 1) React/Next, 2) third-party, 3) internal (@/), 4) relative
- কোনো barrel file নয় (index.ts re-export): সরাসরি source file থেকে import করুন

## TypeScript-এর নিয়ম
- any নয়। unknown ব্যবহার করুন, type guard দিয়ে narrow করুন।
- সহজ local variable-এর type infer হতে দিন। সব exported function-এ explicit type দিন।
- Object shape-এর জন্য interface, union আর mapped type-এর জন্য type।

## Styling
- শুধু Tailwind utility class। CSS module নয়, inline style নয়।
- Class variant clsx বা cn helper দিয়ে।
- Dark mode dark: prefix দিয়ে (class strategy)।

## যা করবেন না
- Pages Router-এর pattern ব্যবহার করবেন না (getServerSideProps, _app.tsx, ইত্যাদি)
- Production code-এ console.log যোগ করবেন না
- আগে না জানিয়ে নতুন dependency যোগ করবেন না
EOF

আপনি যা দেখবেন

CLAUDE.md লেখা হয়ে গেছে, এখন active

ধাপ 03 / 05

আপনার প্রথম feature বানান

এমন একটা dashboard page বানান যেটা server-side-এ data fetch করে। এতে App Router-এর মূল pattern-টা পুরোটাই চলে আসে: async Server Component, Suspense দিয়ে loading state, আর typed props সহ বারবার ব্যবহার করা যায় এমন একটা card component।

bash

claude "app/dashboard/page.tsx-এ একটা dashboard page বানান, যেটা:
1. async Server Component হবে ('use client' থাকবে না)
2. lib/data.ts-এর একটা mock async function থেকে user stats fetch করবে
3. Stats-গুলো StatCard component-এর grid-এ দেখাবে
4. Loading skeleton সহ একটা Suspense boundary থাকবে
5. সব component-এ named export ব্যবহার করবে
6. সবকিছু TypeScript interface দিয়ে ঠিকঠাক type করা থাকবে"

আপনি যা দেখবেন

Claude dashboard feature বানাচ্ছে

ধাপ 04 / 05
Test আর type যোগ করুন
Claude component আর utility function-গুলোর জন্য Vitest test লেখে, TypeScript strict mode শূন্য error-এ pass করছে কি না দেখে, আর কোথাও type-এ ফাঁক পেলে জানিয়ে দেয়। Test ছাড়া কোনো code ship হয় না।
bash
```
claude "এই project-এ test যোগ করুন:
1. Vitest আর @testing-library/react install করুন
2. lib/data.test.ts-এ getUserStats()-এর unit test লিখুন
3. StatCard.test.tsx-এ StatCard-এর component test লিখুন
4. Test চালান, কিছু fail করলে ঠিক করুন
5. তারপর npx tsc --noEmit চালান, TypeScript error থাকলে ঠিক করুন"
```
আপনি যা দেখবেন
Test লেখা হলো, TypeScript verify হলো
ধাপ 05 / 05
Vercel-এ deploy করুন
একটা command-এই project live হয়ে যায়। Vercel নিজে থেকেই Next.js চিনে নেয়, ঠিক setting দিয়ে build করে, আর আপনাকে একটা production URL দেয়। Standard Next.js 16 App Router project-এর জন্য কোনো configuration file লাগে না।
bash
```
# আগে আপনার কাজ commit করুন
git add -A && git commit -m "feat: initial dashboard with tests"

# Production-এ deploy করুন
vercel --prod
```
আপনি যা দেখবেন
Production-এ deploy হয়ে গেছে

আপনি কী বানালেন, কাউকে জানান

Claude Code Guide-এ "Claude Code দিয়ে একটা Next.js project শুরু করুন" শেষ করলাম। সময় লাগল প্রায় ২০ মিনিট, আর এটা ফ্রি: https://claudecodeguide.dev/bn/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

একটা prompt দিয়ে scaffold করুন

আপনার CLAUDE.md setup করুন

আপনার প্রথম feature বানান

Test আর type যোগ করুন

Vercel-এ deploy করুন