Next.js - Halaman

Di Next.js, kita dapat membuat halaman dan menavigasi di antaranya menggunakan fitur perutean sistem file. Kami akan menggunakanLink komponen untuk memiliki navigasi sisi klien antar halaman.

Di Next.js, halaman adalah Komponen React dan diekspor dari direktori halaman. Setiap halaman dikaitkan dengan rute berdasarkan nama filenya. Sebagai contoh

• pages/index.js ditautkan dengan rute '/'.

• pages/posts/first.js ditautkan dengan rute '/ posts / first' dan seterusnya.

Mari perbarui proyek nextjs yang dibuat di bab Pengaturan Lingkungan .

Buat direktori posting dan first.js di dalamnya dengan konten berikut.

export default function FirstPost() {
   return <h1>My First Post</h1>
}

Tambahkan Dukungan Tautan untuk kembali ke halaman Beranda. Perbarui first.js sebagai berikut -

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
      </>	  
   )
}

Tambahkan Dukungan Tautan ke halaman beranda untuk menavigasi ke halaman pertama. Perbarui index.js sebagai berikut -

import Link from 'next/link'

function HomePage() {
   return (
      <>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
      </>	    
   )
}

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 First Link dan Anda akan melihat output berikut.