mirror of
https://github.com/kevin-DL/breeze-next-template.git
synced 2026-01-11 18:34:27 +00:00
85 lines
3.1 KiB
Markdown
85 lines
3.1 KiB
Markdown
# Laravel Breeze - Next.js Edition 🏝️
|
|
|
|
## Introduction
|
|
|
|
This repository is an implementing of the [Laravel Breeze](https://laravel.com/docs/starter-kits) application / authentication starter kit frontend in [Next.js](https://nextjs.org). All of the authentication boilerplate is already written for you - powered by [Laravel Sanctum](https://laravel.com/docs/sanctum), allowing you to quickly begin pairing your beautiful Next.js frontend with a powerful Laravel backend.
|
|
|
|
## Official Documentation
|
|
|
|
### Installation
|
|
|
|
First, create a Next.js compatible Laravel backend by installing Laravel Breeze into a [fresh Laravel application](https://laravel.com/docs/installation) and installing Breeze's API scaffolding:
|
|
|
|
```bash
|
|
# Create the Laravel application...
|
|
laravel new next-backend
|
|
|
|
cd next-backend
|
|
|
|
# Install Breeze and dependencies...
|
|
composer require laravel/breeze
|
|
|
|
php artisan breeze:install api
|
|
```
|
|
|
|
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:
|
|
|
|
```bash
|
|
# 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.
|
|
|
|
### Authentication Hook
|
|
|
|
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:
|
|
|
|
```js
|
|
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/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.
|
|
|
|
## Contributing
|
|
|
|
Thank you for considering contributing to Breeze Next! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
|
|
|
|
## Code of Conduct
|
|
|
|
In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct).
|
|
|
|
## Security Vulnerabilities
|
|
|
|
Please review [our security policy](https://github.com/laravel/breeze-next/security/policy) on how to report security vulnerabilities.
|
|
|
|
## License
|
|
|
|
Laravel Breeze Next is open-sourced software licensed under the [MIT license](LICENSE.md).
|