totole/breeze-next-template
1
0
Fork 0
mirror of https://github.com/kevin-DL/breeze-next-template.git synced 2026-01-11 18:34:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Taylor Otwell
2021-12-01 15:32:57 -06:00
committed by GitHub
parent 507d891821
commit 6f6c6dfd89
1 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
README.md
View File

@@ -1,34 +1,37 @@
# Laravel Breeze Next.js Starter (Frontend) ## Laravel Breeze - Next.js Edition 🏝️
Corresponding backend: https://github.com/taylorotwell/next-example-backend
## Introduction ## Introduction
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: This repository is an implementing of the [Laravel Breeze](https://laravel.com/docs/starter-kits) 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.
#### Installation
To get started, 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 NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
``` ```
The application can be run via `npm run dev` and will be available at `http://localhost:3000`: Next, run the application via `npm run dev`. The application will be available at `http://localhost:3000`:
``` ```
npm run dev npm run dev
``` ```
> Note: Currently, for this example, we recommend using `localhost` during local development to avoid "Same-Origin" issues. > Note: Currently, we recommend using `localhost` during local development of your backend and frontend to avoid CORS "Same-Origin" issues.
## Usage ## Authentication Hook
This example Next.js application contains a custom `useAuth` hook, designed to abstract all authentication logic away from your pages. It can be used as follows: 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 ```js
const ExamplePage = () => { const ExamplePage = () => {
const { logout, user } = useAuth({ middleware: 'auth' /* or 'guest */ }) const { logout, user } = useAuth({ middleware: 'auth' })
return ( return (
<> <>
<p>{user?.name}</p> <p>{user?.name}</p>
<button onClick={logout}>Sign out</button> <button onClick={logout}>Sign out</button>
</> </>
) )
@@ -37,4 +40,4 @@ const ExamplePage = () => {
export default ExamplePage export default ExamplePage
``` ```
> Note: You'll 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. > 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.