Integrasi Laravel dan Next.js: Panduan Lengkap Membangun Arsitektur Web Modern

Dalam pengembangan aplikasi web modern, pendekatan decoupled architecture (frontend dan backend terpisah) semakin populer. Laravel dikenal sebagai framework backend PHP yang sangat kuat, sedangkan Next.js unggul di sisi frontend modern berbasis React dengan SSR dan optimasi SEO bawaan.

Artikel ini membahas cara integrasi Laravel sebagai backend RESTful API dengan Next.js sebagai frontend, termasuk pengaturan autentikasi, pengelolaan data, dan praktik terbaik.

---

Mengapa Integrasi Laravel + Next.js?

🔸 Laravel sebagai Backend

• API-ready (via Laravel Sanctum atau Passport)
• Middleware & routing fleksibel
• Eloquent ORM untuk database
• Mudah dideploy dan diskalakan

🔸 Next.js sebagai Frontend

• SSR & SSG → SEO optimal
• Routing otomatis
• Dukungan TypeScript dan SWR
• Cocok untuk SPA dan aplikasi dinamis

Dengan integrasi ini, Anda mendapatkan sistem yang scalable, performa tinggi, dan modular.

---

Langkah 1: Siapkan Backend Laravel (REST API)

✅ Install Laravel

composer create-project laravel/laravel laravel-api
cd laravel-api

✅ Setup CORS

Edit config/cors.php:

'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_origins' => ['http://localhost:3000'],

✅ Buat API Route

Di routes/api.php:

use App\Http\Controllers\API\PostController;
Route::get('/posts', [PostController::class, 'index']);

✅ Contoh Controller

namespace App\Http\Controllers\API;
use App\Models\Post;
use App\Http\Controllers\Controller;

class PostController extends Controller {
    public function index() {
        return response()->json(Post::all());
    }
}

---

Langkah 2: Jalankan Laravel di Localhost

Jalankan server:

php artisan serve --host=127.0.0.1 --port=8000

API akan tersedia di:

http://127.0.0.1:8000/api/posts

---

Langkah 3: Siapkan Frontend Next.js

npx create-next-app nextjs-frontend
cd nextjs-frontend
npm install swr

✅ Fetch API dari Laravel

Buat halaman pages/index.js:

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function Home() {
  const { data, error } = useSWR('http://127.0.0.1:8000/api/posts', fetcher);

  if (error) return <div>Gagal memuat data</div>;
  if (!data) return <div>Memuat...</div>;

  return (
    <div>
      <h1>Daftar Post dari Laravel API</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

---

Langkah 4: Setup Autentikasi Laravel + Next.js (Optional)

Jika perlu login/register, gunakan Laravel Sanctum.

✅ Install Sanctum

composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

✅ Middleware

Tambahkan ke api middleware group (app/Http/Kernel.php):

\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,

✅ Setup Cookie & Session

Pastikan Anda mengizinkan cookie dari domain frontend (misalnya di .env dan cors.php).

✅ Gunakan /sanctum/csrf-cookie sebelum login dari frontend.

---

Langkah 5: Deployment Terpisah

• Laravel: deploy ke server API seperti VPS, Laravel Forge, atau Laravel Vapor.
• Next.js: deploy ke Vercel, Netlify, atau server Node.js Anda.

Pastikan URL API Laravel dapat diakses dari frontend Next.js. Gunakan .env.local di Next.js:

NEXT_PUBLIC_API_URL=http://api.elektranetworkvision.com/api

---

Tips SEO dan Performa

✅ Gunakan getServerSideProps() atau getStaticProps() di Next.js
✅ Gunakan meta tag dinamis via next/head
✅ Gunakan SWR atau React Query untuk caching data
✅ Gunakan .env untuk pengaturan environment-based API URL
✅ Hindari hardcoded URL pada kode

---

Use Case Populer

• Dashboard Admin Modern
• Website Corporate dengan CMS Laravel di Backend
• E-Commerce frontend Next.js, backend Laravel
• Sistem ERP atau internal apps

---

Kesimpulan

Dengan arsitektur Laravel sebagai REST API dan Next.js sebagai frontend, Anda dapat membangun aplikasi web modern yang terstruktur, SEO-ready, dan mudah dikembangkan. Model ini cocok untuk tim besar maupun proyek freelance profesional.

---

Butuh Bantuan Integrasi Laravel + Next.js?

💡 Elektra Network Vision siap bantu Anda membangun aplikasi berbasis Laravel API dan Next.js dengan performa tinggi, desain modern, dan SEO maksimal.

🌐 Kunjungi elektranetworkvision.com dan konsultasikan proyek Anda hari ini!