Skip to main content

​
Overview

Laravel Breeze API + Next.js is a modern full-stack application that separates concerns between a robust Laravel backend API and a dynamic Next.js frontend. This architecture provides a clear separation between the presentation layer and business logic, enabling independent scaling and deployment strategies.

​
Architecture Components

​
Backend: Laravel API

The backend is built with Laravel 12 and serves as a RESTful API. It handles:
  • Authentication & Authorization via Laravel Sanctum
  • Business Logic through controllers and services
  • Data Persistence using Eloquent ORM
  • Request Validation via Form Requests
  • Background Jobs through Laravel Queue

​
Frontend: Next.js Application

The frontend is built with Next.js 16, React 18, and TypeScript. It provides:
  • Server-Side Rendering (SSR) for optimal performance
  • Client-Side Routing via Next.js App Router
  • State Management using SWR for data fetching
  • Type Safety through TypeScript
  • Modern UI with Tailwind CSS

​
Communication Flow

​
Request/Response Cycle

The frontend and backend communicate via HTTP requests using Axios:
1

Frontend Initiates Request

The Next.js application sends an HTTP request using the configured Axios instance.
Frontend/src/lib/axios.ts
import Axios, { AxiosInstance } from 'axios'

const axios: AxiosInstance = Axios.create({
  baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
  },
  withCredentials: true,
  withXSRFToken: true,
})

export default axios
2

CORS Middleware Validation

Laravel’s CORS middleware validates the request origin and allows cross-origin requests from the frontend.
3

Route Resolution

Laravel routes the request to the appropriate controller based on the endpoint.
Backend/routes/api.php
Route::middleware(['auth:sanctum'])->get('/user', function (Request $request) {
    return $request->user();
});
4

Controller Processing

The controller processes the request, interacts with models, and prepares the response.
5

JSON Response

Laravel returns a JSON response to the frontend.
6

Frontend State Update

The frontend receives the response and updates the UI state accordingly.

​
CORS Configuration

Cross-Origin Resource Sharing (CORS) is configured to allow the Next.js frontend to communicate with the Laravel backend:
Backend/config/cors.php
return [
    'paths' => ['*'],
    
    'allowed_methods' => ['*'],
    
    'allowed_origins' => [env('FRONTEND_URL', 'http://localhost:3000')],
    
    'allowed_origins_patterns' => [],
    
    'allowed_headers' => ['*'],
    
    'exposed_headers' => [],
    
    'max_age' => 0,
    
    'supports_credentials' => true,
];
The supports_credentials: true setting is crucial for cookie-based authentication with Laravel Sanctum.

​
Environment Configuration

​
Backend Environment Variables

Key environment variables for the Laravel backend: 
APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000

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

​
Frontend Environment Variables

Key environment variables for the Next.js frontend: 
NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

​
Data Flow Diagram

​
API Structure

The API follows RESTful conventions:

Authentication Routes

/register, /login, /logoutHandles user authentication flows

Protected API Routes

/api/*Requires authentication via Sanctum

Public Routes

/sanctum/csrf-cookieCSRF token endpoint for SPA authentication

Email Verification

/verify-email/*, /email/verification-notificationEmail verification flows

​
Security Considerations

Laravel’s CSRF protection is enabled for all state-changing requests. The frontend must request a CSRF token before submitting forms.
API endpoints are protected with rate limiting to prevent abuse.
Always use HTTPS in production to protect credentials and sensitive data in transit.

​
Deployment Considerations

​
Monorepo Structure

The project uses a monorepo structure with separate Backend/ and Frontend/ directories:
  • Backend: Deploy to any PHP hosting (Laravel Forge, AWS, DigitalOcean)
  • Frontend: Deploy to Vercel, Netlify, or any Node.js hosting

​
Environment Separation

Ensure environment variables are properly configured for each environment: 
# Backend
APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000

# Frontend
NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
The frontend and backend can be deployed to different domains, but ensure CORS is properly configured.

​
Next Steps

Authentication Flow

Learn how Laravel Sanctum handles authentication

Project Structure

Explore the directory structure and organization

Build docs developers (and LLMs) love

Get started for freeTalk to us