This repository is a customized implementation of the Laravel Breeze application / authentication starter kit frontend in Next.js. Based on the original code from laravel/breeze-next, this version is tailored by AJ Partners Ltd and serves as the frontend to the Laravel API for a job search application.
The application allows users to search for jobs through the JSearch API. Users can create accounts, log in, and access various job search functionalities. You can find the demo of the working project here.
Note: To interact with the JSearch API, users will need to sign up on RapidAPI and obtain API access keys.
The steps for installation remain unchanged from the original Laravel Breeze Next.js Edition. Here's how you can set it up:
- Create the Laravel backend by following the instructions here.
- Clone this repository and proceed with the frontend setup:
# Clone the repository...
git clone https://github.com/animasoul/laravel-next.git
cd laravel-next
# Install dependencies...
yarn install # or npm install
# Copy the example env file and configure...
cp .env.example .env.local
# Set the backend URL
NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
# Run the application...
npm run dev
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:
# Serve the application...
php artisan serve
Next, 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
Finally, 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.
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.
Thank you for considering contributing to Breeze Next! The contribution guide can be found in the Laravel documentation.
In order to ensure that the Laravel community is welcoming to all, please review and abide by the Code of Conduct.
Please review our security policy on how to report security vulnerabilities.
Laravel Breeze Next is open-sourced software licensed under the MIT license.