Route Groups और Private Folders

Routes organise क्यों करें?

असली website में तीन तरह के pages होते हैं: public marketing pages, login/register pages और admin panel। हर एक का look अलग चाहिए, पर URL में /marketing/about नहीं चाहिए। Route groups यही हल करते हैं।

Route groups: (folder)

Folder name को parentheses में लिखें। Next.js इसे organisation और layouts के लिए use करता है, पर URL में skip करता है।

📁 app/
  📁 (marketing)/              # group – not in URL
    layout.jsx              # big header + footer
    page.jsx                # /
    about/page.jsx          # /about
    courses/page.jsx        # /courses
  📁 (auth)/
    layout.jsx              # small centered card, no menu
    login/page.jsx          # /login
    register/page.jsx       # /register
  📁 (admin)/
    layout.jsx              # sidebar dashboard
    admin/page.jsx          # /admin
    admin/students/page.jsx # /admin/students
  📁 _lib/                     # private – never a route
    format.js
  layout.jsx                # root layout (html, body)

हर group का अलग layout

// app/(auth)/layout.jsx — login & register pages share this
export default function AuthLayout({ children }) {
  return (
    <div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center', background: '#eef2ff' }}>
      <div style={{ width: 360, background: '#fff', padding: 28, borderRadius: 16 }}>
        <h2>EduSite</h2>
        {children}
      </div>
    </div>
  )
}

// app/(auth)/login/page.jsx  →  URL is /login (not /(auth)/login)
export default function Login() {
  return (
    <form>
      <input placeholder="Email" />
      <input type="password" placeholder="Password" />
      <button>Login</button>
    </form>
  )
}

Private folders: _folder

Underscore से शुरू होने वाला folder, जैसे _lib या _components, और उसके अंदर की हर चीज़ कभी route नहीं बनती, चाहे उसमें page.jsx हो। app/ के अंदर helper files रखने के लिए use करें।

Colocation: files साथ रखना

सिर्फ़ page.jsx (और route.js) folder को public बनाते हैं। इसलिए एक page का component उसी के बगल में रह सकता है:

app/
  courses/
    page.jsx            # the route
    CourseSearch.jsx    # used only by this page – not a route
    courses.module.css  # styles for this page
    [slug]/page.jsx

@/ import alias

// jsconfig.json (created by create-next-app)
{
  "compilerOptions": {
    "paths": { "@/*": ["./*"] }
  }
}

// anywhere in the project:
import Header from '@/components/Header'      // ✅ clean
import Header from '../../../components/Header' // ❌ hard to read

आम गलतियाँ

• दो groups का एक ही URL बनना ((a)/about और (b)/about) → build error।
• (admin) से pages protect होने की उम्मीद → group सिर्फ़ organisation है; auth checks से protect करें (Auth lesson)।
• ऊपर app/layout.jsx के बिना कई root layouts → तब हर group के layout में <html> और <body> होने चाहिए।

सारांश

• (group) folders routes organise करते हैं और अलग layouts देते हैं, URL बदले बिना।
• _private folders कभी routes नहीं बनते।
• Page-specific components साथ रखें; साफ़ imports के लिए @/ use करें।