This repository is an implementation of the Laravel Breeze application / authentication starter kit frontend in Next.js. All of the authentication boilerplate is already written for you - powered by Laravel Sanctum, allowing you to quickly begin pairing your beautiful Next.js frontend with a powerful Laravel backend.

First, create a Next.js compatible Laravel backend by installing Laravel Breeze into a fresh Laravel application and installing Breeze's API scaffolding:

# Create the Laravel application...
laravel new next-backend

cd next-backend

# Install Breeze and dependencies...
composer require laravel/breeze --dev

php artisan breeze:install api

# Run database migrations...
php artisan migrate

Next, ensure that your application's APP_URL and FRONTEND_URL environment variables are set to http://localhost:8000 and http://localhost:3000, respectively.

After defining the appropriate environment variables, you may serve the Laravel application using the serve Artisan command:

# Serve the application...
php artisan serve

Next, clone this repository and install its dependencies with yarn install or npm install. Then, copy the .env.example file to .env.local and supply the URL of your backend:

NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

Finally, run the application via npm run dev. The application will be available at http://localhost:3000:

npm run dev

Note: Currently, we recommend using localhost during local development of your backend and frontend to avoid CORS "Same-Origin" issues.

This Next.js application contains a custom useAuth React hook, designed to abstract all authentication logic away from your pages. In addition, the hook can be used to access the currently authenticated user:

const ExamplePage = () => {
    const { logout, user } = useAuth({ middleware: 'auth' })

    return (
        <>
            <p>{user?.name}</p>

            <button onClick={logout}>Sign out</button>
        </>
    )
}

export default ExamplePage

Note: You will need to use optional chaining (user?.name instead of user.name) when accessing properties on the user object to account for Next.js's initial server-side render.

For convenience, Ziggy may be used to reference your Laravel application's named route URLs from your React application.

Thank you for considering contributing to Breeze Next! The contribution guide can be found in the Laravel documentation.

In order to ensure that the Laravel community is welcoming to all, please review and abide by the Code of Conduct.

Please review our security policy on how to report security vulnerabilities.

Laravel Breeze Next is open-sourced software licensed under the MIT license.