Pages and Layouts

Sayfalar Yönlendiricisi, sayfalar kavramı üzerine inşa edilmiş dosya sistemi tabanlı bir yönlendiriciye sahiptir.

Bir dosya pages dizinine eklendiğinde, otomatik olarak bir rota olarak kullanılabilir.

Next.js'de bir sayfa, pages dizinindeki bir .js, .jsx, .ts veya .tsx dosyasından dışa aktarılan bir React Bileşeni 'dur. Her sayfa, dosya adına bağlı olarak bir rota ile ilişkilendirilir.

Örnek: Aşağıdaki gibi bir React bileşenini dışa aktaran pages/about.js oluşturursanız, bu bileşene /about adresinden erişilebilir.

export default function About() {
  return <div>About</div>
}

Index routes

Yönlendirici, index adlı dosyaları otomatik olarak dizinin kök dizinine yönlendirecektir.

• pages/index.js → /
• pages/blog/index.js → /blog

Nested routes

Yönlendirici iç içe geçmiş dosyaları destekler. İç içe bir klasör yapısı oluşturursanız, dosyalar otomatik olarak yine aynı şekilde yönlendirilecektir.

• pages/blog/first-post.js → /blog/first-post
• pages/dashboard/settings/username.js → /dashboard/settings/username

Pages with Dynamic Routes

Next.js dinamik rotalara sahip sayfaları destekler. Örneğin, pages/posts/[id].js adında bir dosya oluşturursanız, bu dosyaya posts/1, posts/2 vb. adreslerden erişilebilir.

Dinamik yönlendirme hakkında daha fazla bilgi edinmek için Dinamik Yönlendirme belgelerine bakın.

Layout Pattern

React modeli, bir sayfayı bir dizi bileşene ayırmamızı sağlar. Bu bileşenlerin çoğu genellikle sayfalar arasında yeniden kullanılır. Örneğin, her sayfada aynı gezinti çubuğuna ve altbilgiye sahip olabilirsiniz.

import Navbar from './navbar'
import Footer from './footer'
 
export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

Examples

Single Shared Layout with Custom App

Tüm uygulamanız için yalnızca bir düzeniniz varsa, bir Özel Uygulama oluşturabilir ve uygulamanızı düzenle sarabilirsiniz. Sayfalar değiştirilirken <Layout /> bileşeni yeniden kullanıldığından, bileşen durumu korunacaktır (örn. giriş değerleri).

import Layout from '../components/layout'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

Per-Page Layouts

Birden fazla düzene ihtiyacınız varsa, sayfanıza getLayout özelliğini ekleyerek düzen için bir React bileşeni döndürmenizi sağlayabilirsiniz. Bu, düzeni sayfa bazında tanımlamanıza olanak tanır. Bir fonksiyon döndürdüğümüz için, istenirse karmaşık iç içe düzenlere sahip olabiliriz.

 
import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'
 
export default function Page() {
  return (
    /** Your content */
  )
}
 
Page.getLayout = function getLayout(page) {
  return (
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}

export default function MyApp({ Component, pageProps }) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout || ((page) => page)
 
  return getLayout(<Component {...pageProps} />)
}

Sayfalar arasında gezinirken, Tek Sayfalı Uygulama (SPA) deneyimi için sayfa durumunu (giriş değerleri, kaydırma konumu vb.) kalıcı hale getirmek istiyoruz.

Bu düzen modeli, React bileşen ağacı sayfa geçişleri arasında korunduğu için durum kalıcılığını sağlar. Bileşen ağacı sayesinde React, durumu korumak için hangi öğelerin değiştiğini anlayabilir.

Bilmekte fayda var: Bu işleme uzlaşma denir , React hangi öğelerin değiştiğini bu şekilde anlar.

With TypeScript

TypeScript kullanırken, öncelikle sayfalarınız için bir getLayout işlevi içeren yeni bir tür oluşturmanız gerekir. Ardından, AppProps sayfanız için Component özelliğini geçersiz kılarak daha önce oluşturulmuş türü kullanacak yeni bir tür oluşturmalısınız.

import type { ReactElement } from 'react'
import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'
import type { NextPageWithLayout } from './_app'
 
const Page: NextPageWithLayout = () => {
  return <p>hello world</p>
}
 
Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}
 
export default Page

import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'
 
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode
}
 
type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}
 
export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout ?? ((page) => page)
 
  return getLayout(<Component {...pageProps} />)
}

Data Fetching

Düzeninizin içinde, useEffect veya SWR gibi bir kütüphane kullanarak istemci tarafında veri getirebilirsiniz. Bu dosya bir Sayfa olmadığından, şu anda getStaticProps veya getServerSideProps adreslerini kullanamazsınız.

import useSWR from 'swr'
import Navbar from './navbar'
import Footer from './footer'
 
export default function Layout({ children }) {
  const { data, error } = useSWR('/api/navigation', fetcher)
 
  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>
 
  return (
    <>
      <Navbar links={data.links} />
      <main>{children}</main>
      <Footer />
    </>
  )
}