Konfigurasi Handle Inertia Request pada Laravel 12 dengan Inertia, React JS, dan Tailwind CSS

Nah, di bagian ini kita akan membahas bagaimana cara mengatur atau mengonfigurasi middleware bawaan Laravel yang berkaitan langsung dengan Inertia. File yang akan kita modifikasi berada di dalam folder:

app/Http/Middleware/

Nama filenya adalah HandleInertiaRequests.php.

File ini secara default sudah disediakan oleh Laravel ketika kita meng-install Inertia. Fungsinya adalah untuk mengatur data apa saja yang ingin kita share dari backend Laravel ke frontend yang menggunakan Inertia (dalam kasus kita: React JS).

Sederhananya begini — middleware ini seperti jembatan. Data dari backend akan kita "lemparkan" ke frontend lewat file ini, sehingga React bisa langsung mengaksesnya, misalnya: data user yang sedang login, notifikasi, atau bahkan pengaturan global aplikasi.

Menambahkan Flash Message ke Inertia

Silakan buka file HandleInertiaRequests.php yang tadi sudah disebutkan.

Lokasinya:

app/Http/Middleware/HandleInertiaRequests.php

Di dalam file ini, kita akan menambahkan satu baris kode penting yang berguna untuk mengirimkan flash message dari backend Laravel ke frontend React melalui Inertia.

Tambahkan kode berikut ke dalam method share():

'flash' => [
    'message' => fn () => $request->session()->get('message'),
],

Kode ini sebaiknya ditempatkan di dalam array yang dikembalikan oleh method share(), setelah parent::share($request). Berikut contoh struktur lengkapnya:

<?php
​
namespace App\Http\Middleware;
​
use Illuminate\Foundation\Inspiring;
use Illuminate\Http\Request;
use Inertia\Middleware;
use Tighten\Ziggy\Ziggy;
​
class HandleInertiaRequests extends Middleware
{
    protected $rootView = 'app';
​
    public function version(Request $request): ?string
    {
        return parent::version($request);
    }
​
    public function share(Request $request): array
    {
        [$message, $author] = str(Inspiring::quotes()->random())->explode('-');
​
        return [
            ...parent::share($request),
            'name' => config('app.name'),
            'quote' => ['message' => trim($message), 'author' => trim($author)],
            'auth' => [
                'user' => $request->user(),
            ],
            'flash' => [
                'message' => fn() => $request->session()->get('message'),
            ],
            'ziggy' => fn(): array => [
                ...(new Ziggy)->toArray(),
                'location' => $request->url(),
            ],
            'sidebarOpen' => ! $request->hasCookie('sidebar_state') || $request->cookie('sidebar_state') === 'true',
        ];
    }
}

Apa Sih Maksud dari Kode Ini?

Jadi begini, di Laravel kita sering menggunakan session flash message untuk menampilkan notifikasi setelah pengguna melakukan suatu aksi — misalnya menyimpan data, memperbarui, atau menghapus sesuatu.

Biasanya, kita menuliskannya seperti ini:

return redirect()->back()->with('message', 'Data berhasil disimpan!');

Kode ini akan menyimpan pesan ke dalam session — tapi hanya untuk satu request berikutnya saja. Makanya disebut flash, karena hanya muncul sesaat dan tidak menetap.

Dengan menambahkan konfigurasi flash di HandleInertiaRequests.php, kita memastikan bahwa pesan ini akan otomatis dikirim ke frontend melalui Inertia setiap kali tersedia. Kita tidak perlu menambahkan logic tambahan di controller atau membuat endpoint baru — Laravel dan Inertia sudah mengurusnya untuk kita.

Mengakses Flash Message di React

Di sisi frontend (React), kita cukup memanggil usePage() untuk mengambil data dari Laravel. Contohnya seperti ini:

const { products, flash } = usePage().props as PageProps;

• usePage() adalah hook dari Inertia React yang memberikan kita akses ke semua data (props) yang dikirim dari backend.

• Di sini, kita ambil data utama seperti products, dan juga flash yang kita atur di middleware tadi.

Kalau kita ingin menampilkan pesan flash ke pengguna, bisa langsung kita akses seperti ini:

{flash.message && (
  <div className="alert alert-success">
    {flash.message}
  </div>
)}

Jadi cukup sederhana dan efisien. Backend kirim pesan, frontend tinggal tangkap dan tampilkan. Tidak perlu setup tambahan, dan ini sangat membantu untuk menjaga kode tetap rapi dan konsisten.

Kesimpulan

Sampai di sini kita sudah berhasil menghubungkan Laravel dan React menggunakan flash message melalui Inertia. Di materi berikutnya, kita akan mulai mengatur controller dan menghubungkannya dengan tampilan frontend agar aplikasi kita mulai terasa “hidup”.

Sampai jumpa di materi selanjutnya, teman-teman.