​

Introduction

​

What is Laravel Breeze API + Next.js?

• Backend: Modern RESTful API built with Laravel 12, featuring Sanctum authentication and a scalable structure
• Frontend: Modern React application with TypeScript, Tailwind CSS, and accessibility-focused components

​

Who is this for?

• Build modern SPAs with a robust backend and elegant frontend
• Leverage Laravel’s powerful ecosystem with React’s flexibility
• Start with production-ready authentication out of the box
• Develop with type safety using TypeScript
• Scale applications with a proven architecture

​

Key Features

​

Backend (Laravel 12)

• Laravel 12 - Modern, mature PHP framework
• Laravel Sanctum - Secure API authentication with tokens
• CORS Configured - Secure communication between frontend and backend
• Breeze Starter Kit - Pre-configured authentication structure
• Pest Testing - Modern PHP testing framework
• Database Ready - Migrations and seeders included
• Queue Support - Asynchronous task processing
• PHP 8.2+ - Latest language features

​

Frontend (Next.js 16)

• Next.js 16 - React framework with SSR and optimizations
• TypeScript - Static typing for better development experience
• Tailwind CSS - Modern utility-first CSS framework
• React 19 - Latest React features
• Formik + Yup - Form handling and validation
• Axios - HTTP client for API consumption
• SWR - Data fetching with caching and revalidation
• ESLint - Static code analysis
• Headless UI - Accessible, unstyled components

​

Project Structure

LaravelBreezeApi_Nextjs/
├── Backend/                    # Laravel 12 API
│   ├── app/
│   │   ├── Http/
│   │   │   ├── Controllers/    # API controllers
│   │   │   ├── Middleware/     # Custom middlewares
│   │   │   └── Requests/       # Form requests (validation)
│   │   └── Models/             # Eloquent models
│   ├── config/                 # Configuration files
│   ├── database/
│   │   ├── migrations/         # Database migrations
│   │   ├── seeders/            # Data seeders
│   │   └── factories/          # Model factories
│   ├── routes/
│   │   ├── api.php             # API routes
│   │   └── auth.php            # Authentication routes
│   └── tests/                  # Pest tests
│
├── Frontend/                   # Next.js 16 App
│   ├── src/
│   │   ├── app/                # Next.js App Router
│   │   ├── components/         # React components
│   │   ├── hooks/              # Custom React hooks
│   │   ├── lib/                # Utilities and helpers
│   │   └── types/              # TypeScript types
│   └── public/                 # Static assets

​

Authentication

1. Users register/login through the frontend
2. Backend validates credentials and generates a token
3. Token is stored in the frontend (localStorage/cookies)
4. All requests include the token in the Authorization: Bearer <token> header

​

Main Authentication Endpoints

POST   /api/auth/register          # Register new user
POST   /api/auth/login              # Login
POST   /api/auth/logout             # Logout
GET    /api/user                    # Get current user data
POST   /api/auth/forgot-password    # Request password reset

​

Next Steps