Membuat Aplikasi Fullstack Dengan Laravel dan Next.js

Setup Aplikasi Fullstack dengan Backend dan Frontend Agar Lebih Maintainable dan Scalable

Laravel + Next.js

Halo gaess, apa kabar? mudah-mudahan dalam keadaan baik ya.. aamiin ☺️

Dalam postingan kali ini saya akan sharing bagaimana cara membuat aplikasi Fullstack (backend + frontend) dengan techstack Laravel untuk backend dan Next.js untuk frontendnya.

Jika kamu perhatikan perkembangan web development, saat ini dua tech tersebut termasuk framework yang sangat populer. Tidak heran, karena dua framework tersebut memang memiliki banyak kelebihan yang disukai para web developer dan juga didukung oleh creator yang sangat mumpuni.

Laravel dibuat dan dikembangkan oleh Taylor Otwell, yang sampai saat ini dengan sangat konsisten terus mengembangkan framework Laravel.

Laravel berbasis bahasa php. Salah satu bahasa yang paling “senior” dan banyak digunakan dalam teknologi web.

Next.js dikembangkan oleh Vercel, sebuah perusahaan cloud platform yang cukup besar juga.

Next.js berbasis framework React yang dikembangkan oleh Facebook dan tentu saja berbasis bahasa javascript yang mana javascript saat ini sedang mendominasi dunia web development.

Sepertinya cukup untuk introductionnya ya☺️

Kita langsung saja ke pembuatan aplikasi nya…

Catatan: Diasumsikan pada system kamu sudah terinsall php, composer, dan nodejs. Jika belum, silakan install terlebih dahulu.

Sebelumnya, kita akan buat folder untuk menyimpan project kita. Jalankan perintah:

mkdir laranext

Karena nanti ada dua aplikasi (backend & frontend). Jadi kita akan buat dua folder lagi di dalamnya. Jalankan perintah:

cd laranext
mkdir laranext-be
mkdir laranext-fe

Backend

Baik, kita langsung saja menginstall framework Laravel dengan cara mengetikan command pada terminal:

cd laranext-be
composer create-project laravel/laravel ./

Lalu seperti biasa setup file environment untuk menyimpan konfigurasi (jika sudah ada file .env, skip langkah ini):

cp .env.example .env
php artisan key:generate

Edit file .env dan sesuaikan koneksi database yang kamu gunakan, contoh:

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=laranext
DB_USERNAME=root
DB_PASSWORD=

Install package breeze. Package ini berfungsi untuk me-manage auth (otentikasi) seperti user login, register, forgot password, dll.

composer require laravel/breeze --dev

Karena kita akan menggunakan Next.js sebagai frontend, maka kita harus menginstall breeze sebagai api:

php artisan breeze:install api

php artisan migrate

Coba jalankan project Laravel nya:

php artisan serve

Lalu akan muncul output seperti berikut:

output dari php artisan serve

Frontend

Untuk frontend nya, Taylor sudah menyediakan starter-kit project Next.js agar bisa langsung digunakan dengan Laravel breeze. Di sini url repo nya: https://github.com/laravel/breeze-next

Catatan: Gunakan terminal baru, karena terminal sebelumnya sudah dipakai untuk menjalankan Laravel.

Untuk men-setup frontend Next.js nya, clone dulu repositorynya dengan perintah git clone

Jangan lupa untuk pindah ke folder laranext-fe jika masih berada di folder laranext-be

Perintah nya seperti ini:

cd ../laranext-fe/
git clone https://github.com/laravel/breeze-next.git ./

Setelah clone nya selesai, install npm dependency nya dengan perintah:

yarn install
# atau
npm install

Copy file .env.example ke .env.local

Lalu tambahkan atau edit file .env.local dengan:

NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

Pastikan variabel NEXT_PUBLIC_BACKEND_URL mengarah kehttp://localhost:8000 atau port dari Laravel yang tadi dijalankan tadi.

Terakhir, jalankan aplikasi Next.js nya:

npm run dev

Lalu akan muncul output seperti ini:

output npm run dev

Lalu buka browser dan buka http://localhost:3000. Hasilnya:

Home page

Login page

Register page

Forgot password page

Halaman-halaman tersebut adalah komponen/page yang ada pada aplikasi frontend Next.js, bukan file blade yang ada di Laravel.

Pada sisi Laravel nya — ketika tadi diinstall package breeze api — otomatis menyediakan api route untuk semua fungsionalitas otentikasi dari halaman-halaman tersebut.

Kita tinggal melanjutkan saja untuk membuat komponen UI atau page nya pada Next.js dan code api nya pada Laravel.

Cukup mudah bukan? 😎

Penutup

Laravel telah menyediakan kemudahan untuk membuat aplikasi fullstack dengan frontend Next.js

Techstack seperti ini sangat cocok bagi yang sudah terbiasa dengan framework Laravel dan ingin mulai memisahkan frontend dari backend nya agar ke depannya bisa lebih maintainable dan scalable.

Di backend bisa tetap menggunakan Laravel dengan semua kelengkapan fiturnya. Dan di frontend bisa lebih leluasa menggunakan fitur-fitur javascript untuk memaksimalkan UI/UX nya agar aplikasi yang kita bangun bisa membuat end-user betah berlama-lama menggunakan aplikasi kita.

InsyaAllah ke depannya akan dibuat postingan lainnya menggunakan techstack Laravel + Next.js ini.

Jangan lupa untuk clap dan follow agar tidak ketinggalan info jika ada postingan baru☺️

Akhir kata, semoga sharingan kecil ini bisa bermanfaat bagi pembaca semua, wabilkhusus bagi penulis sendiri.

Keep coding dan sampai jumpa di postingan lainnya…

Wassalam…