diff --git a/README.md b/README.md index d98ab72..b00a926 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,37 @@ -# Laravel Breeze Next.js Starter (Frontend) - -Corresponding backend: https://github.com/taylorotwell/next-example-backend +## Laravel Breeze - Next.js Edition 🏝️ ## 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 ``` -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 ``` -> 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 const ExamplePage = () => { - const { logout, user } = useAuth({ middleware: 'auth' /* or 'guest */ }) + const { logout, user } = useAuth({ middleware: 'auth' }) return ( <>
{user?.name}
+ > ) @@ -37,4 +40,4 @@ const 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.