Laravel Breeze - Next.js Edition 🏝️

Introduction

This repository is an implementing of the Laravel Breeze 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.

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, 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:

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 (user?.name instead of user.name) when accessing properties on the user object to account for Next.js's initial server-side render.