Next.js 14 App Router — সম্পূর্ণ শুরু থেকে শেষ গাইড

Next.js 14 এর App Router একটি বিপ্লবী পরিবর্তন। এটি React Server Components এর উপর ভিত্তি করে তৈরি এবং ওয়েব অ্যাপ তৈরির পুরো দৃষ্টিভঙ্গিটাই বদলে দিয়েছে। যারা আগে Pages Router ব্যবহার করেছেন, তাদের জন্য এটা প্রথমে একটু confusing মনে হতে পারে। কিন্তু একবার বুঝলে এর সুবিধাগুলো অপরিসীম।

App Router কী এবং কেন?

Pages Router-এ প্রতিটি page ছিল pages/ ফোল্ডারে। App Router-এ এটি হয়েছে app/ ফোল্ডারে। কিন্তু শুধু ফোল্ডার পরিবর্তনই নয় — পুরো architecture-ই ভিন্ন।

Server Components vs Client Components

App Router এ প্রতিটি component default-এ server component। এর মানে হলো এই component server-এ render হয় এবং client-এ শুধু HTML পাঠানো হয়। এতে initial page load অনেক দ্রুত হয় এবং JavaScript bundle size কমে।

Client component হতে হলে ফাইলের শুরুতে 'use client' directive যোগ করতে হয়। যেখানে state management, event listeners বা browser APIs দরকার, শুধু সেখানেই Client Component ব্যবহার করুন।

File-based Routing

App Router-এ routing হয় folder structure দিয়ে। app/about/page.tsx ফাইল মানে /about route। Dynamic route হবে app/blog/[slug]/page.tsx মানে /blog/anything।

Special Files

• page.tsx — route এর main content
• layout.tsx — shared layout যা nested routes-এ wrap করে
• loading.tsx — loading state দেখানোর জন্য
• error.tsx — error boundary
• not-found.tsx — 404 page

Server Actions

Next.js 14-এর অন্যতম বড় feature হলো Server Actions। এর মাধ্যমে form submission বা data mutation সরাসরি server function দিয়ে handle করা যায় — আলাদা API route বানানোর দরকার নেই।

আমার পরামর্শ

নতুন project শুরু করলে সবসময় App Router ব্যবহার করুন। পুরনো project-এ Pages Router থাকলে ধীরে ধীরে migrate করুন — কারণ দুটো একসাথে ব্যবহার করা যায়।