Laravel Breeze - Next.js 版本 ▲

介绍

这个仓库是使用 Next.js 实现的 Laravel Breeze 应用程序/身份验证启动套件前端。所有的身份验证样板代码已经为你编写好了 - 由 Laravel Sanctum 提供支持，让你可以快速开始将漂亮的 Next.js 前端与强大的 Laravel 后端配对。

官方文档

安装

首先，通过在全新的 Laravel 应用程序中安装 Laravel Breeze 并安装 Breeze 的 API 脚手架，创建一个兼容 Next.js 的 Laravel 后端：

# 创建 Laravel 应用程序...
laravel new next-backend

cd next-backend

# 安装 Breeze 和依赖项...
composer require laravel/breeze --dev

php artisan breeze:install api

# 运行数据库迁移...
php artisan migrate

接下来，确保你的应用程序的 APP_URL 和 FRONTEND_URL 环境变量分别设置为 http://localhost:8000 和 http://localhost:3000。

定义适当的环境变量后，你可以使用 serve Artisan 命令启动 Laravel 应用程序：

# 启动应用程序...
php artisan serve

然后，克隆这个仓库并使用 yarn install 或 npm install 安装其依赖项。之后，将 .env.example 文件复制为 .env.local，并提供你的后端 URL：

NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

最后，通过 npm run dev 运行应用程序。应用程序将在 http://localhost:3000 上可用：

npm run dev

注意：目前，我们建议在本地开发后端和前端时使用 localhost，以避免 CORS "同源" 问题。

身份验证钩子

这个 Next.js 应用程序包含一个自定义的 useAuth React 钩子，旨在将所有身份验证逻辑从你的页面中抽象出来。此外，该钩子可用于访问当前已认证的用户：

const ExamplePage = () => {
    const { logout, user } = useAuth({ middleware: 'auth' })

    return (
        <>
            <p>{user?.name}</p>

            <button onClick={logout}>退出登录</button>
        </>
    )
}

export default ExamplePage