Next.js क्या है? परिचय

Next.js क्या है?

Next.js websites और web apps बनाने का एक React framework है। React आपको user interface के building blocks (components) देता है; Next.js बाकी सब कुछ जोड़ता है जो एक असली website को चाहिए: pages और URLs, server rendering, APIs, image और font optimisation, और metadata व sitemap जैसे SEO features।

React को engine समझिए और Next.js को पूरी car — steering, brakes और seats सहित। React अकेले भी चल सकता है, लेकिन बहुत से parts आपको खुद बनाने पड़ेंगे।

React vs Next.js

सिर्फ़ React (जैसे Vite) में browser पहले JavaScript download करता है, फिर page बनाता है। Next.js में server तैयार HTML भेजता है, इसलिए page जल्दी दिखता है और search engine उसे तुरंत पढ़ लेते हैं।

Next.js page browser तक कैसे पहुँचता है

1. Visitor /courses जैसा URL खोलता है।
2. Next.js matching file app/courses/page.jsx ढूँढकर उसे server पर चलाता है।
3. पूरा HTML वापस आता है — visitor को content तुरंत दिखता है।
4. थोड़ा JavaScript load होकर menu, form जैसे interactive हिस्सों को चालू करता है। इस step को hydration कहते हैं।

सबसे simple Next.js page बस एक function है जो JSX return करता है:

// app/page.jsx  →  this file IS the home page "/"
export default function HomePage() {
  return (
    <main>
      <h1>Welcome to EduSite</h1>
      <p>Learn coding in Hindi + English.</p>
    </main>
  )
}

मुख्य features जो आप सीखेंगे

• File-based routing — folder बनाइए, URL मिल जाएगा। Router setup नहीं।
• Server Components — server पर चलने वाले components जो सीधे database पढ़ सकते हैं।
• Server Actions — अलग backend लिखे बिना form submit संभालना।
• Route Handlers — उसी project में JSON API बनाना (mobile app के लिए useful)।
• Rendering के विकल्प — static (SSG), हर request पर (SSR) या refresh वाला static (ISR)।
• Built-in SEO — title, description, Open Graph image, sitemap.xml और robots.txt।
• Turbopack — तेज़ bundler, जो Next.js 16 में dev और build के लिए default है।

Next.js कौन use करता है?

React websites बनाने का Next.js सबसे popular तरीकों में से एक है। Company websites, e-commerce stores, dashboards, blogs और documentation sites इसमें बनती हैं। India और बाहर, front-end और full-stack developer jobs के लिए यह एक मज़बूत skill है।

इस course में आप क्या बनाएँगे

आख़िरी module में आप EduSite बनाएँगे — courses, Markdown blog, contact form और पूरे SEO वाली एक complete coaching-institute website। Project का असली home page यह है:

पूरा source code हर lesson page के Project Code box से download कर सकते हैं।

शुरू करने से पहले क्या चाहिए

सारांश

• Next.js एक full-stack React framework है।
• यह pages server पर बनाता है, जिससे sites तेज़ और SEO-friendly बनती हैं।
• Routing, APIs, forms, images, fonts और SEO built-in हैं।
• यह course App Router वाला Next.js 16 use करता है और पूरी website project पर ख़त्म होता है।