Rabu, 08 December 2021

    Integrasi Laravel Breeze dan Next.js API: Panduan Lengkap

    Salah satu yang terbaru dari Laravel v8.75.0, yang mana dia baru saja mengimplementasikan flag`--api` untuk generasi breeze scaffolding sebagai api saja.

    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.

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

    Karteil
    Destinasi Utama Belajar Online dengan Format Tulisan yang Elegan
    Kunjungi Sekarang

    Irsyad A. Panjaitan

    Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.

    Go to Irsyad A. Panjaitan profile
    Support me
    SaweriaGithub