Pages

Metode Pembuatan page.js

Untuk membuat halaman baru, buat file di dalam direktori app. Misalnya, untuk membuat halaman beranda, buat file page.js di dalam direktori app.

app
└── page.js

export default function Beranda() {
  return (
    <div>
      <h1>Selamat Datang di Beranda!</h1>
      <p>Ini adalah Halaman Beranda Devscale Indonesia.</p>
    </div>
  );
}

Jangan lupa jalankan perintah npm run dev untuk menjalankan Next.js di lokal. Buka browser web dan kunjungi http://localhost:3000 untuk melihat halaman beranda kamu yang baru dibuat.

Jika ingin membuat lebih spesifik dengan nama direktori misalnya, app/beranda atau app/beranda/profil. Buat file page.js di dalam direktori app/beranda.

app
└── beranda
    └── page.js

export default function Beranda() {
  return (
    <div>
      <h1>Selamat Datang di Beranda!</h1>
      <p>Ini adalah Halaman Beranda Devscale Indonesia.</p>
    </div>
  );
}

Jangan lupa jalankan perintah npm run dev untuk menjalankan Next.js di lokal. Buka browser web dan kunjungi http://localhost:3000/beranda untuk melihat halaman beranda kamu yang baru dibuat.

Props

Buatlah halaman baru dengan menggunakan props. Misalnya, kita akan membuat halaman dengan nama HalamanWithProps.js di dalam direktori app.

app
└── HalamanWithProps.js
└── page.js

export default function HalamanWithProps(props) {
  return (
    <div>
      <h1>Halo, {props.nama}!</h1>
      <p>Umur kamu adalah {props.umur} tahun.</p>
    </div>
  );
}

Kamu dapat menggunakan halaman yang baru saja kamu buat di dalam file lain misalnya di page.js dengan mengirimkan props ke halaman tersebut.

import HalamanWithProps from "./HalamanWithProps";
 
export default function Beranda() {
  return (
    <div>
      <HalamanWithProps nama="Vio" umur={18} />
    </div>
  );
}