Next.js - การกำหนดเส้นทาง

Next.js ใช้เราเตอร์ที่ใช้ระบบไฟล์ เมื่อใดก็ตามที่เราเพิ่มหน้าใด ๆpagesไดเรกทอรีจะพร้อมใช้งานโดยอัตโนมัติผ่าน url ต่อไปนี้เป็นกฎของเราเตอร์นี้

Index Routes- ไฟล์ index.js ที่มีอยู่ในโฟลเดอร์แมปไปยังรูทของไดเร็กทอรี ตัวอย่างเช่น -
- pages / index.js แมปไปที่ "/"
- pages / posts / index.js แมปไปที่ '/ posts'
Nested Routes- โครงสร้างโฟลเดอร์ที่ซ้อนกันในไดเร็กทอรีเพจเนื่องจาก URL ของเราเตอร์โดยอัตโนมัติ ตัวอย่างเช่น -
- pages / settings / dashboard / about.js แมปไปที่ '/ settings / dashboard / about'
- หน้า / โพสต์ / first.js แมปไปที่ '/ posts / first'
Dynamic Routes- เราสามารถใช้พารามิเตอร์ที่มีชื่อเพื่อจับคู่ url ใช้วงเล็บเหมือนกัน ตัวอย่างเช่น -
- pages / posts / [id] .js แมปไปยัง '/ posts /: id' ซึ่งเราสามารถใช้ URL เช่น '/ posts / 1'
- pages / [ผู้ใช้] /settings.js แมปกับ '/ posts /: user / settings' ซึ่งเราสามารถใช้ URL เช่น '/ abc / settings'
- หน้า / โพสต์ / [... ทั้งหมด] .js แมปกับ '/ posts / *' ซึ่งเราสามารถใช้ URL ใดก็ได้เช่น '/ posts / 2020 / jun /'

การเชื่อมโยงเพจ

Next.JS อนุญาตให้เชื่อมโยงเพจในฝั่งไคลเอ็นต์โดยใช้คอมโพเนนต์ Link react มีคุณสมบัติดังต่อไปนี้ -

href- ชื่อของเพจในไดเร็กทอรีเพจ ตัวอย่างเช่น/posts/first ซึ่งอ้างถึง first.js ที่อยู่ในไดเร็กทอรีเพจ / โพสต์

มาสร้างตัวอย่างเพื่อสาธิตสิ่งเดียวกัน

ในตัวอย่างนี้เราจะอัปเดตหน้า index.js และ first.js เพื่อให้เซิร์ฟเวอร์เข้าชมเพื่อรับข้อมูล

มาอัปเดตโปรเจ็กต์ nextjs ที่ใช้ในบทGlobal CSS Support

อัพเดตไฟล์ index.js ในไดเร็กทอรีเพจดังต่อไปนี้

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

รันคำสั่งต่อไปนี้เพื่อเริ่มเซิร์ฟเวอร์ -

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

ตรวจสอบผลลัพธ์

เปิด localhost: 3000 ในเบราว์เซอร์และคุณจะเห็นผลลัพธ์ต่อไปนี้

คลิกที่ลิงค์โพสต์แรก