Next.js + Laravel: The Stack That Actually Scales (And Why I'll Never Go Back)

// routes/api.php
Route::middleware('auth:sanctum')->group(function () {
    // Products
    Route::get('/products', [ProductController::class, 'index']);
    Route::get('/products/{slug}', [ProductController::class, 'show']);
    
    // Orders
    Route::post('/orders', [OrderController::class, 'store']);
    Route::get('/orders', [OrderController::class, 'index']);
    
    // User
    Route::get('/user', fn() => auth()->user());
});

// Public routes
Route::post('/auth/login', [AuthController::class, 'login']);
Route::post('/auth/register', [AuthController::class, 'register']);

// lib/api.ts
const API_URL = process.env.NEXT_PUBLIC_API_URL;

class ApiClient {
  private getHeaders() {
    const token = localStorage.getItem('auth_token');
    return {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      ...(token && { 'Authorization': `Bearer ${token}` }),
    };
  }

  async get<T>(endpoint: string): Promise<T> {
    const res = await fetch(`${API_URL}${endpoint}`, {
      headers: this.getHeaders(),
    });
    
    if (!res.ok) throw new Error(`API error: ${res.status}`);
    return res.json();
  }

  async post<T>(endpoint: string, data: any): Promise<T> {
    const res = await fetch(`${API_URL}${endpoint}`, {
      method: 'POST',
      headers: this.getHeaders(),
      body: JSON.stringify(data),
    });
    
    if (!res.ok) throw new Error(`API error: ${res.status}`);
    return res.json();
  }
}

export const api = new ApiClient();

// Usage in Server Components
export async function getProducts() {
  return api.get<Product[]>('/api/products');
}

// Usage in Client Components
export function useProducts() {
  const [products, setProducts] = useState<Product[]>([]);
  
  useEffect(() => {
    api.get<Product[]>('/api/products')
      .then(setProducts)
      .catch(console.error);
  }, []);
  
  return products;
}

// OrderController.php
public function store(Request $request)
{
    $order = DB::transaction(function () use ($request) {
        // Create order
        $order = Order::create([
            'user_id' => auth()->id(),
            'total' => $request->total,
            'status' => 'pending',
        ]);
        
        // Add items
        foreach ($request->items as $item) {
            $order->items()->create($item);
        }
        
        return $order;
    });
    
    // Queue all the heavy stuff
    ProcessOrderPayment::dispatch($order)->onQueue('payments');
    SendOrderConfirmation::dispatch($order)->onQueue('emails');
    SyncToInventorySystem::dispatch($order)->onQueue('integrations');
    GenerateInvoicePDF::dispatch($order)->onQueue('pdfs');
    
    // Instant response to Next.js
    return response()->json([
        'order_id' => $order->id,
        'status' => 'processing',
    ], 201);
}

// Events/OrderStatusUpdated.php
class OrderStatusUpdated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    
    public function __construct(
        public Order $order
    ) {}
    
    public function broadcastOn(): array
    {
        return [
            new PrivateChannel('user.' . $this->order->user_id),
        ];
    }
    
    public function broadcastWith(): array
    {
        return [
            'order_id' => $this->order->id,
            'status' => $this->order->status,
            'message' => "Your order is {$this->order->status}",
        ];
    }
}

// After payment processes
broadcast(new OrderStatusUpdated($order));

// components/OrderTracker.tsx
'use client';

import { useEffect, useState } from 'react';
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

export function OrderTracker({ orderId, userId }: Props) {
  const [status, setStatus] = useState('processing');
  
  useEffect(() => {
    const echo = new Echo({
      broadcaster: 'pusher',
      key: process.env.NEXT_PUBLIC_PUSHER_KEY,
      cluster: 'ap2',
      forceTLS: true,
      authEndpoint: `${process.env.NEXT_PUBLIC_API_URL}/broadcasting/auth`,
    });
    
    echo.private(`user.${userId}`)
      .listen('OrderStatusUpdated', (data) => {
        if (data.order_id === orderId) {
          setStatus(data.status);
        }
      });
    
    return () => echo.disconnect();
  }, [orderId, userId]);
  
  return (
    <div className="status-tracker">
      <h3>Order Status: {status}</h3>
      {/* Fancy UI here */}
    </div>
  );
}

# Next.js (.env.local)
NEXT_PUBLIC_API_URL=https://api.yourapp.com
NEXT_PUBLIC_PUSHER_KEY=your-pusher-key
NEXT_PUBLIC_PUSHER_CLUSTER=ap2

# Laravel (.env)
APP_URL=https://api.yourapp.com
FRONTEND_URL=https://yourapp.com
SANCTUM_STATEFUL_DOMAINS=yourapp.com
SESSION_DOMAIN=.yourapp.com

// config/cors.php
return [
    'paths' => ['api/*', 'broadcasting/auth'],
    'allowed_methods' => ['*'],
    'allowed_origins' => [
        env('FRONTEND_URL'),
        'http://localhost:3000', // Local dev
    ],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];