Pages और File-based Routing

मुख्य idea: folders ही URLs हैं

App Router में route tables कभी नहीं लिखते। app/ के अंदर हर folder एक URL हिस्सा है, और folder तभी खुलने लायक page बनता है जब उसमें page.jsx file हो।

पहले routes बनाइए

// app/about/page.jsx
export default function AboutPage() {
  return (
    <main className="container">
      <h1>About EduSite</h1>
      <p>We teach coding in Hindi + English since 2018.</p>
    </main>
  )
}

// app/courses/page.jsx
export default function CoursesPage() {
  return <h1>All courses</h1>
}

// app/courses/web-development/page.jsx
export default function WebDevPage() {
  return <h1>Web Development course</h1>
}

Files save करके /about, /courses और /courses/web-development खोलिए — restart की ज़रूरत नहीं।

Nested routes

गहरे URLs के लिए folders के अंदर folders रखें। app/courses/page.jsx /courses का index है, और child folders उसके नीचे pages बनाते हैं।

Folder → URL नक्शा

📁 app/
  page.jsx                 # /
  📁 about/
    page.jsx               # /about
  📁 courses/
    page.jsx               # /courses
    📁 web-development/
      page.jsx             # /courses/web-development
  📁 blog/
    page.jsx               # /blog
  📁 contact/
    page.jsx               # /contact
    ContactForm.jsx        # NOT a route (no page.jsx name)

Colocation: helpers को page के पास रखें

सिर्फ़ page.jsx (और APIs के लिए route.js) public है। Components, CSS modules और helpers को उसी folder में बेझिझक रख सकते हैं। EduSite में app/contact/ContactForm.jsx और app/contact/actions.js contact page के पास हैं, पर URLs नहीं हैं।

URL पढ़ना: searchParams

?level=beginner जैसी query strings page में searchParams prop बनकर आती हैं। Next.js 16 में यह Promise है, इसलिए page async होना चाहिए और await करना पड़ता है:

// app/courses/page.jsx   →   /courses?level=beginner&sort=fee
export default async function CoursesPage({ searchParams }) {
  const { level = 'all', sort = 'popular' } = await searchParams

  return (
    <main>
      <h1>Courses</h1>
      <p>Showing level: {level} · sorted by: {sort}</p>
    </main>
  )
}

Pages Server Components हैं

Default रूप से page server पर चलता है। यह async हो सकता है और files, environment variables या database सीधे पढ़ सकता है — यह code visitor के browser तक कभी नहीं जाता।

// app/blog/page.jsx — a page can be async and read files or a database directly
import { getAllPosts } from '@/lib/posts'

export default async function BlogPage() {
  const posts = getAllPosts()   // runs on the server, never sent to the browser
  return (
    <ul>
      {posts.map((p) => <li key={p.slug}>{p.title}</li>)}
    </ul>
  )
}

आम गलतियाँ

• app/about.jsx → route नहीं। app/about/page.jsx बनाएँ।
• Folder नाम में spaces या capitals (About Us) → /About%20Us जैसे बुरे URLs।
• बिना await के searchParams.level पढ़ना → यह Promise है, इसलिए value undefined।
• दो folders से एक ही URL बनना (जैसे route groups से) → "two parallel pages" build error।

सारांश

• app/ के folders URL हिस्से बनते हैं; page.jsx उन्हें public बनाती है।
• गहरे URLs के लिए folders nest करें; helper files pages के पास रखें।
• searchParams (Promise) query-string values देता है।
• Pages Server Components हैं और async हो सकते हैं।