> For the complete documentation index, see [llms.txt](https://emre-turan.gitbook.io/next.js-doekuemani/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://emre-turan.gitbook.io/next.js-doekuemani/2-routing/8-paralel-routes.md).
# Paralel Rotalar (Parallel Routes)
Paralel Yönlendirme, bir veya daha fazla sayfayı aynı düzende eşzamanlı veya koşullu olarak render etmenize olanak tanır. Bir uygulamanın gösterge tabloları ve sosyal sitelerdeki beslemeler gibi son derece dinamik bölümleri için Paralel Yönlendirme, karmaşık yönlendirme modellerini uygulamak için kullanılabilir.
Örneğin, ekip ve analiz sayfalarını aynı anda oluşturabilirsiniz.
Paralel Yönlendirme, her bir rota için bağımsız hata ve yükleme durumları tanımlamanıza olanak tanır.
Paralel Yönlendirme, kimlik doğrulama durumu gibi belirli koşullara bağlı olarak bir yuvayı koşullu olarak render etmenize da olanak tanır. Bu, aynı URL üzerinde tamamen ayrılmış kod sağlar.
## Kongre (Convention)
Paralel rotalar adlandırılmış **yuvalar** kullanılarak oluşturulur. Yuvalar `@folder` konvansiyonu ile tanımlanır ve aynı seviyedeki düzene prop olarak aktarılır.
Yuvalar rota segmentleri değildir ve URL yapısını etkilemez. `/@team/members` dosya yoluna `/members` adresinden erişilebilir.
Örneğin, aşağıdaki dosya yapısı iki açık yuva tanımlar: `@analytics` ve `@team`.
Yukarıdaki klasör yapısı, `app/layout.js`'deki bileşenin artık `@analytics` ve `@team` slots prop'larını kabul ettiği ve bunları `alt eleman` prop ile birlikte paralel olarak render edebileceği anlamına gelir:
```ts
export default function Layout(props: {
children: React.ReactNode;
analytics: React.ReactNode;
team: React.ReactNode;
}) {
return (
<>
{props.children}
{props.team}
{props.analytics}
);
}
```
Bilmekte fayda var: `alt eleman` prop'u, bir klasörle eşleştirilmesi gerekmeyen örtük bir yuvadır. Bu, `app/page.js`'nin `app/@children/page.js` ile eşdeğer olduğu anlamına gelir.
## Eşleşmeyen Rotalar (Unmatched Routes)
Varsayılan olarak, bir yuva içinde oluşturulan içerik geçerli URL ile eşleşir.
Eşleşmeyen bir yuva olması durumunda, Next.js'nin işlediği içerik yönlendirme tekniğine ve klasör yapısına göre farklılık gösterir.
### `default.js`
Next.js geçerli URL'ye göre bir yuvanın etkin durumunu kurtaramadığında geri dönüş olarak render edilecek bir `default.js` dosyası tanımlayabilirsiniz.
Aşağıdaki klasör yapısını düşünün. `@team` yuvasının bir `settings` dizini var, ancak `@analytics`'in yok.
Kök `/` dizininden `/settings` dizinine giderseniz, gezinme türüne ve `default.js` dosyasının kullanılabilirliğine bağlı olarak render edilen içerik farklı olur.
| | `@analytics/default.js` ile | `@analytics/default.js` olmadan |
| --------------- | --------------------------------------------------- | ------------------------------------------------ |
| Soft Navigation | `@team/settings/page.js` ve `@analytics/page.js` | `@team/settings/page.js` ve `@analytics/page.js` |
| Hard Navigation | `@team/settings/page.js` ve `@analytics/default.js` | 404 |
### Yumuşak Navigasyon (Soft Navigation)
Yumuşak bir navigasyonda - Next.js, geçerli URL ile eşleşmese bile yuvanın daha önce etkin olan durumunu oluşturur.
### Sert Navigasyon (Hard Navigation)
Zor bir navigasyonda (bütün sayfanın yeniden yüklenmesini gerektiren bir navigasyon) Next.js önce eşleşmeyen yuvanın default.js dosyasını render etmeye çalışır. Eğer bu dosya mevcut değilse, bir 404 görüntülenir.
Eşleşmeyen rotalar için 404, paralel olarak render edilmemesi gereken bir rotayı yanlışlıkla render etmenizi sağlamaya yardımcı olur.
### `useSelectedLayoutSegment(s)`
Hem `useSelectedLayoutSegment` hem de `useSelectedLayoutSegments`, o yuvadaki etkin rota segmentini okumanızı sağlayan bir `parallelRoutesKey` kabul eder.
```ts
"use client";
import { useSelectedLayoutSegment } from "next/navigation";
export default async function Layout(props: {
//...
authModal: React.ReactNode;
}) {
const loginSegments = useSelectedLayoutSegment("authModal");
// ...
}
```
Bir kullanıcı URL çubuğunda `@authModal/login` veya `/login` adresine gittiğinde, `loginSegments` `"login"` dizesine eşit olacaktır.
## Örnekler
### Modaller (Modals)
Paralel Yönlendirme, modları render etmek için kullanılabilir.
`authModal` yuvası, örneğin `/login` gibi eşleşen bir rotaya gidilerek gösterilebilen bir `` bileşeni oluşturur.
app/layout.tsx:
```ts
export default async function Layout(props: {
// ...
authModal: React.ReactNode;
}) {
return (
<>
{/* ... */}
{props.authModal}
);
}
```
app/@authModal/login/page.tsx:
```ts
import { Modal } from "components/modal";
export default function Login() {
return (
Login
{/* ... */}
);
}
```
Modal etkin olmadığında içeriğinin işlenmemesini sağlamak için `null` döndüren bir `default.js` dosyası oluşturabilirsiniz.
app/@authModal/login/default.tsx:
```ts
export default function Default() {
return null;
}
```
### Bir modalın kapatılması (Dismissing a modal)
İstemci gezintisi yoluyla, örneğin `` kullanılarak bir modal başlatılmışsa, `router.back()` öğesini çağırarak veya bir `Link` bileşeni kullanarak modalı kapatabilirsiniz.
app/@authModal/login/page.tsx:
```ts
"use client";
import { useRouter } from "next/navigation";
import { Modal } from "components/modal";
export default async function Login() {
const router = useRouter();
return (
router.back()}>Close modal
Login
...
);
}
```
Başka bir yere gitmek ve bir modalı kapatmak istiyorsanız, her şeyi kapsayan bir rota da kullanabilirsiniz.
app/@authModal/\[...catchAll]/page.tsx:
```ts
export default function CatchAll() {
return null;
}
```
Catch-all rotaları `default.js`'ye göre önceliklidir.
## Koşullu Rotalar (Conditional Routes)
Paralel Rotalar koşullu yönlendirme uygulamak için kullanılabilir. Örneğin, kimlik doğrulama durumuna bağlı olarak bir `@dashboard` veya `@login` rotası render edebilirsiniz.
```ts
import { getUser } from "@/lib/auth";
export default function Layout({ params, dashboard, login }) {
const isLoggedIn = getUser();
return isLoggedIn ? dashboard : login;
}
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://emre-turan.gitbook.io/next.js-doekuemani/2-routing/8-paralel-routes.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.