Membuat Halaman Error 404 Custom pada Next.js

Belajar membuat halaman Error 404 Custom pada Next.js.

Membuat Halaman Error 404 Custom pada Next.js

Pada pembelajaran kali ini, penulis akan menunjukkan cara membuat halaman error 404 custom pada Next.js. Sebelum melanjutkan, pastikan kalian telah membaca Bagian ke-enam dari pembelajaran ini.

Pada bagian sebelumnya, kita telah belajar membuat beberapa halaman yang berbeda pada Next.js. Lalu, bagaimana jika kalian mengunjungi halaman yang tidak ada atau belum dibuat? Tentunya kalian akan melihat tampilan atau halaman Error 404 bukan?

Membuat Halaman Error Custom

Secara Default, Next.js sudah menyediakan halaman Error 404. Kalian dapat melihatnya dengan memasukkan URL dengan Route yang belum ada. Contoh, http://localhost:3000/404. Berikut adalah tampilannya jika dilihat pada Browser:

Halaman Error Default

Sebenarnya, halaman Error 404 yang disediakan Next.js tidak terlalu jelek. Tetapi apa salahnya kalau kita ingin mengkustomisasinya sendiri.

Untuk membuat halaman Error 404 Custom pada Next.js, pertama-tama yang harus kalian lakukan adalah membuat file baru bernama 404.js didalam folder pages.

404.js adalah nama file spesial, sama halnya seperti index.js. Route untuk komponen halaman tersebut bukanlah /404, melainkan jika tidak ada URL yang cocok dengan Route komponen halaman, maka komponen halaman 404 lah yang akan muncul atau tampil pada Browser.

Didalam file 404.js, lagi-lagi kita membutuhkan Stateless Functional Component (SFC). Masukkan kode berikut kedalam file 404.js:

import Link from "next/link"

const halamanError = () => {
    return (
        <main className="error">
            <h1>404</h1>
            <h2>Halaman yang kalian cari tidak ada.</h2>
            <p>Kembali ke <Link href="/"><a>Halaman Utama</a></Link>.</p>
        </main>
    );
}
 
export default halamanError;

Pada kode diatas, kita telah meng-import komponen Link dari Next.js (import Link from "next/link"). Selanjutnya, kita telah membuat SFC dengan nama halamanError. Didalamnya, kita memiliki beberapa elemen. Selain itu, kita juga memiliki satu Link untuk kembali ke halaman utama (<Link href="/"><a>Halaman Utama</a></Link>).

Hasil dari kode diatas akan terlihat seperti berikut:

Halaman Error Custom

Menambahkan Style pada Halaman Error

Sekarang, kita akan membuat style custom untuk mempercantik tampilan Error. Disini, kita tidak akan membuat Modul CSS baru untuk halaman Error, melainkan melalui CSS Global.

Bukalah file globals.css pada folder styles dan masukkan kode CSS berikut tepat dibagian paling bawah:

.error {
    text-align: center;
}
.error h1 {
    font-size: 100px;
    margin: 0;
}
.error h2 {
    margin: 0;
}

Pada kode CSS diatas, kita telah membuat style untuk elemen yang memiliki class .error - yaitu komponen halaman Error 404 yang telah kita buat sebelumnya (className="error").

Berikut adalah perubahan yang telah kita buat ketika dibuka pada Browser:

Style Custom Halaman Error

Sampai disini penulis berharap kalian dapat memahaminya dengan mudah.

Kalian dapat melihat Source Code yang telah kita pelajari dari bagian ini pada Branch Bagian-7 Repository GitHub.

Jika artikel ini bermanfaat, silahkan bagikan kepada teman-teman atau saudara kalian. Jika kalian memiliki pertanyaan, silahkan tulis pada kolom komentar. Terimakasih telah berkunjung di EL Creative Academy.

Updated: Sunday, 07 March 2021

Diskusikan

0 Diskusi