Membuat Halaman 404 Kustom di Laravel Inertia

Muhammad Amirul Ihsan•8 Oktober 2025•2 menit baca
Bagikan:
LaravelInertia
Membuat Halaman 404 Kustom di Laravel Inertia

Dalam membuat website, tentu saja kita tidak mau pengguna menemui halaman yang tidak ditemukan (404), tapi terkadang hal ini sangat bisa terjadi. Pada Laravel hal ini sudah ditangani dengan menyajikan halaman error yang menunjukkan bahwa halaman tersebut tidak ditemukan.

Namun, kita bisa mengustomisasi halaman tersebut pada proyek Laravel kita. Pada kasus kali ini kita akan membuatnya dalam proyek Laravel dengan Inertia.

Tambahkan route fallback pada web.php#

Tambahkan route fallback pada akhir file web.php, agar Laravel menangani rute yang tidak ditemukan dengan route fallback.

use Inertia\Inertia;

Route::fallback(function () {
    return Inertia::render('Errors/NotFound', [
        'status' => 404,
        'message' => 'Halaman yang kamu cari tidak ditemukan.'
    ])->toResponse(request())->setStatusCode(404);
});

Penjelasan:

  • Route::fallback() akan dijalankan kalau tidak ada route yang cocok.
  • Inertia::render('Errors/NotFound') memanggil komponen Vue/React/Svelte sesuai framework frontend kamu.

Buat Komponen halaman error di frontend#

Jika proyek kita menggunakan Vue, maka buatlah sebuah file di :

resources/js/Pages/Errors/NotFound.vue

<template>
  <div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 text-center">
    <div class="max-w-md">
      <img 
        src="https://illustrations.popsy.co/violet/web-search-error.svg" 
        alt="404 Illustration" 
        class="w-72 mx-auto mb-8"
      />

      <h1 class="text-6xl font-extrabold text-indigo-700">404</h1>
      <p class="text-xl text-gray-700 mt-4">Oops! Halaman yang kamu cari tidak ditemukan.</p>
      <p class="text-gray-500 mt-2">Mungkin kamu salah ketik URL atau halaman sudah dipindahkan.</p>

      <div class="mt-8 flex justify-center space-x-4">
        <Link 
          href="/" 
          class="px-6 py-3 bg-indigo-600 text-white rounded-lg shadow-md hover:bg-indigo-700 transition"
        >
          Kembali ke Beranda
        </Link>

        <button 
          @click="goBack"
          class="px-6 py-3 bg-white border border-gray-300 rounded-lg shadow-md hover:bg-gray-100 transition"
        >
          Kembali ke Sebelumnya
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Link } from '@inertiajs/vue3'

const goBack = () => {
  window.history.back()
}
</script>

Jika proyek kita menggunakan React buat file:

resources/js/Pages/Errors/NotFound.tsx

import { Link } from '@inertiajs/react'

export default function NotFound() {
  const goBack = () => window.history.back()

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 text-center">
      <div className="max-w-md">
        <img
          src="https://illustrations.popsy.co/violet/web-search-error.svg"
          alt="404 Illustration"
          className="w-72 mx-auto mb-8"
        />

        <h1 className="text-6xl font-extrabold text-indigo-700">404</h1>
        <p className="text-xl text-gray-700 mt-4">
          Oops! Halaman yang kamu cari tidak ditemukan.
        </p>
        <p className="text-gray-500 mt-2">
          Mungkin kamu salah ketik URL atau halaman sudah dipindahkan.
        </p>

        <div className="mt-8 flex justify-center space-x-4">
          <Link
            href="/"
            className="px-6 py-3 bg-indigo-600 text-white rounded-lg shadow-md hover:bg-indigo-700 transition"
          >
            Kembali ke Beranda
          </Link>

          <button
            onClick={goBack}
            className="px-6 py-3 bg-white border border-gray-300 rounded-lg shadow-md hover:bg-gray-100 transition"
          >
            Kembali ke Sebelumnya
          </button>
        </div>
      </div>
    </div>
  )
}

Kurang lebih segampang ini untuk membuat halaman kustom error 404 di Laravel Inertia.