Next.js اور App Router

تین طریقے

1. 1

   Next.js Vercel کی ایک فل اسٹیک React فریم ورک ہے۔ یہ تین کام کرتی ہے جو اکیلی React نہیں کرتی: صفحات سرور پر پیش کرتی ہے، فائل پر مبنی روٹر دیتی ہے، اور ڈیٹا فیچنگ، تصویری اپٹیمائزیشن، فونٹس، اور ایج فنکشنز کے لیے بنا بنایا حل دیتی ہے۔ 2026 میں App Router والی Next.js نئے پاکستانی پروڈکٹ اسٹارٹ اپس کے لیے ڈیفالٹ انتخاب ہے کیونکہ یہ درخواست آتے ہی HTML بھیج دیتی ہے، پھر کلائنٹ پر React ہائیڈریٹ کرتی ہے۔ ٹیلی نار 3G پر صارف کو ایک سیکنڈ کے اندر مواد نظر آتا ہے، پانچ نہیں۔

2. 2

   پہلا طریقہ، فائل پر مبنی روٹنگ۔ Next.js App Router میں ہر فولڈر ایک روٹ ہے۔ app/page.tsx ہوم صفحہ۔ app/vendors/page.tsx کا روٹ /vendors۔ app/vendors/[ntn]/page.tsx متحرک تفصیل کا صفحہ /vendors/0000123-4 پر۔ فولڈر کا نام URL کا حصہ بنتا ہے۔ کوئی روٹر کنفگ فائل نہیں۔ آپ فولڈر کا نام بدل کر ایپ کا ڈھانچہ بدل دیتے ہیں۔ پاکستانی ٹیموں کو react-router کنفگ کرنے سے یہ آسان لگتا ہے کیونکہ URL درخت اور فائل درخت ہم آہنگ ہیں۔

3. 3

   دوسرا طریقہ، سرور کمپوننٹس اور کلائنٹ کمپوننٹس۔ App Router میں ہر کمپوننٹ ڈیفالٹ پر سرور کمپوننٹ ہوتا ہے۔ سرور کمپوننٹس سرور پر چلتے ہیں، براہ راست ڈیٹا بیس یا API سے بات کرتے ہیں، اور براؤزر کو صفر JavaScript بھیجتے ہیں۔ یہ ڈیٹا لانے اور پیش کرنے کے لیے بہترین ہیں۔ جب تعامل چاہیے (کلک ہینڈلر، useState)، فائل کے اوپر 'use client' لکھیں۔ وہ فائل اور اس کے بچے کلائنٹ کمپوننٹس بن جائیں گے۔ یہی فاصلہ مرکزی ذہنی ماڈل ہے۔ FBR وینڈر پورٹل کا زیادہ تر حصہ سرور پر پیش ہو گا، صرف ایک چھوٹا سرچ ان پٹ کلائنٹ کمپوننٹ ہو گا۔

کیوں؟

Claude کے ساتھ آزمائیں

Claude کے ساتھ پرامپٹ: 'Next.js 15 App Router کا صفحہ بنائیں جو سرور فنکشن سے NTN تصدیق شدہ وینڈرز کی فہرست لائے، Tailwind ٹیبل میں دکھائے، اور searchParams سے سرور سائڈ pagination کرے۔ سرچ باکس کے لیے کلائنٹ کمپوننٹ شامل کریں۔ ایک گھنٹے کی revalidation والا ISR۔ not-found.tsx اور loading.tsx بھی۔ TypeScript strict۔' ہر فائل غور سے پڑھیں، خاص طور پر ڈیٹا لانے کا پیٹرن۔