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 in the backend you should update the email configuration in .env file , for example i use Mailtrap because it has a free sandbox
MAIL_MAILER=smtp
MAIL_HOST=sandbox.smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=xxxxxxxxxxxxxx
MAIL_PASSWORD=xxxxxxxxxxxxxx
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 ofuser.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.
Laravel Breeze Next is open-sourced software licensed under the MIT license.