TanStackBeginner
Setup Next.js Project
create-next-app দিয়ে project তৈরি, প্রয়োজনীয় dependencies ও shadcn/ui install — বাংলায়।
12টি অংশবাংলা ভাষায়
প্রথম ধাপ — Next.js project তৈরি করা এবং আমাদের stack-এর تمام packages install করা।
create-next-app
Project createbash
bash
npx create-next-app@latest product-dashboard \
--typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd product-dashboardইনস্টল করা dependencies
Install packagesbash
bash
npm install axios \
@tanstack/react-query \
@tanstack/react-query-devtools \
@tanstack/react-table \
react-hook-form \
@hookform/resolvers \
zod- axios — HTTP requests - @tanstack/react-query — server state - @tanstack/react-query-devtools — ডিবাগ টুল - @tanstack/react-table — headless table - react-hook-form + @hookform/resolvers — form ও Zod integration - zod — validation
shadcn/ui setup
Init + add componentsbash
bash
npx shadcn@latest init
# আমরা যে components ব্যবহার করব
npx shadcn@latest add button input textarea label select \
dialog alert-dialog table badge skeleton sonnerসেটআপ verify
Runbash
bash
npm run devhttp://localhost:3000-এ project খুলবে। এখন থেকে প্রতিটি অধ্যায়ে এই project-তেই কোড যোগ করব।
Version নোট
এই কোর্স Next.js 15+/16 (App Router), React 19, TanStack Query v5, TanStack Table v8, React Hook Form v7, Zod 4 নিয়ে লেখা। ভিন্ন major version হলে API-র সামান্য পার্থক্য হতে পারে।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।