TanStack Start Project তৈরি করা

👋 ১. Introduction ও Episode 01-এর Recap

Episode 01-এ আমরা একটি গভীর mental model তৈরি করেছিলাম — TanStack Start আসলে কী, কেন এটি দরকার, এবং CSR, SSR, Hydration, Server Function-এর মতো ধারণাগুলো কীভাবে একসাথে কাজ করে।

সংক্ষেপে মনে করিয়ে দেওয়া যাক: TanStack Start হলো একটি full-stack, isomorphic meta-framework, যা TanStack Router-এর উপর তৈরি এবং Routing + Server + Data + Rendering — সবকিছু একসাথে পরিচালনা করে।

এই Episode-এ আমরা তত্ত্ব থেকে বাস্তবে চলে যাচ্ছি। আমরা হাতে-কলমে একটি TanStack Start project তৈরি করব, প্রতিটি ফাইল কেন আছে এবং কী করে তা গভীরভাবে বুঝব, এবং শেষে Server Function ব্যবহার করে একটি ছোট, বাস্তব কাজ করা feature (Counter) বানাব — যা সরাসরি official documentation থেকে নেওয়া।

এই Episode শেষে আপনি যা করতে পারবেন:

একটি নতুন TanStack Start project scaffold করা (একাধিক অফিসিয়াল উপায়ে)
Project-এর প্রতিটি core file (router.tsx, __root.tsx, routeTree.gen.ts, vite.config.ts) কী কাজ করে তা ব্যাখ্যা করা
একটি Route-এ Server Function যুক্ত করে data read/write করা
Dev server চালিয়ে বাস্তবে পরিবর্তন দেখা এবং সাধারণ setup সমস্যা সমাধান করা

🧰 ২. Prerequisites — শুরু করার আগে যা লাগবে

প্রজেক্ট শুরু করার আগে আপনার সিস্টেমে নিচের জিনিসগুলো থাকা দরকার।

প্রয়োজনীয়তা	কেন লাগবে
Node.js (একটি recent LTS ভার্সন)	Vite dev server এবং build tool চালানোর জন্য
একটি Package Manager (npm, pnpm, বা yarn)	Dependency install ও script চালানোর জন্য
Basic React ও JSX জ্ঞান	Route-গুলো মূলত React Component
Basic TypeScript পরিচিতি	TanStack Start-এর Type-safety পুরোপুরি উপভোগ করার জন্য (official docs TypeScript strongly recommend করে)
একটি Code Editor (যেমন VS Code)	TypeScript autocomplete ও error checking-এর সুবিধার জন্য

TypeScript বাধ্যতামূলক না হলেও, TanStack Start এবং TanStack Router-এর সবচেয়ে বড় শক্তি — Type-safe routing, Type-safe Server Function — এগুলো পুরোপুরি কাজে লাগাতে চাইলে TypeScript ব্যবহার করা official ভাবে recommended।

🧭 ৩. Project শুরু করার অফিসিয়াল উপায়সমূহ

TanStack-এর official documentation অনুযায়ী, একটি নতুন TanStack Start project শুরু করার কয়েকটি স্বীকৃত উপায় আছে। এই অংশে আমরা সবগুলো সংক্ষেপে দেখব, তারপর দুটো সবচেয়ে সহজ পথ গভীরভাবে অনুসরণ করব।

উপায়	কখন ব্যবহার করবেন
TanStack Builder (AI-first setup flow)	দ্রুত, guided ভাবে একটি working project পেতে চাইলে
TanStack CLI (`npx @tanstack/cli@latest create`)	Locally scaffold করতে চাইলে, package manager ও add-on (Tailwind, ESLint) বেছে নিতে চাইলে
Official Example ক্লোন করা (`gitpick`)	একটি প্রস্তুত, কাজ করা codebase থেকে শুরু করতে চাইলে
Build from scratch	প্রতিটি ধাপ নিজে হাতে করে ভেতরের কাঠামো সম্পূর্ণ বুঝতে চাইলে

এই সিরিজে আমরা CLI এবং Example ক্লোন করা — এই দুটো পথ দেখাব, কারণ এগুলো beginner-দের জন্য সবচেয়ে সহজ এবং official ভাবে সুপারিশকৃত। "Build from scratch" পদ্ধতির গুরুত্বপূর্ণ ফাইলগুলোও আমরা পরের অংশগুলোতে বিস্তারিত ব্যাখ্যা করব, যাতে ভেতরের কাঠামো সম্পূর্ণ স্পষ্ট হয়।

⚡ ৪. সবচেয়ে সহজ উপায়: TanStack CLI দিয়ে শুরু করা

Terminal খুলে যেই ফোল্ডারে project রাখতে চান সেখানে গিয়ে নিচের কমান্ড চালান:

npx @tanstack/cli@latest create

এই কমান্ড চালানোর পর CLI আপনাকে ধাপে ধাপে কয়েকটি প্রশ্ন করবে —

• কোন Package Manager ব্যবহার করবেন (npm/pnpm/yarn)
• কোন কোন add-on লাগবে (যেমন Tailwind CSS, ESLint)

উত্তর দেওয়ার পর CLI নিজেই একটি সম্পূর্ণ, কাজ করা project structure তৈরি করে দেবে — অর্থাৎ package.json, vite.config.ts, src/routes/ সবকিছু আগে থেকেই সঠিকভাবে configured থাকবে।

Beginner হিসেবে প্রথমবার প্রজেক্ট বানানোর জন্য এটাই সবচেয়ে নিরাপদ এবং দ্রুত পথ, কারণ কোনো ম্যানুয়াল configuration ভুল হওয়ার সুযোগ কম।

📥 ৫. Official Example ক্লোন করে শুরু করা (start-basic)

Episode 01-এ আমরা যে start-basic example দেখেছিলাম, সেটি সরাসরি ক্লোন করেও শুরু করা যায়। এর জন্য gitpick নামের একটি টুল ব্যবহার করা হয়, যা GitHub-এর একটি বড় repository থেকে শুধুমাত্র নির্দিষ্ট একটি subfolder ডাউনলোড করে আনে।

gitpick কেন লাগে?

TanStack-এর সব official example একটি বড় monorepo-তে (TanStack/router) একসাথে রাখা। পুরো repository clone করলে অনেক অপ্রয়োজনীয় ফাইল চলে আসবে। gitpick দিয়ে আমরা শুধুমাত্র আমাদের প্রয়োজনীয় example folder-টুকু নিয়ে আসতে পারি।

npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic cd start-basic npm install npm run dev

প্রতিটি লাইন কী করছে:

লাইন	কাজ
`npx gitpick ... start-basic`	GitHub থেকে `start-basic` example folder-টি ডাউনলোড করে, একই নামের একটি নতুন local folder তৈরি করে
`cd start-basic`	নতুন তৈরি হওয়া project folder-এর ভিতরে ঢোকা
`npm install`	`package.json`-এ উল্লেখিত সব dependency (React, TanStack Router/Start, Vite ইত্যাদি) ডাউনলোড করা
`npm run dev`	Vite-এর dev server চালু করা

চাইলে start-basic এর জায়গায় অন্য কোনো official example slug (যেমন start-basic-react-query, start-counter) দিয়েও একই কমান্ড ব্যবহার করা যায় — TanStack-এর documentation-এ পুরো তালিকা পাওয়া যায়।

🖥️ ৬. Dev Server চালানো ও Browser-এ দেখা

যে পথেই project তৈরি করে থাকুন (CLI বা clone), শেষে npm run dev চালানোর পর terminal-এ একটি URL দেখানো হবে — সাধারণত:

Local: http://localhost:3000

এই URL ব্রাউজারে খুললে আপনি Episode 01-এ দেখা সেই "Welcome Home!!!" লেখাটি দেখতে পাবেন।

এই মুহূর্তে যা ঘটছে তা হলো: Vite dev server চালু হয়েছে, TanStack Start-এর plugin project-এর src/routes/ ফোল্ডার স্কেন করে Route Tree তৈরি করেছে, এবং / Route-টি Server-এ render করে (SSR) আপনার Browser-এ পাঠিয়েছে — ঠিক যেমনটা আমরা Episode 01-এর Request Lifecycle অংশে বিস্তারিত দেখেছিলাম।

🗂️ ৭. Project File Structure — সম্পূর্ণ ব্যাখ্যা

একটি সাধারণ TanStack Start project-এর সবচেয়ে গুরুত্বপূর্ণ ফাইলগুলো নিচের মতো সাজানো থাকে (official "Build from scratch" গাইড অনুযায়ী মূল কাঠামো):

. ├── src/ │ ├── routes/ │ │ ├── __root.tsx ← Root Route (সব page-এর wrapper) │ │ └── index.tsx ← "/" Route │ ├── router.tsx ← Router configuration │ └── routeTree.gen.ts ← Auto-generated Route Tree (হাতে এডিট করা হয় না) ├── vite.config.ts ← Build tool + TanStack Start plugin configuration ├── package.json └── tsconfig.json

প্রতিটি ফাইলের ভূমিকা সংক্ষেপে:

ফাইল	ভূমিকা
`src/routes/__root.tsx`	পুরো application-এর সবচেয়ে বাইরের layout — HTML shell, meta tag, সব Route-এর common wrapper
`src/routes/index.tsx`	"/" URL-এর জন্য একটি নির্দিষ্ট Route এবং তার component
`src/router.tsx`	Router instance তৈরি করার জায়গা — caching, preloading, scroll restoration ইত্যাদি configure হয় এখানে
`src/routeTree.gen.ts`	Framework স্বয়ংক্রিয়ভাবে তৈরি করে; সব Route মিলিয়ে বানানো Route Tree এখানে থাকে
`vite.config.ts`	Vite build tool এবং TanStack Start-এর plugin এখানে configure করা হয়

পরের কয়েকটি অংশে আমরা এই ফাইলগুলো একটি একটি করে গভীরভাবে দেখব — কেন এভাবে সাজানো, এবং প্রতিটির ভিতরের code ঠিক কী করে।

🧩 ৮. router.tsx গভীরভাবে বোঝা

router.tsx ফাইলটি বলে দেয় — TanStack Router ঠিক কীভাবে আচরণ করবে। এটি official "Build from scratch" গাইড থেকে নেওয়া একটি বাস্তব উদাহরণ:

// src/router.tsx import { createRouter } from '@tanstack/react-router' import { routeTree } from './routeTree.gen' export function getRouter() { const router = createRouter({ routeTree, scrollRestoration: true, }) return router }

লাইন ধরে ধরে ব্যাখ্যা:

import { routeTree } from './routeTree.gen'
এখানে auto-generated Route Tree import করা হচ্ছে — এটি ঠিক কী, তা পরের অংশে বিস্তারিত দেখব।

createRouter({ routeTree, ... })
এই function TanStack Router থেকে আসে এবং Route Tree নিয়ে একটি Router instance তৈরি করে। এই instance-টিই সিদ্ধান্ত নেয় কোন URL-এ কোন Route দেখানো হবে।

scrollRestoration: true
এই option চালু থাকলে, Client-side navigation-এর সময় scroll position স্বাভাবিক browser আচরণের মতো পুনরুদ্ধার (restore) হয় — যেমন "back" বাটনে চাপলে আগের scroll position-এ ফিরে যাওয়া।

export function getRouter()
এটিকে function হিসেবে রাখার একটি বড় কারণ হলো: SSR-এ প্রতিটি request-এর জন্য একটি নতুন, আলাদা Router instance প্রয়োজন হয় (যাতে দুই ব্যবহারকারীর data একে অপরের সাথে মিশে না যায়)। Function থাকলে প্রতিবার নতুন instance তৈরি করা সহজ হয়।

🌳 ৯. routeTree.gen.ts — Auto-generated ফাইল

src/routeTree.gen.ts ফাইলটি বিশেষ — এটি আপনি নিজে লেখেন না। TanStack Start-এর Vite plugin, src/routes/ ফোল্ডার স্কেন করে স্বয়ংক্রিয়ভাবে এই ফাইলটি তৈরি ও আপডেট করে।

গুরুত্বপূর্ণ নিয়ম: routeTree.gen.ts ফাইলটি হাতে এডিট করা উচিত না। আপনি যখনই src/routes/-এ নতুন file যুক্ত/মুছে ফেলবেন, dev server চলমান থাকলে এই ফাইল নিজে থেকেই re-generate হয়ে যাবে।

এই ফাইলটির ভিতরে থাকে — প্রতিটি Route file-এর reference, তাদের path, এবং তাদের মধ্যে parent-child সম্পর্ক (Episode 01-এ আলোচিত Route Tree)। TanStack Router এই ফাইল থেকেই TypeScript-এর জন্য সঠিক type তৈরি করে, যার ফলে Link-এ ভুল path দিলে বা ভুল URL parameter ব্যবহার করলে editor-এই ধরা পড়ে যায়।

সহজভাবে বলা যায়: src/routes/ ফোল্ডার হলো "source of truth" (মূল সত্য), আর routeTree.gen.ts হলো তার থেকে তৈরি হওয়া একটি compiled/generated প্রতিফলন।

🏠 ১০. Root Route (__root.tsx) সম্পূর্ণ ব্যাখ্যা

__root.tsx হলো প্রতিটি TanStack Start project-এর সবচেয়ে গুরুত্বপূর্ণ ফাইলগুলোর একটি। এটি Episode 01-এর অংশ ৮-এ আলোচিত Route Tree-এর সবচেয়ে উপরের (root) Route। নিচে official গাইড থেকে নেওয়া উদাহরণ:

// src/routes/__root.tsx import type { ReactNode } from 'react' import { Outlet, createRootRoute, HeadContent, Scripts, } from '@tanstack/react-router' export const Route = createRootRoute({ head: () => ({ meta: [ { charSet: 'utf-8', }, { name: 'viewport', content: 'width=device-width, initial-scale=1', }, { title: 'TanStack Start Starter', }, ], }), component: RootComponent, }) function RootComponent() { return ( <RootDocument> <Outlet /> </RootDocument> ) } function RootDocument({ children }: Readonly<{ children: ReactNode }>) { return ( <html> <head> <HeadContent /> </head> <body> {children} <Scripts /> </body> </html> ) }

এবার প্রতিটি অংশ আলাদা করে বুঝি:

createRootRoute({ ... })
createFileRoute-এর মতোই, কিন্তু এটি বিশেষভাবে সবচেয়ে বাইরের Root Route তৈরি করার জন্য। এখানে কোনো URL path লাগে না, কারণ এটি সব Route-এর "parent"।

head: () => ({ meta: [...] })
পুরো document-এর <head>-এ কী কী meta tag থাকবে (charset, viewport, title) তা এখানে define করা হয়।

<HeadContent />
উপরে define করা head config অনুযায়ী আসল <meta>/<title> ট্যাগগুলো এই জায়গায় render হয়। এটি একটি বিশেষ component যা TanStack Router নিজেই দেয়।

<Outlet />
Episode 01-এর অংশ ৮-এ আলোচিত সেই বিশেষ জায়গা, যেখানে বর্তমান URL-এর সাথে মিলে যাওয়া child Route-এর component (যেমন index.tsx-এর Home) render হয়ে বসবে।

<Scripts />
প্রয়োজনীয় JavaScript bundle load করার জন্য <script> ট্যাগ এখানে যুক্ত হয়। এটাই সেই script যা Episode 01-এর Request Lifecycle-এ Hydration শুরু করে।

লক্ষ্য করুন: এই ফাইলে সরাসরি <html>, <head>, <body> ট্যাগ লেখা হচ্ছে। এর কারণ, TanStack Start-এ Root Route পুরো HTML document-এর জন্য দায়ী — অন্য কোনো normal Route-এ এগুলো লেখার দরকার নেই, তারা শুধু <Outlet />-এর ভিতরে বসে।

⚙️ ১১. vite.config.ts ও tanstackStart() Plugin

TanStack Start, Vite (বা Rsbuild)-এর একটি plugin হিসেবে কাজ করে। নিচে official গাইডের একটি সরলীকৃত configuration:

import { defineConfig } from 'vite' import { tanstackStart } from '@tanstack/react-start/plugin/vite' import viteReact from '@vitejs/plugin-react' export default defineConfig({ server: { port: 3000, }, resolve: { tsconfigPaths: true, }, plugins: [ tanstackStart(), // react's vite plugin must come after start's vite plugin viteReact(), ], })

tanstackStart()
এই plugin-টিই আসল জাদু করে — এটি src/routes/ ফোল্ডার স্কেন করে Route Tree তৈরি করে, Server Function-গুলোর জন্য Client/Server bundle আলাদা করে দেয় (Episode 01-এর অংশ ১৩-এ আলোচিত "network boundary"), এবং SSR entry point তৈরি করে।

viteReact()
সাধারণ React support (JSX compile করা ইত্যাদি) দেয়। মন্তব্যে উল্লেখ আছে — এটি tanstackStart()-এর পরে রাখতে হয়, কারণ plugin-গুলো একটি নির্দিষ্ট ক্রমে কাজ করে।

resolve: { tsconfigPaths: true }
tsconfig.json-এ define করা path alias (যদি থাকে) Vite যেন বুঝতে পারে তা নিশ্চিত করে।

🔢 ১২. বাস্তব উদাহরণ: Server Function সহ একটি Counter Route

এখন পর্যন্ত আমরা যা দেখেছি তা মূলত static content। এবার Episode 01-এর অংশ ১৩-এ আলোচিত Server Function বাস্তবে কীভাবে ব্যবহার হয় তা দেখি — TanStack-এর official "Build from scratch" গাইডের একটি সম্পূর্ণ, কাজ করা উদাহরণ দিয়ে।

// src/routes/index.tsx import * as fs from 'node:fs' import { createFileRoute, useRouter } from '@tanstack/react-router' import { createServerFn } from '@tanstack/react-start' const filePath = 'count.txt' async function readCount() { return parseInt( await fs.promises.readFile(filePath, 'utf-8').catch(() => '0'), ) } const getCount = createServerFn({ method: 'GET', }).handler(() => { return readCount() }) const updateCount = createServerFn({ method: 'POST' }) .validator((d: number) => d) .handler(async ({ data }) => { const count = await readCount() await fs.promises.writeFile(filePath, `${count + data}`) }) export const Route = createFileRoute('/')({ component: Home, loader: async () => await getCount(), }) function Home() { const router = useRouter() const state = Route.useLoaderData() return ( <button type="button" onClick={() => { updateCount({ data: 1 }).then(() => { router.invalidate() }) }} > Add 1 to {state}? </button> ) }

চলুন এই কোডটি অংশ ধরে ধরে বুঝি — এটি এই Episode-এর সবচেয়ে গুরুত্বপূর্ণ code walkthrough।

ফাইল সিস্টেমে data সংরক্ষণ

import * as fs from 'node:fs'
এখানে Node.js-এর built-in file system module import করা হচ্ছে। লক্ষ্য করুন — এই import Browser-এ কখনো সম্ভব নয় (Browser-এ সরাসরি file system access করা যায় না)। এটাই প্রমাণ করে যে এই কোডের একটি অংশ নিশ্চিতভাবে Server-এ চলবে।

readCount()
count.txt ফাইল থেকে বর্তমান সংখ্যাটি পড়ে আনে। ফাইল না থাকলে 0 ধরে নেয়।

দুটি Server Function

getCount — createServerFn({ method: 'GET' })
একটি Server Function, যার কাজ শুধু বর্তমান count পড়ে ফেরত দেওয়া। method: 'GET' বলছে এটি শুধু data নিয়ে আসার জন্য (কোনো data পরিবর্তন করে না)।

updateCount — createServerFn({ method: 'POST' })
এই Server Function data পরিবর্তন করে, তাই method: 'POST' ব্যবহার করা হয়েছে।

.validator((d: number) => d)
Client থেকে যে data পাঠানো হবে, তার আকৃতি/type এখানে যাচাই করা হয় — এখানে বলা হচ্ছে "আমি একটি number আশা করছি"। এটি Server Function-এর input-এর জন্য একটি নিরাপত্তা স্তর।

.handler(async ({ data }) => { ... })
আসল logic এখানে — validator পাস করা data ব্যবহার করে বর্তমান count-এর সাথে যোগ করে ফাইলে লিখে রাখা হয়।

Route-এর সাথে loader যুক্ত করা

loader: async () => await getCount()
এখানে Episode 01-এর অংশ ৭-এ আলোচিত Data Loading ধারণাটির বাস্তব প্রয়োগ দেখা যাচ্ছে। Route render হওয়ার আগেই getCount() (একটি Server Function) call হয়ে count-টি নিয়ে আসা হচ্ছে।

Component-এর ভিতরে ব্যবহার

const state = Route.useLoaderData()
loader-এর মাধ্যমে আনা data এই hook দিয়ে component-এর ভিতরে পাওয়া যায়।

const router = useRouter()
বর্তমান Router instance-এ প্রবেশাধিকার দেয়, যাতে navigation বা cache-সম্পর্কিত কাজ করা যায়।

onClick={() => { updateCount({ data: 1 }).then(...) }}
বাটনে ক্লিক করলে updateCount Server Function call হচ্ছে — দেখতে সাধারণ একটি async function call-এর মতো, কিন্তু ভেতরে ভেতরে এটি Episode 01-এর অংশ ১৩-এ আলোচিত network boundary পার হয়ে Server-এ গিয়ে ফাইল আপডেট করে আসছে।

router.invalidate()
Server-এ data পরিবর্তনের পর, Client-side এ থাকা পুরোনো loader data-কে "invalid/বাতিল" ঘোষণা করা হয়, যার ফলে Router আবার loader চালিয়ে (এক্ষেত্রে getCount()) নতুন, আপডেট হওয়া count নিয়ে আসে এবং UI নতুন সংখ্যা দেখায়।

ব্যবহারকারী বাটনে ক্লিক করল ↓ updateCount({ data: 1 }) কল হলো (Client থেকে) ↓ [Network boundary পার হলো] → Server-এ handler চলল ↓ Server-এ count.txt ফাইল আপডেট হলো ↓ Client-এ .then() চলল → router.invalidate() কল হলো ↓ Router পুরোনো loader data বাতিল করল ↓ getCount() (loader) আবার চলল → নতুন count Server থেকে এলো ↓ UI নতুন সংখ্যা দেখাল

এই ছোট উদাহরণেই Episode 01-এর প্রায় সব ধারণা একসাথে কাজ করছে দেখা যায়: Route, Data loading (loader), Server Function, এবং Client-Server-এর মধ্যে একটি স্পষ্ট, নিরাপদ যোগাযোগ।

🔄 ১৩. Dev Workflow: ফাইল Save করলে কী হয়? (HMR)

Dev server চলার সময় কোনো Route ফাইল পরিবর্তন করে save করলে, Browser সম্পূর্ণভাবে reload না হয়েই পরিবর্তন দেখায়। এই প্রক্রিয়ার নাম HMR (Hot Module Replacement)।

ইংরেজি term: HMR (Hot Module Replacement)
সহজ বাংলায়: Vite dev server, কোন file পরিবর্তন হয়েছে তা track করে এবং শুধুমাত্র সেই নির্দিষ্ট অংশটুকু Browser-এ পাঠিয়ে replace করে দেয় — সম্পূর্ণ page reload না করেই। এর ফলে development অনেক দ্রুত হয়, এবং component-এর বর্তমান state (যেমন কোনো input-এ লেখা text) না হারিয়েই পরিবর্তন দেখা যায়।

নতুন Route file যুক্ত করলে (যেমন src/routes/about.tsx), TanStack Start-এর plugin এটি চিহ্নিত করে routeTree.gen.ts স্বয়ংক্রিয়ভাবে re-generate করে দেয় — আপনাকে কিছু করতে হয় না, শুধু dev server চালু রাখতে হয়।

🚧 ১৪. Beginner-দের সাধারণ Setup সমস্যা ও সমাধান

সমস্যা	সম্ভাব্য কারণ ও সমাধান
"`routeTree.gen.ts` ফাইল খুঁজে পাচ্ছি না / নেই"	Dev server (`npm run dev`) অন্তত একবার চালাতে হবে, কারণ এই ফাইল প্রথম রান-এই generate হয়। ম্যানুয়ালি তৈরি করার চেষ্টা করবেন না।
"পোর্ট (port) already in use" জাতীয় error	অন্য কোনো process আগে থেকেই সেই port (যেমন 3000) ব্যবহার করছে। আগের terminal/process বন্ধ করুন, বা `vite.config.ts`-এ port পরিবর্তন করুন।
Route পরিবর্তন করেও ব্রাউজারে কিছু দেখাচ্ছে না	Route file export ঠিকমতো হয়েছে কিনা (`export const Route = ...`) এবং `component` সঠিকভাবে assign করা হয়েছে কিনা যাচাই করুন।
TypeScript-এ অনেক red underline / error দেখাচ্ছে	`tsconfig.json`-এ প্রয়োজনীয় options (যেমন `moduleResolution: "Bundler"`) ঠিকমতো সেট করা আছে কিনা দেখুন; editor restart করাও অনেক সময় সাহায্য করে।
Server Function call করলে কিছু হচ্ছে না / error আসছে	`.handler()` ঠিকমতো লেখা হয়েছে কিনা, এবং `method` (GET/POST) সঠিকভাবে ব্যবহারের জায়গার সাথে মিলছে কিনা দেখুন।

✅ ১৫. Conclusion

এই Episode-এ আমরা যা করলাম এবং শিখলাম:

✓ TanStack Start project শুরু করার একাধিক official উপায় (CLI, Example clone) দেখলাম
✓ Dev server চালিয়ে বাস্তবে project চালিয়ে দেখলাম
✓ Project-এর প্রতিটি core file — router.tsx, routeTree.gen.ts, __root.tsx, vite.config.ts — এর ভূমিকা গভীরভাবে বুঝলাম
✓ createRootRoute, Outlet, HeadContent, Scripts — এই building block-গুলো কীভাবে একসাথে পুরো HTML document তৈরি করে তা দেখলাম
✓ একটি সম্পূর্ণ, বাস্তব Server Function উদাহরণ (Counter) লাইন ধরে ধরে বুঝলাম — loader, createServerFn, validator, useRouter, router.invalidate()
✓ HMR কীভাবে dev experience দ্রুত করে তা বুঝলাম
✓ Beginner-দের সাধারণ কিছু setup সমস্যা এবং তাদের সমাধান দেখলাম

এখন আমাদের হাতে একটি চলমান TanStack Start project আছে, এবং আমরা এর প্রতিটি core file কেন এবং কীভাবে কাজ করে তা জানি। পরের Episode-এ আমরা Routing System আরও গভীরভাবে explore করব।

➡️ ১৬. Next Episode

পরবর্তী Episode: "Routing System গভীরভাবে বোঝা — Nested Routes ও Layouts"

পরের পর্বে আমরা একাধিক Route তৈরি করব, Nested Layout বানাব, Dynamic Route parameter ($postId এর মতো) ব্যবহার করব, এবং Link component দিয়ে Type-safe navigation করে দেখাব।

⬅ পূর্ববর্তী Episode: TanStack Start কী? পরবর্তী Episode: Routing System (শীঘ্রই) ➡

📑 বিষয়বস্তু