Next.js - Perutean

Next.js menggunakan router berbasis sistem file. Kapanpun kita menambahkan halaman apapun kepagesdirektori, secara otomatis tersedia melalui url. Berikut adalah aturan dari router ini.

Index Routes- File index.js yang ada di folder memetakan ke root direktori. Misalnya -
- pages / index.js dipetakan ke '/'.
- pages / posts / index.js dipetakan ke '/ posts'.
Nested Routes- Setiap struktur folder bersarang di direktori halaman karena url router secara otomatis. Misalnya -
- halaman / pengaturan / dasbor / about.js memetakan ke '/ pengaturan / dasbor / tentang'.
- pages / posts / first.js memetakan ke '/ posts / first'.
Dynamic Routes- Kita bisa menggunakan parameter bernama juga untuk mencocokkan url. Gunakan tanda kurung untuk hal yang sama. Misalnya -
- pages / posts / [id] .js memetakan ke '/ posts /: id' di mana kita dapat menggunakan URL seperti '/ posts / 1'.
- pages / [user] /settings.js memetakan ke '/ posts /: user / settings' di mana kita dapat menggunakan URL seperti '/ abc / settings'.
- pages / posts / [... all] .js memetakan ke '/ posts / *' di mana kita dapat menggunakan URL seperti '/ posts / 2020 / jun /'.

Menghubungkan Halaman

Next.JS memungkinkan untuk menautkan halaman di sisi klien menggunakan komponen Link react. Ini memiliki properti berikut -

href- nama halaman dalam direktori halaman. Sebagai contoh/posts/first yang mengacu pada first.js yang ada di direktori halaman / posting.

Mari buat contoh untuk menunjukkan hal yang sama.

Dalam contoh ini, kami akan memperbarui halaman index.js dan first.js untuk membuat server terkena untuk mendapatkan data.

Mari perbarui proyek nextjs yang digunakan dalam bab Dukungan CSS Global .

Perbarui file index.js di direktori halaman sebagai berikut.

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

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Verifikasi Output

Buka localhost: 3000 di browser dan Anda akan melihat output berikut.

Klik link posting pertama.