Next.js का परिचय (server-side React)

Next.js React के around बनी एक fully-equipped kitchen जैसा है — यह routing, server rendering, और दूसरे tools जोड़ता है जो React अकेले include नहीं करता, इसलिए आपको खुद उन्हें assemble नहीं करना पड़ता।

In this page:

React के ऊपर एक Framework क्यों Use करें
File-Based Routing
Default रूप से Server-Side Rendering

Syntax

markup

// app/route-name/page.js maps to the URL /route-name
export default function Page() {
  return <h1>Page content</h1>;
}

// app/route-name/[id]/page.js maps to /route-name/123

React के ऊपर एक Framework क्यों Use करें

Plain React (Vite या Create React App के through) सिर्फ component-rendering layer handle करता है — अगर ज़रूरत हो तो आपको खुद routing, data fetching patterns, और server-rendering जोड़नी होती है।

Next.js इन सबको sensible defaults के साथ एक साथ bundle करता है, आपको full production apps ज़्यादा तेज़ी से build करने देते हुए।

Note: अगर आपके app को SEO-friendly server-rendered pages चाहिए, या आप routing/bundling खुद hand-configure नहीं करना चाहते, Next.js एक common default choice है।

Warning: Next.js एक असली npm-installed framework है जिसका अपना build process है — यह इस CDN-only browser sandbox के अंदर run नहीं हो सकता।

उदाहरण: Why Use a Framework on Top of React

markup

// Run in your local React project (npm install required)
// npx create-next-app@latest my-app
// cd my-app && npm run dev

// app/page.js
export default function HomePage() {
  return <h1>Welcome to my Next.js app</h1>;
}

File-Based Routing

Routes manually define करने के बजाय (React Router के जैसे), Next.js का App Router एक page का URL directly इसकी file location से determine करता है: app/page.js homepage है, app/about/page.js /about बन जाता है, और इसी तरह — किसी separate route configuration file की ज़रूरत नहीं।

Note: Nested folders naturally nested routes बनाते हैं — app/blog/[slug]/page.js /blog/hello-world जैसा एक dynamic route बनाता है।

Warning: React Router के विपरीत जहां routes explicit JavaScript हैं, एक folder के अंदर किसी file को exactly 'page.js' (या page.tsx) नाम देना भूल जाने का मतलब है वह folder बिल्कुल एक route नहीं बनता।

उदाहरण: File-Based Routing

markup

// Run in your local React project (npm install required)
// File structure -> resulting routes:
// app/page.js          -> /
// app/about/page.js    -> /about
// app/blog/[slug]/page.js -> /blog/:slug (dynamic)

// app/about/page.js
export default function AboutPage() {
  return <p>About us</p>;
}

Default रूप से Server-Side Rendering

Next.js के App Router में pages default रूप से Server Components हैं, मतलब वे server पर render होते हैं और browser को finished output भेजते हैं — SEO और fast initial loads के लिए अच्छा।

Interactivity selectively इसके अंदर nested 'use client' components के through जोड़ी जाती है।

Note: यह default (server-first, ज़रूरत पड़ने पर client interactivity जोड़ना) एक plain React SPA के opposite है, जो default रूप से पूरी तरह client-rendered है।

Warning: एक Server Component में browser-only APIs (जैसे localStorage या window) directly उपयोग करना एक error throw करता है, क्योंकि वह code कभी actually एक browser में run नहीं होता।

उदाहरण: Server-Side Rendering by Default

markup

// Run in your local React project (npm install required)
// app/page.js -- runs on the server, can directly await data
async function getData() {
  return { title: 'Server-rendered title' };
}
export default async function Page() {
  const data = await getData();
  return <h1>{data.title}</h1>;
}

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson Introduction to Server Components Next Lesson → Using React with TypeScript

Next.js का परिचय (server-side React)

React के ऊपर एक Framework क्यों Use करें

File-Based Routing

Default रूप से Server-Side Rendering

Chapter Quiz — Complete all 14 topics to unlock

Login to run this code