Parallel Routes

Paralel Rotalar, aynı düzen içinde bir veya daha fazla sayfayı eşzamanlı veya koşullu olarak oluşturmanıza olanak tanır. Bir uygulamanın gösterge tabloları ve sosyal sitelerdeki beslemeler gibi son derece dinamik bölümleri için kullanışlıdırlar.

Örneğin, bir gösterge tablosunu ele alırsak, team ve analytics sayfalarını aynı anda işlemek için paralel rotalar kullanabilirsiniz:

Slots

Paralel rotalar adlandırılmış yuvalar kullanılarak oluşturulur. Yuvalar @folder konvansiyonu ile tanımlanır. Örneğin, aşağıdaki dosya yapısı iki yuva tanımlar: @analytics ve @team:

Yuvalar, paylaşılan üst düzene prop olarak aktarılır. Yukarıdaki örnekte, app/layout.js adresindeki bileşen artık @analytics ve @team yuva prop'larını kabul eder ve bunları children prop'uyla birlikte paralel olarak oluşturabilir:

export default function Layout(props: {
    children: React.ReactNode
    analytics: React.ReactNode
    team: React.ReactNode
  }) {
    return (
      <>
        {props.children}
        {props.team}
        {props.analytics}
      </>
    )
  }

Ancak, yuvalar rota segmentleri değildir ve URL yapısını etkilemez. Örneğin, /dashboard/@analytics/views için URL, @analytics bir yuva olduğu için /dashboard/views olacaktır.

Bildiğim iyi oldu:

• children prop, bir klasörle eşleştirilmesi gerekmeyen örtük bir yuvadır. Bu, app/page.js 'un app/@children/page.js ile eşdeğer olduğu anlamına gelir.

Active state and navigation

Next.js varsayılan olarak her bir slot için aktif durumu (veya alt sayfayı) takip eder. Ancak, bir slot içinde işlenen içerik navigasyon türüne bağlı olacaktır:

• Yumuşak Navigasyon: İstemci tarafında gezinme sırasında Next.js kısmi bir render işlemi gerçekleştirerek slot içindeki alt sayfayı değiştirirken, mevcut URL ile eşleşmeseler bile diğer slotun aktif alt sayfalarını korur.
• Zor Navigasyon: Tam sayfa yüklemeden (tarayıcı yenileme) sonra Next.js, geçerli URL ile eşleşmeyen yuvaların etkin durumunu belirleyemez. Bunun yerine, bir default.js eşleşmeyen yuvalar için dosya veya default.js yoksa 404.

Bildiğim iyi oldu:

• Eşleşmeyen rotalar için 404 adresi, paralel olarak işlenmemesi gereken bir rotayı yanlışlıkla işlememenizi sağlamaya yardımcı olur.

default.js

İlk yükleme veya tam sayfa yeniden yükleme sırasında eşleşmeyen yuvalar için yedek olarak işlenecek bir default.js dosyası tanımlayabilirsiniz.

Aşağıdaki klasör yapısını düşünün. @team yuvasında bir settings sayfası var, ancak @analytics yok.

/dashboard/settings adresine gidildiğinde, @team yuvası settings sayfasını oluştururken @analytics yuvası için o anda etkin olan sayfayı koruyacaktır.

Yenileme sırasında Next.js, @analytics için bir default.js oluşturur. default.js mevcut değilse, bunun yerine bir 404 oluşturulur.

Ayrıca, children örtük bir yuva olduğundan, Next.js ana sayfanın etkin durumunu kurtaramadığında children için bir geri dönüş oluşturmak üzere bir default.js dosyası da oluşturmanız gerekir.

useSelectedLayoutSegment(s)

Her ikisi de useSelectedLayoutSegment ve useSelectedLayoutSegments bir slot içindeki aktif rota segmentini okumanızı sağlayan bir parallelRoutesKey parametresini kabul eder.

'use client'
   
  import { useSelectedLayoutSegment } from 'next/navigation'
   
  export default function Layout(props: {
    //...
    auth: React.ReactNode
  }) {
    const loginSegments = useSelectedLayoutSegment('auth')
    // ...
  }

Bir kullanıcı app/@auth/login (veya URL çubuğunda /login ) adresine gittiğinde, loginSegments dizesi "login" dizesine eşit olacaktır.

Examples

Modals

Paralel Yönlendirme, modları işlemek için kullanılabilir.

@auth yuvası, örneğin /login gibi eşleşen bir rotaya gidilerek gösterilebilecek bir <Modal> bileşeni oluşturur.

export default async function Layout(props: {
    // ...
    auth: React.ReactNode
  }) {
    return (
      <>
        {/* ... */}
        {props.auth}
      </>
    )
  }

import { Modal } from 'components/modal'
   
  export default function Login() {
    return (
      <Modal>
        <h1>Login</h1>
        {/* ... */}
      </Modal>
    )
  }

Modal etkin olmadığında içeriğinin işlenmemesini sağlamak için null adresini döndüren bir default.js dosyası oluşturabilirsiniz.

export default function Default() {
    return null
  }

Dismissing a modal

İstemci gezintisi yoluyla, örneğin <Link href="/login"> kullanılarak bir modal başlatılmışsa, router.back() adresini çağırarak veya bir Link bileşeni kullanarak modalı kapatabilirsiniz.

'use client'
  import { useRouter } from 'next/navigation'
  import { Modal } from 'components/modal'
   
  export default function Login() {
    const router = useRouter()
    return (
      <Modal>
        <span onClick={() => router.back()}>Close modal</span>
        <h1>Login</h1>
        ...
      </Modal>
    )
  }

Kipler hakkında daha fazla bilgi Yakalama Yolları bölümünde ele alınmıştır.

Başka bir yere gitmek ve bir modalı kapatmak istiyorsanız, her şeyi kapsayan bir rota da kullanabilirsiniz.

export default function CatchAll() {
    return null
  }

Tümünü yakalama rotaları default.js adresinden önceliklidir.

Conditional Routes

Paralel Rotalar ayrıca kimlik doğrulama durumu gibi belirli koşullara bağlı olarak bir yuvayı koşullu olarak oluşturmanıza olanak tanır. Örneğin, kullanıcının oturum açıp açmadığına bağlı olarak bir /dashboard veya /login sayfası oluşturabilirsiniz:

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ı oluşturabilirsiniz.

import { getUser } from '@/lib/auth'
   
  export default function Layout({
    dashboard,
    login,
  }: {
    dashboard: React.ReactNode
    login: React.ReactNode
  }) {
    const isLoggedIn = getUser()
    return isLoggedIn ? dashboard : login
  }

Streaming

Paralel Rotalar bağımsız olarak akıtılabilir, böylece her rota için bağımsız hata ve yükleme durumları tanımlayabilirsiniz: