Next.js کیا ہے اور یہ React کے اوپر کیا شامل کرتا ہے؟

Question

Accepted Answer

**Next.js** ایک مکمل React **فریم ورک** ہے۔ React خود صرف ایک UI لائبریری ہے — یہ اجزاء کو render کرتا ہے لیکن routing، data fetching، server rendering، اور build tooling آپ پر چھوڑ دیتا ہے۔ Next.js یہ سب کچھ باکس سے باہر فراہم کرتا ہے، اور ایک server runtime بھی۔ ## وہ چیزیں جو React اکیلے نہیں کرتا (اور Next.js شامل کرتا ہے) ```text React (library) → Next.js (framework) adds: ────────────────────────────────────────────────── UI rendering only → File-based routing (folders = routes) Client-side rendering → Server rendering (SSR), static generation (SSG), ISR You wire data fetching → Built-in data fetching + caching No backend → API routes / Route Handlers (full-stack) Manual bundling → Zero-config build, code splitting, optimization Manual → next/image (auto-optimized images), next/font ``` ## ایک ٹھوس مثال: ایک route صرف ایک فائل ہے ```tsx // app/about/page.tsx → automatically served at /about export default function About() { return

About us

; } ``` سادہ React میں آپ ایک router انسٹال کریں گے، routes کو configure کریں گے، اور ایک build سیٹ اپ کریں گے۔ Next.js میں، فائل بنانا *ہی* route ہے۔ ## ٹیمیں اسے کیوں منتخب کرتی ہیں - **SEO اور کارکردگی** — server-rendered HTML کا مطلب ہے کہ content ابتدائی response میں ہے (crawlers اور تیز first paint کے لیے اچھا ہے)، client-only React SPA کے برعکس جو خالی صفحہ بھیجتا ہے پھر hydrate کرتا ہے۔ - **ایک منصوبے میں مکمل stack** — frontend اور backend (API routes، Server Actions) ایک ساتھ رہتے ہیں۔ - **Production-ready defaults** — خودکار code splitting، image/font optimization، caching۔ ## اہمیت Next.js سب سے مشہور React فریم ورک ہے کیونکہ یہ React کو UI لائبریری سے مکمل application platform میں تبدیل کر دیتا ہے — rendering strategy، routing، data، اور backend کو سنبھالتا ہے تاکہ آپ plumbing کی بجائے features پر توجہ دیں۔ یہ default انتخاب ہے جب آپ کو React کے ساتھ SEO، کارکردگی، یا server-side logic کی ضرورت ہو۔