Bridging Next.js 15 and Laravel: A Guide to Modern API Integration

Prerequisites

To follow along, you should have a solid grasp of JavaScript (ES6+) and PHP. You will need Node.js and Composer installed locally to manage dependencies for both frameworks. Familiarity with React hooks and RESTful API concepts is essential.

Key Libraries & Tools

• Laravel Sanctum: Provides a featherweight authentication system for SPAs and mobile applications.
• Next.js 15: The React framework for production, utilizing Server Components for optimized data fetching.
• HTTPie: A user-friendly command-line HTTP client for testing API endpoints.

Code Walkthrough

1. Setting up the Laravel API

Initialize a new Laravel project and install the API scaffolding to prepare the backend for external requests.

laravel new api
php artisan install:api

This command configures Laravel Sanctum and creates the api.php routes file. Define a simple test route in routes/api.php:

Route::get('/hi', function () {
    return response()->json([
        'message' => 'Hello from Laravel',
        'description' => 'Your API is live!'
    ]);
});

2. Fetching Data in Next.js

In Next.js 15, fetch data directly within a Server Component. This keeps sensitive logic off the client and improves performance.

export default async function Page() {
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/hi`);
  const data = await res.json();

  return (
    <div>
      <h1>{data.message}</h1>
      <p>{data.description}</p>
    </div>
  );
}

3. Implementing Sanctum Token Auth

For authorized requests, use Sanctum to issue tokens. On the Next.js side, once you receive a token from a login endpoint, store it as a secure cookie. Include this token in the Authorization header for subsequent requests:

const response = await fetch('/api/bookmarks', {
  headers: {
    'Authorization': `Bearer ${token}`,
    'Accept': 'application/json',
  },
});

Syntax Notes

Laravel uses Arrow Functions in routes for brevity and Resource Classes to transform JSON responses. Next.js 15 emphasizes Async/Await within components, moving away from useEffect for initial data loads. Always use process.env for API URLs to ensure environment consistency.

Practical Examples

You can use this setup to offload heavy processing. For instance, a Next.js frontend can trigger a Laravel Queue via an API call to process video uploads or generate complex reports in the background without blocking the UI.

Tips & Gotchas

• CORS Issues: Ensure your config/cors.php in Laravel allows the origin where your Next.js app is hosted.
• Cache Management: Next.js 15 caches fetch requests by default. If your data changes frequently, use revalidate or no-store options.
• Domain Matching: If using Sanctum's cookie-based auth instead of tokens, the frontend and backend must share the same top-level domain.