Fullstack Next.js & Laravel Development

Introduction

Building high-performing web applications requires a split architecture: a lightweight, server-side rendering frontend linked to a secure, transaction-safe backend API. In this tutorial, we will map out how Next.js (using the App Router) communicates with Laravel (utilizing Sanctum cookie-based session auth) to serve secure user dashboards.

1. The Laravel Backend Setup

Laravel provides out-of-the-box API tools via Sanctum. To enable session cookie auth across different subdomains, configure your CORS config file and stateful domain parameters:

SANCTUM_STATEFUL_DOMAINS=localhost:3000,127.0.0.1:3000
SESSION_DOMAIN=.localhost

This config ensures that when Next.js requests the sanctum cookie, Laravel saves the session ID cookie inside the client browser. Subsequent API requests automatically pass this cookie back to Laravel to prove authentication.

2. Next.js App Router Client

Using Axios, setup a state client that intercepts request cookies:

import axios from 'axios';
export const api = axios.create({
  baseURL: 'http://localhost:8000/api/v1',
  withCredentials: true,
});

The withCredentials: true attribute is vital. Without it, browsers will strip session cookies from cross-origin requests, resulting in unauthorized 401 response triggers.

Conclusion

By splitting Next.js and Laravel, you achieve the best of both worlds: blistering public-page speed for SEO optimization and a modular, easily testable API server to house your database and core business logic.