Next.js - Yönlendirme

Next.js dosya sistemi tabanlı yönlendirici kullanır. Ne zaman herhangi bir sayfa eklediğimizdepagesdizin, url aracılığıyla otomatik olarak kullanılabilir. Bu yönlendiricinin kuralları aşağıdadır.

Index Routes- Bir klasörde bulunan bir index.js dosyası, dizinin köküyle eşleşir. Örneğin -
- pages / index.js, "/" ile eşleşir.
- page / posts / index.js, '/ posts' ile eşleşir.
Nested Routes- Sayfalar dizinindeki herhangi bir iç içe klasör yapısı, çünkü yönlendirici URL'si otomatik olarak. Örneğin -
- pages / settings / dashboard / about.js, "/ settings / dashboard / about" ile eşleşir.
- page / posts / first.js, "/ posts / first" ile eşleşir.
Dynamic Routes- URL'yi eşleştirmek için adlandırılmış parametreyi de kullanabiliriz. Aynısı için parantez kullanın. Örneğin -
- pages / posts / [id] .js, '/ posts / 1' gibi URL'yi kullanabileceğimiz '/ posts /: id' ile eşleşir.
- sayfalar / [kullanıcı] /settings.js, '/ abc / settings' gibi URL'yi kullanabileceğimiz '/ posts /: kullanıcı / ayarlar' ile eşleşir.
- pages / posts / [... all] .js, '/ posts / 2020 / jun /' gibi herhangi bir URL'yi kullanabileceğimiz '/ posts / *' ile eşleşir.

Sayfa Bağlantısı

Next.JS, Link react bileşenini kullanarak istemci tarafındaki sayfaları bağlamayı sağlar. Aşağıdaki özelliklere sahiptir -

href- sayfalar dizinindeki sayfanın adı. Örneğin/posts/first bu, pages / posts dizininde bulunan first.js'yi ifade eder.

Aynısını göstermek için bir örnek oluşturalım.

Bu örnekte, verileri almak üzere bir sunucunun isabet etmesini sağlamak için index.js ve first.js sayfasını güncelleyeceğiz.

Global CSS Desteği bölümünde kullanılan nextjs projesini güncelleyelim .

İndex.js dosyasını aşağıdaki gibi sayfalar dizininde güncelleyin.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first">> <a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000'i açın ve aşağıdaki çıktıyı göreceksiniz.

İlk gönderi bağlantısına tıklayın.