Based on the Laravel Breeze scaffolding with NextJS
Clone the repository
git clone https://github.com/isaacdarcilla/laranext-monorepo
Install node packages
cd laranext-monorepo
npm install
Install composer packages
cd backend
composer install
Migrate database
php artisan migrate --seed
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:
cd backend
php artisan serve
or
cd laranext-monorepo
npm run start -w @mono/backend
Finally, run the application via npm run dev
. The application will be available at http://localhost:3000
cd frontend
npm run dev
or
cd laranext-monorepo
npm run dev -w @mono/backend
You may want to open separate terminals for
backend
andfrontend
folders. Or you can just use-w <package>
flag when starting the development server.
To add new packages to the workspace, for example husky
,
npm install <dependency> -w <package>
npm install husky -D -w @mono/frontend
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 ofuser.name
) when accessing properties on the user object to account for Next.js's initial server-side render.
For convenience, Ziggy may be used to reference your Laravel application's named route URLs from your React application.