Karena menggunakan halaman default 404 terkadang terasa membosankan, benar?

Terkadang ketika kita mengakses sebuah situs yang kita temukan malah halaman 404, yang biasanya bunyinya gini: "404 page not found", atau semacamnya lah, benar?

Gue tau hal itu sangat menyebalkan, tapi kalau halamannya user friendly (secara desain), gue kira itu masih bisa dimaafkan hehe.

Nah! Karena belakangan ini gue sedang senang bermain-main dengan si "The React Framework for Production" alias Next.js, gue berpikiran untuk membuat hal serupa dengan Next.js tentunya.

Gue asumsikan di sini lo udah punya projek Next.js ya, kalaupun belum ya silahkan bisa buat dulu.

Kalau dirasa sudah, kita lanjut ke ritual-ritualnya.

Ritual pertama yang wajib kita lakukan yaitu: buka text editor apapun itu (VS Code? Sublime? Atau bahkan VIM?)ㅡ pakai notepad juga boleh haha.

Ritual kedua, setelah "alat tempur" kita terbuka, kita buka projek yang sudah dibuat di text editor.

Kalau sudah, bisa buka direktori pages dan buat file bernama 404.js.

Seikhlas informasi buat yang belum tau, jadi file apapun yang ada di dalam direktori pages nantinya akan dijadikan route secara otomatis oleh Next.js.

Kemudian kita buat stateless functional component, di sini gue beri nama NotFound yang mana mengembalikan teks sederhana yang dibungkus tag html h1.

const NotFound = () => {
 return (
  <div className="not-found">
    <h1> Ooops... this page is a Ghost!</h1>
  </div>
 );
}

export default NotFound;

Simpan dan jalankan program, karena gue menggunakan yarn maka perintah yang gue gunakan yaitu:

$ yarn dev

Tunggu server running dan buka peramban favorit lo, lalu buka localhost port 3000 (itu yang Next.js gunakan by default).

Jika sudah bisa diakses, sikahkan masukkan url acak atau /404, dan hasilnya bisa dilihat.

Terima kasih sudah mengikuti, gue berharap halaman 404 lo tidak terasa membosankan lagi.