Integrasi Laravel Breeze dan Next.js API: Panduan Lengkap

Pada artikel kali ini kita akan membahas salah satu yang terbaru dari Laravel v8.75.0, yang mana dia baru saja mengimplementasikan flag --api untuk generasi breeze scaffolding sebagai api saja.

Pertanyaan nya, dari Laravel sendiri apakah ada memberikan front-end scaffolding nya, jawabanya ada. Jadi untuk case kali ini, dia mencontohkan menggunakan Next.js, tetapi bukan berarti tidak bisa dipakai dengan yang lainnya, jadi jika memang kalian berencana ingin memakai Nuxt.js ataupun Remix, itu sah-sah saja.

Nah, jika kalian penasaran bagaimana cara memulainya, maka mari kita mulai bagaimana setup Breeze & Next.js / API.

# Create the Laravel application...
laravel new next-backend

cd next-backend

# Install Breeze and dependencies...
composer require laravel/breeze

php artisan breeze:install api

# Serve the application...
php artisan serve

Setelah itu, kalian bisa lakukan cloning dari repo yang diberikannya seperti berikut.

# Clone the repository of Breeze Next
git clone https://github.com/laravel/breeze-next.git

# Install All Deps
npm install

# With yarn -> yarn

# Copy file .env.example ke .env.local
cp .env.example .env.local

Jika kalian tidak bisa menggunakan perintah cp, kalian bisa buat manual file tersebut di dalam root directory breeze-next yang baru saja kita clone tersebut.

Dan jangan lupa, dalam file .env.local (buat jika belum ada), beri tau pada nextjs siapa sumber api nya, dalam case kita, karena kita menggunakan artisan serve command tadinya, artinya kita akan diberikan http://localhost:8000, oleh karena itu Anda bisa masukkan atau perkenalkan seperti berikut.

NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

Jika sudah, selanjutnya kita lanjut untuk start nextjs dengan cara jalankan npm run dev atau yarn dev. Yang manapun harusnya berhasil.

Berikut adalah sumber yang pasti dapat kalian lihat ya.

• Taylor Otwell Tweet
• Laravel Starter Kits
• Laravel Breeze
• Breeze Next

Semoga artikel ini bermanfaat, saya akan melihat Anda di artikel selanjutnya. Bye bye 👋🏻