Laravel Breeze API Install & Setup Authentication with Next.js

By Guest | Mar 12, 2022 | Laravel
Share : Whatsapp

https://www.fundaofwebit.com/post/laravel-breeze-api-install-setup-authentication-with-next-js

Laravel Breeze API auth scaffolding tutorial with NextJS


In this post, you will be learning about how to install Laravel Breeze API and Setup Authentication with Next.js.

So basically, we are going to install laravel application with breeze api package as a BACKEND and install NextJS as FRONTEND. (Laravel Breeze - Next.js Edition) . Lets get started.


Laravel NextJS Backend with Breeze API


Step 1: Create a laravel project.

composer create-project Laravel/laravel laravel-project-name


Step 2: Setup your database in .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=


Step 3: Install Breeze Package with following command.

composer require laravel/breeze --dev


Step 4: Install Breeze API with following command.

php artisan breeze:install api

After successful installation of breeze api, you can see .env file has two URL for backend and frontend. You can change url in production, for local leave it.

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000


Step 5: let's migrate the table

php artisan migrate

Now lets serve the application by the following command and just leave it.

php artisan serve


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

Step 1: Clone breeze-next repository.

git clone https://github.com/laravel/breeze-next.git

Step 2: install its dependencies

yarn install
// or
npm install

Step 3: Create a new file named .env.local and Copy .env.example file code and paste:

NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

Step 4: Finally, run the application via npm run dev

npm run dev

Step 5: The application will be available at

http://localhost:3000


That's it. all done.

Thank you.