DEV Community

Cover image for Next.js App Router - Loyiha Strukturasi (Project Structure) To'liq Qo'llanma
MATKARIM MATKARIMOV
MATKARIM MATKARIMOV

Posted on

Next.js App Router - Loyiha Strukturasi (Project Structure) To'liq Qo'llanma

#webdev #react #nextjs #frontend

Next.js App Router - Loyiha Strukturasi (Project Structure)

Next.js fayl tizimiga asoslangan routing ishlatadi. Bu degani - papka va fayllarning joylashuvi to'g'ridan-to'g'ri URL manzillarini aniqlaydi. Shu sababli loyihaning strukturasini to'g'ri tushunish juda muhim.

Bu maqolada Next.js loyihasining barcha papkalari, fayllari va routing konventsiyalarini misollar bilan tushuntirib beraman.

1. Yuqori darajadagi papkalar (Top-level Folders) 

my-project/
├── app/          # App Router - asosiy routing papkasi
├── public/       # Statik fayllar (rasmlar, shriftlar)
├── src/          # Ixtiyoriy - kodlarni alohida saqlash uchun
└── pages/        # Pages Router (eski usul, app bilan birga ishlatilmaydi)
Enter fullscreen mode Exit fullscreen mode
Papka Vazifasi
app/ App Router - barcha sahifalar, layoutlar va routing shu yerda
public/ Statik fayllar. public/logo.png → brauzerda /logo.png
src/ Ixtiyoriy. Kodlarni config fayllaridan ajratish uchun

2. Yuqori darajadagi fayllar (Top-level Files) 

my-project/
├── next.config.js        # Next.js sozlamalari
├── package.json          # Paketlar va skriptlar
├── tsconfig.json         # TypeScript sozlamalari
├── .env                  # Environment o'zgaruvchilar
├── .env.local            # Lokal environment
├── .env.development      # Development uchun
├── .env.production       # Production uchun
├── eslint.config.mjs     # ESLint sozlamalari
├── next-env.d.ts         # TypeScript deklaratsiyalar (avtomatik)
└── .gitignore            # Git tomonidan e'tiborga olinmaydigan fayllar
Enter fullscreen mode Exit fullscreen mode

Eslatma: .env fayllari hech qachon git ga qo'shilmasligi kerak!

3. Routing fayllari - ENG MUHIM QISM

Next.js app/ papkasi ichida maxsus nomli fayllarni taniydi. Har birining aniq vazifasi bor:

Fayl Vazifasi Qachon ishlatiladi
page.tsx Sahifa Brauzerda ko'rinadigan sahifa
layout.tsx Layout Header, sidebar, footer kabi umumiy UI
loading.tsx Yuklanish Sahifa yuklanayotganda skeleton/spinner
error.tsx Xatolik Xatolik yuz berganda ko'rsatiladigan UI
not-found.tsx 404 Sahifa topilmaganda
route.ts API Backend API endpoint
template.tsx Template Har safar qayta renderlanadigan layout
default.tsx Default Parallel route fallback sahifasi

Amaliy misol:

app/
├── layout.tsx        # Barcha sahifalar uchun umumiy layout
├── page.tsx          # Bosh sahifa: /
├── loading.tsx       # Bosh sahifa yuklanayotganda
├── not-found.tsx     # 404 sahifa
└── error.tsx         # Xatolik sahifasi
Enter fullscreen mode Exit fullscreen mode 
// app/layout.tsx - Root Layout
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="uz">
      <body>
        <header>Sayt Sarlavhasi</header>
        <main>{children}</main>
        <footer>Footer</footer>
      </body>
    </html>
  );
}
Enter fullscreen mode Exit fullscreen mode 
// app/page.tsx - Bosh sahifa (/)
export default function HomePage() {
  return <h1>Bosh sahifa</h1>;
}
Enter fullscreen mode Exit fullscreen mode

4. Ichki (Nested) Routelar

Papka = URL segment. Papkalarni ichma-ich joylashtirish orqali URL hosil bo'ladi:

app/
├── page.tsx                      # /
├── blog/
│   ├── page.tsx                  # /blog
│   ├── layout.tsx                # Blog sahifalarining umumiy layouti
│   └── authors/
│       └── page.tsx              # /blog/authors
└── about/
    └── page.tsx                  # /about
Enter fullscreen mode Exit fullscreen mode

MUHIM QOIDA

Papka ichida page.tsx yoki route.ts bo'lmasa, u route sifatida ishlamaydi! Shu sababli app/ ichida xavfsiz tarzda komponent va boshqa fayllarni saqlash mumkin:

app/
├── blog/
│   ├── components/        # ❌ Route emas - page.tsx yo'q
│   │   └── PostCard.tsx   # Xavfsiz - brauzerda ochilmaydi
│   └── page.tsx           # ✅ /blog - bu route
Enter fullscreen mode Exit fullscreen mode

5. Dinamik Routelar (Dynamic Routes)

Kvadrat qavslar [] bilan parametrli URL yaratiladi:

app/
├── blog/
│   └── [slug]/
│       └── page.tsx              # /blog/my-first-post
├── shop/
│   └── [...slug]/
│       └── page.tsx              # /shop/clothes, /shop/clothes/shirts
└── docs/
    └── [[...slug]]/
        └── page.tsx              # /docs, /docs/api, /docs/api/hooks
Enter fullscreen mode Exit fullscreen mode
Pattern Misol URL Tushuntirish
[slug] /blog/hello Bitta parametr
[...slug] /shop/a/b/c Catch-all - bir nechta segment
[[...slug]] /docs yoki /docs/a/b Optional catch-all - bo'sh ham bo'lishi mumkin 
// app/blog/[slug]/page.tsx
export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  return <h1>Blog post: {slug}</h1>;
}
// /blog/nextjs-guide → slug = "nextjs-guide"
Enter fullscreen mode Exit fullscreen mode

6. Route Groups - (papka) qavslar bilan

URL ga ta'sir qilmasdan papkalarni guruhlab tartibga solish uchun:

app/
├── (marketing)/           # URL da ko'rinmaydi!
│   ├── layout.tsx         # Faqat marketing sahifalari uchun layout
│   ├── page.tsx           # / (bosh sahifa)
│   └── about/
│       └── page.tsx       # /about
├── (shop)/                # URL da ko'rinmaydi!
│   ├── layout.tsx         # Faqat do'kon sahifalari uchun layout
│   ├── cart/
│   │   └── page.tsx       # /cart
│   └── checkout/
│       └── page.tsx       # /checkout
└── layout.tsx             # Root layout
Enter fullscreen mode Exit fullscreen mode

Foydalari:

  • Saytni bo'limlarga ajratish (marketing, admin, shop)
  • Har bir guruhga alohida layout berish
  • Bir nechta root layout yaratish

Bir nechta Root Layout 

app/
├── (marketing)/
│   ├── layout.tsx    # <html> va <body> bilan - birinchi root layout
│   └── page.tsx
└── (shop)/
    ├── layout.tsx    # <html> va <body> bilan - ikkinchi root layout
    └── page.tsx
Enter fullscreen mode Exit fullscreen mode

Bu usul bilan marketing va shop butunlay boshqa dizayn ga ega bo'ladi.

7. Private Folders - _papka pastki chiziq bilan

Routing tizimidan butunlay chiqarish uchun:

app/
├── blog/
│   ├── _components/       # ❌ Route emas - routing tizimi e'tiborsiz qoldiradi
│   │   ├── PostCard.tsx
│   │   └── CommentList.tsx
│   ├── _lib/              # ❌ Route emas
│   │   └── api.ts
│   └── page.tsx           # ✅ /blog
Enter fullscreen mode Exit fullscreen mode

Foydalari:

  • UI logikani routing logikadan ajratish
  • Ichki fayllarni tartibga solish
  • Kelajakdagi Next.js fayl nomlari bilan to'qnashuvni oldini olish

8. Komponentlar renderlanish tartibi

Next.js maxsus fayllarni qat'iy tartibda ichma-ich joylashtiradi:

<Layout>
  <Template>
    <ErrorBoundary fallback={<Error />}>
      <Suspense fallback={<Loading />}>
        <NotFoundBoundary fallback={<NotFound />}>
          <Page />
        </NotFoundBoundary>
      </Suspense>
    </ErrorBoundary>
  </Template>
</Layout>
Enter fullscreen mode Exit fullscreen mode

Tartib: layout → template → error → loading → not-found → page

9. Metadata fayllari 

app/
├── favicon.ico            # Brauzer tab ikonkasi
├── icon.png               # App ikonka
├── apple-icon.png         # Apple qurilmalari uchun
├── opengraph-image.png    # Telegram/Facebook da link ulashganda
├── twitter-image.png      # Twitter uchun
├── sitemap.xml            # SEO - sayt xaritasi
└── robots.txt             # Qidiruv botlari uchun qoidalar
Enter fullscreen mode Exit fullscreen mode

Bularni dinamik ham qilsa bo'ladi:

// app/sitemap.ts
export default function sitemap() {
  return [
    { url: 'https://example.com', lastModified: new Date() },
    { url: 'https://example.com/blog', lastModified: new Date() },
  ];
}
Enter fullscreen mode Exit fullscreen mode

10. Loyihani tartibga solish strategiyalari

Next.js qanday tartib tanlashni sizga qoldiradi. 3 ta mashhur yondashuv:

Strategiya 1: Kod app dan tashqarida 

project/
├── app/                 # Faqat routing
│   ├── layout.tsx
│   ├── page.tsx
│   └── blog/page.tsx
├── components/          # Barcha komponentlar
├── lib/                 # Utillar, servislar
└── types/               # TypeScript tiplar
Enter fullscreen mode Exit fullscreen mode

Strategiya 2: Hammasi app ichida 

app/
├── components/
├── lib/
├── layout.tsx
├── page.tsx
└── blog/page.tsx
Enter fullscreen mode Exit fullscreen mode

Strategiya 3: Feature-based (Tavsiya etiladi) 

app/
├── components/          # Global komponentlar
├── lib/                 # Global utillar
├── layout.tsx
├── page.tsx
└── blog/
    ├── components/      # Blog-ga tegishli komponentlar
    │   └── PostCard.tsx
    ├── lib/             # Blog-ga tegishli utillar
    │   └── blog-api.ts
    └── page.tsx
Enter fullscreen mode Exit fullscreen mode

11. Parallel va Intercepted Routes

Parallel Routes - @slot

Bitta layout ichida bir nechta sahifani parallel ko'rsatish:

app/
├── layout.tsx
├── @analytics/
│   └── page.tsx
├── @team/
│   └── page.tsx
└── page.tsx
Enter fullscreen mode Exit fullscreen mode 
// app/layout.tsx
export default function Layout({
  children,
  analytics,
  team,
}: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  team: React.ReactNode;
}) {
  return (
    <>
      {children}
      {analytics}
      {team}
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

Intercepted Routes - Modal pattern 

app/
├── feed/
│   ├── page.tsx
│   └── (..)photo/[id]/page.tsx   # Modal sifatida ochiladi
└── photo/[id]/
    └── page.tsx                   # To'liq sahifa (direct URL)
Enter fullscreen mode Exit fullscreen mode
Pattern Ma'nosi
(.)folder Shu darajadagi routeni ushlash
(..)folder Bir daraja yuqoridagi routeni ushlash
(..)(..)folder Ikki daraja yuqoridagi
(...)folder Root dan ushlash

Xulosa

Tushuncha Belgi Misol
Oddiy route papka + page.tsx app/about/page.tsx → /about
Dinamik route [param] app/blog/[slug]/page.tsx
Route group (nom) app/(admin)/... - URL da ko'rinmaydi
Private folder _nom app/_components/ - routing dan chiqariladi
Parallel route @slot app/@sidebar/page.tsx
Intercept (.), (..), (...) Modal patternlar uchun

Asosiy qoida: Papka ichida page.tsx bo'lmasa, u route emas! Shu sababli app/ ichida xavfsiz tarzda istalgan faylni saqlash mumkin.

Bu maqola Next.js 15+ rasmiy dokumentatsiyasi asosida yozilgan.

(https://www.matkarim.uz)

Top comments (0)