Next.js / Файл дээр суурилсан маршрут

Файл дээр суурилсан маршрут

Next.js-н хамгийн гайхалтай онцлогуудын нэг бол file-based routing — тусдаа router тохируулах шаардлагагүй. app/ директорт файл үүсгэхэд URL автоматаар үүсдэг. Энэ хичээлд тэр механизмыг гүнзгий ойлгоно.

Үндсэн дүрэм

app/ директор дотор page.tsx нэртэй файл үүсгэх бүрт тухайн замд хуудас үүснэ:

код
app/
├── page.tsx              →  /
├── about/
│   └── page.tsx          →  /about
├── courses/
│   └── page.tsx          →  /courses
└── profile/
    └── page.tsx          →  /profile

Директорын нэр = URL-н сегмент. page.tsx = тухайн хаягийн хуудас. Хялбар, тийм үү?

Эхний хуудас нэмэх

app/about/page.tsx файл үүсгэж дараах кодыг бичье:

tsx
// app/about/page.tsx
export default function AboutPage() {
  return (
    <main>
      <h1>Бидний тухай</h1>
      <p>Энэ бол ulaanbaatar.app — Монголын анхны кодчиллын платформ.</p>
    </main>
  );
}

Файл хадгалаад http://localhost:3000/about хаягаар ороод үз. Ямар ч router тохируулалгүйгээр хуудас гарч ирнэ!

Dynamic route — хувьсах хаяг

Нэг загвараас олон хуудас үүсгэхэд dynamic segment ашигладаг. Директорын нэрийг хаалтанд бичнэ — [slug]:

код
app/courses/
├── page.tsx              →  /courses
└── [courseSlug]/
    └── page.tsx          →  /courses/javascript
                          →  /courses/react
                          →  /courses/python
                          →  ... (ямар ч утга)

Dynamic segment-н утгыг params prop-оор авна:

tsx
// app/courses/[courseSlug]/page.tsx
interface Props {
  params: Promise<{ courseSlug: string }>;
}

export default async function CoursePage({ params }: Props) {
  const { courseSlug } = await params; // Next.js 15: params бол Promise

  return (
    <main>
      <h1>{courseSlug} курс</h1>
    </main>
  );
}

/courses/javascript хаягаар ороход courseSlug нь "javascript" болно. /courses/react хаягаар ороход "react" болно.

Nested dynamic route — давхар хувьсах хаяг

Курс + хичээл хоёуланг нь dynamic байлгахад nested route ашиглана:

код
app/courses/
└── [courseSlug]/
    ├── page.tsx                    →  /courses/javascript
    └── [lessonSlug]/
        └── page.tsx                →  /courses/javascript/01-intro
                                    →  /courses/react/02-hooks
tsx
// app/courses/[courseSlug]/[lessonSlug]/page.tsx
interface Props {
  params: Promise<{
    courseSlug: string;
    lessonSlug: string;
  }>;
}

export default async function LessonPage({ params }: Props) {
  const { courseSlug, lessonSlug } = await params;

  return (
    <main>
      <p>
        {courseSlug} / {lessonSlug}
      </p>
    </main>
  );
}

Тусгай файлууд

app/ директорт page.tsx-с гадна тусгай нэртэй файлууд байдаг:

| Файл | Зориулалт | | --------------- | --------------------- | | page.tsx | Хуудасны UI | | layout.tsx | Хуудсыг бүрхэх загвар | | loading.tsx | Уншиж байх үеийн UI | | error.tsx | Алдааны UI | | not-found.tsx | 404 хуудас |

Эдгээрийг дараагийн хичээлүүдэд нэг нэгээр нь судална.

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

page.tsx ба layout.tsx хоёрын ялгааг ойлгоно. Layout ашиглан navbar, footer-г нэг удаа тодорхойлж бүх хуудасд автоматаар харуулна.

← Өмнөх хичээлNext.js суулгах ба тохиргооДараах хичээл →Page ба Layout