Next.js ਕੀ ਹੈ ਅਤੇ ਇਹ React ਵਿੱਚ ਕਿਆ ਜੋੜਦਾ ਹੈ?

Question

Accepted Answer

**Next.js** ਇੱਕ full-stack React **framework** ਹੈ। React ਆਪਣੇ ਆਪ ਵਿੱਚ ਸਿਰਫ਼ ਇੱਕ UI library ਹੈ — ਇਹ components ਨੂੰ render ਕਰਦਾ ਹੈ ਪਰ routing, data fetching, server rendering, ਅਤੇ build tooling ਨੂੰ ਤੁਹਾਡੇ ਉੱਤੇ ਛੱਡ ਦਿੰਦਾ ਹੈ। Next.js ਇਹ ਸਭ ਕੁਝ box ਵਿੱਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਅਤੇ ਇੱਕ 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 ਸਿਰਫ਼ ਇੱਕ file ਹੈ ```tsx // app/about/page.tsx → automatically served at /about export default function About() { return

About us

; } ``` Saada React ਵਿੱਚ ਤੁਸੀਂ ਇੱਕ router ਨੂੰ install ਕਰੋਗੇ, routes ਨੂੰ configure ਕਰੋਗੇ, ਅਤੇ ਇੱਕ build ਨੂੰ set up ਕਰੋਗੇ। Next.js ਵਿੱਚ, file ਨੂੰ ਬਣਾਉਣਾ *ਹੀ* route ਹੈ। ## ਕਿਉਂ teams ਇਸ ਨੂੰ ਚੁਣਦੀ ਹਨ - **SEO ਅਤੇ performance** — server-rendered HTML ਦਾ ਮਤਲਬ ਹੈ ਕਿ content ਸ਼ੁਰੂਆਤੀ response ਵਿੱਚ ਹੈ (crawlers ਅਤੇ fast first paint ਲਈ ਬਾਹਰ), ਕਲਾਇੰਟ-ਸਿਰਫ਼ React SPA ਦੇ ਉਲਟ ਜੋ ਇੱਕ blank page ਭੇਜਦਾ ਹੈ ਫਿਰ hydrate ਕਰਦਾ ਹੈ। - **Full-stack ਇੱਕ project ਵਿੱਚ** — frontend ਅਤੇ backend (API routes, Server Actions) ਇਕੱਠੇ ਬੈਠੇ ਹਨ। - **Production-ready defaults** — automatic code splitting, image/font optimization, caching। ## ਇਸ ਨੂੰ ਮਾਇਨਾ ਕਿਉਂ ਰੱਖਦਾ ਹੈ Next.js ਸਭ ਤੋਂ ਲੋਕਪ੍ਰਿਯ React framework ਹੈ ਕਿਉਂਕਿ ਇਹ React ਨੂੰ ਇੱਕ UI library ਤੋਂ ਪੂਰੇ application platform ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ — rendering strategy, routing, data, ਅਤੇ ਇੱਕ backend ਨੂੰ ਸੰਭਾਲਦਿਆਂ ਤਾਂ ਜੋ ਤੁਸੀਂ plumbing ਦੀ ਬਜਾਏ features ਉੱਤੇ ਧਿਆਨ ਦੇ ਸਕੋ। ਇਹ default choice ਹੈ ਜਦੋਂ ਤੁਹਾਨੂੰ React ਦੇ ਨਾਲ SEO, performance, ਜਾਂ server-side logic ਚਾਹੀਦਾ ਹੈ।