In this section we will install Laravel Breeze application authentication starter kit frontend in Next.js. laravel breeze api come with Laravel Sanctum, sanctum is good for api auth. Nextjs is React frontend development web framework that enables functionality such as server-side rendering and static site generation. Next.js allow the first page load to be rendered by the server, which is great for SEO and performance. Recently taylorotwell launch laravel breeze api with nextjs let see.
Laravel NextJS Backend with Breeze API
create laravel project
composer create-project Laravel/laravel laravel-breeze-api
Setup your .env file
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password
Install breeze
composer require laravel/breeze --dev
Install breeze api
php artisan breeze:install api
After install breeze api, you can see .env file two url for backend and frontend. You can change url in production, for local leave it.
.env
APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000
run project and leave it.
php artisan serve
Note: Open two terminal one for run laravel application & second to create nextjs project and run.
Next js Frontend Setup For Breeze
Laravel Breeze 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.
You need to clone or download breeze-next
Clone breeze-next repository
run below command to clone repo. you can check repository link.
git clone https://github.com/laravel/breeze-next.git
Install dependencies.
# for node js
npm install
or
# for yarn
yarn install
Copy env file
cp .env.example .env
.env
you can change url in production.
NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
run next js project
npm run dev
next js run command
Nextjs register page
http://localhost:3000/register
nextjs sign up page
Nextjs login page
nextjs login
