https://github.com/jglchen/chirper-next-token
Laravel Chirper application/authentication kit with frontend in Next.js using tokens to access Chirper APIs.
https://github.com/jglchen/chirper-next-token
chirp docker nextjs nodejs reactjs typescript
Last synced: 2 months ago
JSON representation
Laravel Chirper application/authentication kit with frontend in Next.js using tokens to access Chirper APIs.
- Host: GitHub
- URL: https://github.com/jglchen/chirper-next-token
- Owner: jglchen
- Created: 2023-09-22T10:51:44.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-30T10:51:25.000Z (over 2 years ago)
- Last Synced: 2025-03-13T20:44:31.001Z (over 1 year ago)
- Topics: chirp, docker, nextjs, nodejs, reactjs, typescript
- Language: TypeScript
- Homepage:
- Size: 128 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Laravel Chirper - Next.js Edition 🏝️
## Introduction
This repository is an implementation of the [Laravel Breeze](https://laravel.com/docs/starter-kits) application / authentication 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.
## Official Documentation
### Installation
First, create a Next.js compatible Laravel backend by installing Laravel Breeze into a [fresh Laravel application](https://laravel.com/docs/installation) and installing Breeze's API scaffolding:
```bash
# Create the Laravel application...
laravel new next-backend
cd next-backend
# Install Breeze and dependencies...
composer require laravel/breeze --dev
php artisan breeze:install api
# Run database migrations...
php artisan migrate
```
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:
```bash
# 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.
### 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:
```js
const ExamplePage = () => {
const { logout, user } = useAuth({ middleware: 'auth' })
return (
<>
{user?.name}
Sign out
>
)
}
export default ExamplePage
```
> 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.
### Named Routes
For convenience, [Ziggy](https://github.com/tighten/ziggy#spas-or-separate-repos) may be used to reference your Laravel application's named route URLs from your React application.
## Contributing
Thank you for considering contributing to Breeze Next! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
## Code of Conduct
In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct).
## Security Vulnerabilities
Please review [our security policy](https://github.com/laravel/breeze-next/security/policy) on how to report security vulnerabilities.
## License
Laravel Breeze Next is open-sourced software licensed under the [MIT license](LICENSE.md).
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.