Next.js / Route Group

Route Group

app/ директор дотор хуудсуудын тоо нэмэгдэх тусам файлын бүтцийг зохион байгуулах хэрэгтэй болдог. Route Group нь хаягт нөлөөлөхгүйгээр хуудсуудаа логикоор бүлэглэх, өөр өөр layout ашиглах боломжийг олгодог. Маш хэрэгтэй, харин тун энгийн ойлголт.

Синтакс

Директорын нэрийг дугуй хаалтанд бичвэл URL-д харагдахгүй болно:

код
app/
├── (marketing)/         ← URL-д харагдахгүй
│   ├── page.tsx         → /
│   ├── about/
│   │   └── page.tsx     → /about
│   └── pricing/
│       └── page.tsx     → /pricing
└── (app)/               ← URL-д харагдахгүй
    ├── dashboard/
    │   └── page.tsx     → /dashboard
    └── settings/
        └── page.tsx     → /settings

(marketing) ба (app) гэсэн директорын нэрүүд URL-д огт ордоггүй. /marketing/about биш — зүгээр л /about.

Тусдаа layout өгөх

Route Group-н хамгийн том давуу тал бол бүлэг бүрд өөр layout ашиглах боломж. Жишээлбэл нэвтрэлтийн хуудас болон апп хуудсуудад өөр өөр layout хэрэгтэй:

код
app/
├── (auth)/
│   ├── layout.tsx       ← Энгийн, navbar-гүй layout
│   ├── login/
│   │   └── page.tsx     → /login
│   └── register/
│       └── page.tsx     → /register
└── (main)/
    ├── layout.tsx       ← Navbar, sidebar бүхий layout
    ├── courses/
    │   └── page.tsx     → /courses
    └── profile/
        └── page.tsx     → /profile
tsx
// app/(auth)/layout.tsx — Нэвтрэлтийн layout
export default function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen bg-[#0b1120] flex items-center justify-center">
      <div className="w-full max-w-sm p-8 bg-[#0f172a] rounded-xl border border-[#1e293b]">
        {children}
      </div>
    </div>
  );
}
tsx
// app/(main)/layout.tsx — Үндсэн апп layout
import Navbar from "@/components/nav/Navbar";

export default function MainLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen bg-[#0b1120]">
      <Navbar />
      <main className="max-w-6xl mx-auto px-4 py-8">{children}</main>
    </div>
  );
}

/login хаягаар ороход нэвтрэлтийн энгийн layout харагдана. /courses хаягаар ороход navbar бүхий layout харагдана. Нэг app/layout.tsx-д бүгдийг шахах шаардлагагүй!

Файлуудыг зохион байгуулах

Route Group нь зөвхөн layout-ын тусд биш, файлуудыг утга учиртайгаар бүлэглэхэд ч ашигтай:

код
app/
├── (auth)/
│   ├── login/page.tsx
│   └── register/page.tsx
├── (courses)/
│   ├── courses/page.tsx
│   └── courses/[courseSlug]/
│       ├── page.tsx
│       └── [lessonSlug]/page.tsx
├── (user)/
│   ├── profile/page.tsx
│   └── settings/page.tsx
└── layout.tsx   ← Root layout хэвээр

Бүх хуудас /login, /courses, /profile гэх мэт ердийн хаягтай байна — Route Group нь зөвхөн файлын зохион байгуулалтад нөлөөлнө.

Parallel route-тай хослуулах

Route Group нь parallel route (@slot синтакс)-тай хамт ашиглагдах боломжтой. Гэвч тэр сэдвийг одоогоор энгийн хэлбэрээр авч үзнэ. Доорх жишээнд route group ашиглан нэг хуудсанд modal харуулах загварыг харуулна:

код
app/
└── (store)/
    ├── layout.tsx
    ├── page.tsx                →  /
    └── product/
        ├── page.tsx            →  /product
        └── [id]/
            └── page.tsx        →  /product/123
tsx
// app/(store)/layout.tsx
export default function StoreLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <section>
      <header className="p-4 border-b border-[#1e293b]">
        <h2 className="text-white font-bold">Дэлгүүр</h2>
      </header>
      {children}
    </section>
  );
}

Анхааруулга — давхардах хаяг

Route Group ашиглахад нэг хаягт хоёр хуудас тохирохгүй байхыг анхаар. Дараах тохиолдолд page.tsx хоёулаа /about руу тохирох тул алдаа гарна:

код
app/
├── (groupA)/
│   └── about/
│       └── page.tsx   →  /about  ⚠️
└── (groupB)/
    └── about/
        └── page.tsx   →  /about  ⚠️ Давхардсан!

Route Group нэр нь URL-д ордоггүй тул ийм давхардал үүсч болно — анхаарч зохион байгуулаарай.

Дараагийн хичээлд:

Loading UI ба Suspense судална. loading.tsx файл үүсгэж хуудас ачаалагдах үед хэрэглэгчид skeleton дэлгэц харуулах аргыг ойлгоно.

← Өмнөх хичээлCatch-all ба optional маршрутДараах хичээл →Loading UI ба Suspense