Nuxt is AWESOME. I'm a big fan. Even before I started working in Laravel. There's also a community maintained Nuxt Breeze repo that has some neat features if you want to take a look. :) -Josh
Cool stuff about Laravel, it includes more than what it seems. People keep comparing Next.js and Laravel when in reality in only compares to "part" of Laravel and does not realize you can use them together. So instead of Next.js + some database package + some auth package, you can just use Next.js + Laravel.
YOU'VE GOT IT! It's nice to have flexibility and options when working with Laravel. And if you have an existing Next.js app and just need something like queues... well you can use Laravel for that too. ☺️ -Josh
The thing is, the Next.js Breeze example never utilizes authentication on the server side. Even the Next.js Layout and Page files in the example repo are implemented as client components.
When using Laravel as an API with NexJS (app directory), the same setup does not work well. With app directory, we do a lot of things on the server than client. So authentication will be handled on the server in a react server component/page or nextjs layout. Do you have any ideas on how to still connect to Laravel API but all actions are server to server communications including auth checks and getting data.
So the current iteration of the Breeze implementation of NextJS is using the App directory. While it may not be doing EVERYTHING on the server (and I didn't want to change too much with how things are set up out of the box), there's definitely ways to make this happen. It might be a great second video, but it would start with using Middleware to check for Authentication rather than a Layout page. Then, with the introduction of Server Components, we could use actions in the NextJS pages to fetch and post data. Do you think it would be handy to have a more in-depth guide for server-first NextJS?
@@LaravelPHP Hell yeah! I would like to hear also when would a setup like that make sense. As cool as it sounds, it feels weird to have a "server => server => client" implementation.
@@LaravelPHP yes that would be very handy. I soiled my hands a couple of times but couldn't get it to work especially csrf tokens couldn't match when making post requests so I even thought of disabling csrf tokens or using API tokens instead. So at least I would really appreciate it.
@@LaravelPHP You know I really love it since I use Laravel for my project and now I see I can use it wit Next makes my job really easy so I don't need to learn Node js now
Great content! But wouldn't it be much simpler if we just used the Laravel + React Breeze scaffold? After all, what Next.js is mainly used for is its ability to support server-side rendering and server components out of the box. But with Laravel as the backend, couldn't we just make it so that Laravel handles routes that require server-side rendering while using React for routes that require intensive client-side interaction? The only reason I use Next.js is its support for React and server-side rendering. But other than that, it still needs a backend like Express, Laravel, Go, Django, or Rails because it can't really do everything on its own. What do you think? 🤔
agree, in fact you get that shiny server-side rendering stuff only with plain React, look into a package called inertia-ssr. honestly the implementation on this video only adds boilerplate and makes your life harder lol.
I think the Laravel and React scaffold using Inertia is a great option and gives you all of the power of React with the flexibility of Laravel! Especially if you have the choice. There might be business reasons that one might choose to use Laravel as an API with NextJS. Perhaps, you're needing to take advantage of things like ISR or SSG that are implemented out of the box with Next. Or, it's already been implemented in a project but you're wanting to move to Laravel on the back-end piece by piece (maybe with queues or background jobs). Overall, it's great to have options and Laravel is fantastic to make those options NUMEROUS. ☺️ -Josh
I would say it's possible but maybe not necessary. NextAuth just replaces a lot of what Sanctum is set up for within the Laravel API implementation. -Josh
I noticed in your terminal you have herd pro. Could you make a video sometime explaining the features with herd pro and whether its worth it for xyz people / use cases.
Currently i have started using vuejs in my projects. I used to use vanilla JS before that lol, i had to write big codes. When i started learning these technologies.. i was like woah!!! 😂😂. That reduced my codebase significantly.
I would love to be able to develop the frontend without needing to install the BE locally and just pointing to a dev environment on the cloud. Is that possible? I don’t think so with sanctum cookies, right?
There is no official typescript version just yet. However, there are a few community driven repos that you might want to try out: github.com/bry221996/laravel-breeze-next-typescript
Using nextjs with 'use client' everywhere is the same as using react only... What would great is to see is laravel using nextjs with sort of BFF pattern so SSR/ISR/SSG can be used
I agree with you there! I didn't want to veer too far away from the conventions that have already been set up in the NextJS implementation, but I think that would be a great next step or a PR (I know others have already done similar stuff in the wild, and with the Nuxt community repo too). Using NextJS middleware for auth is a perfect way to have that server side rendering implementation. And then I would probably lean on Actions and Mutations for data fetching instead of Axios if I was implementing this from scratch. Hopefully that helps. :) -Josh
That’s a good point! I should have talked through what it was doing in the auth implementation to show it’s not necessary for every request we make (like kicking off a queue). Thanks for pointing that out. :) -Josh
@@LaravelPHP yes! I am very glad that finally more people talking about this. I was working with it since it was only with nextjs 12 (2022 i guess)and now I literally can’t start a project any other way! I would love to see more videos about this nextjs/laravel combo. And thank you guys for the efforts 🤝
this is work but one problem is prevent back history. after login click on browser back button page return to login same problem after logout page goes to dashboard. kindly give any solution.
im get confused this is using sanctum or not because i tried to create login custom and get user in saparate route with sanctum api alwasy authentication response
It would be! While it might not be a great PR for the repo, I know the Laravel team loves when we have community repos that other people can learn from. Fork the Breeze repo and let's get started. :) -Josh
Question - I see many useful packages in Laravel ecosystem using Livewire. But I want to use Laravel with React using Inertia. Does that mean I won't be able to use those packages?
If you're using the Inertia stack, like Joseph mentioned, you could use most packages designed for React unless they are Next.js specific (and use things that are framework specific). Plus, you can take advantage of Laravel specific packages that don't touch Blade. But you can also use React components in Livewire with packages like "MingleJS", as well. :) The world is your oyster! -Josh
Yep! Your NextJS can be hosted wherever you want. Your Laravel application would just be hosted on places that are PHP friendly (like Laravel Forge or Vapor). The only requirement is that the front-end (NextJS App) and back-end (Laravel API) use the same domain. -Josh
Correct! The API version of Laravel as a starter kit is a great way to start implementing this with your (or your companies) favorite front-end resource. I even use that starter kit to implement a back-end for a Chrome Extension I created. There's even some community driven examples using Nuxt, SvelteKit, and others. -Josh
Almost all of my VS Code settings are using Caleb Porzio's settings in his Make VS Code Awesome course. Highly recommend. Other than that, the theme is Catppuccin Latte and the font is Dank Mono. :) -Josh
Making NextJS act as a front-end pseudo-framework and connecting it to laravel feels pointless to me. At that point just go with laravel+inertia+react. NextJS without it's backend features is just bloated,convoluted react.
I would lean that way as well if you started from scratch. However, where it can be appealing is you now have one place (your Laravel backend) to manage your auth, queues, emails, cron, etc. While NextJS has services and options for those, having it in one place would be helpful. That way you only need to extract from an API endpoint with NextJS when necessary. Maybe you want to run most things in an API endpoint, auth be managed by a third party, but have your queues be managed by Laravel. Totally possible. -Josh
You can use whatever works best for you! Some folks love PHPStorm, others (like myself) love VSCode, while some people use NeoVim or Sublime Text. Just pick what fits your style. :) -Josh
Love it. I personally haven't used it for any real-world projects, but it's how a LOT of folks are using Laravel. Having that flexibility to use Laravel however is best for you and your product is INCREDIBLE. -Josh
I use Laravel with herd and i created app as name laranext so it's domain laranext.test. I set NEXT_PUBLIC_BACKEND_URL=laranext.test like this but i am getting CSRF token mismatch in register.
I don't know the answer to this and would have to do some digging, but I believe it's because your NextJS is not being served from the same domain. Since that would be on something like "127.0.0.1:8000". I believe you have to run php artisan serve so that it's being served from localhost, as well. That being said, there probably is a way to make it work, but I have not tried solving it yet. -Josh
@@LaravelPHP First of all, thank you for your answer. I did not give up and solved the error by making some changes in the config files. In package.json i changed scripts dev as ' "dev": "next dev -H laranext.test" and in laravel .env i added SANCTUM_STATEFUL_DOMAINS=laranext.test:3000. FRONTEND_URL=laranext.test:3000
After running the Laravel new command, you'll be able to select the Breeze API starter kit which gives you everything you need to get up and running with this. ☺️ -Josh
You can definitely do that too with Laravel Inertia React stack (a Breeze scaffold too). But it's nice to have options too knowing that Laravel can "just" be an API. :) -Josh
Comes to the right moment. Please provide more videos with Next.js.
I'm glad it helped and was useful for you! We will have to do some more NextJS videos in the future. :)
-Josh
@@LaravelPHP very happy to hear that. Thank you so much!
I am using Nuxt (Vue) with Laravel and it's a match made in heaven ❤
Nuxt is AWESOME. I'm a big fan. Even before I started working in Laravel. There's also a community maintained Nuxt Breeze repo that has some neat features if you want to take a look. :)
-Josh
same here bro. I love this combination.
I started learning Nuxt and I I'm excited to incorporate Laravel in the mix
@@LaravelPHP Nice! if you get the chance can you post the link to this repo?
Mind blowing! Really helpful to jump in nextjs. Thank you so much.
Thank you so much for watching. I'm glad it could be helpful. :)
-Josh
Cool stuff about Laravel, it includes more than what it seems. People keep comparing Next.js and Laravel when in reality in only compares to "part" of Laravel and does not realize you can use them together. So instead of Next.js + some database package + some auth package, you can just use Next.js + Laravel.
YOU'VE GOT IT! It's nice to have flexibility and options when working with Laravel. And if you have an existing Next.js app and just need something like queues... well you can use Laravel for that too. ☺️
-Josh
Thank you for this video!
14:45 - Missed an opportunity to go for millions of peaches. :D
Gah! I missed a great opportunity there. 😂 Next time. :)
-Josh
The sound of the video is MUCH better this time around :D
I'm glad Nick! I made sure to take it into account for the last two. ☺️
-Josh
very clean - well done sir
Well thank you. I appreciate the watch and support! :)
-Josh
The thing is, the Next.js Breeze example never utilizes authentication on the server side. Even the Next.js Layout and Page files in the example repo are implemented as client components.
Loved the sip of phantom chroma key water! Jokes aside, amazing video!
Did I really drink water or was it just an 🪄illusion 🪄 😉
Thank you Simon! :)
-Josh
Hopefully Laravel team release typescript version of breeze-next
Awesome Video! May I ask, what browser do you use?
When using Laravel as an API with NexJS (app directory), the same setup does not work well. With app directory, we do a lot of things on the server than client. So authentication will be handled on the server in a react server component/page or nextjs layout. Do you have any ideas on how to still connect to Laravel API but all actions are server to server communications including auth checks and getting data.
Why would y do that tho
So the current iteration of the Breeze implementation of NextJS is using the App directory. While it may not be doing EVERYTHING on the server (and I didn't want to change too much with how things are set up out of the box), there's definitely ways to make this happen.
It might be a great second video, but it would start with using Middleware to check for Authentication rather than a Layout page. Then, with the introduction of Server Components, we could use actions in the NextJS pages to fetch and post data.
Do you think it would be handy to have a more in-depth guide for server-first NextJS?
@@LaravelPHP Hell yeah!
I would like to hear also when would a setup like that make sense.
As cool as it sounds, it feels weird to have a "server => server => client" implementation.
@@LaravelPHP would love a more in-depth guide, very interested to leverage Laravel's auth and overall backend for my Nextjs apps
@@LaravelPHP yes that would be very handy. I soiled my hands a couple of times but couldn't get it to work especially csrf tokens couldn't match when making post requests so I even thought of disabling csrf tokens or using API tokens instead. So at least I would really appreciate it.
in our company we used this combination, really love to use both.
It's nice to have that flexibility and power for the front-end and back-end, huh. :)
-Josh
Wow thank you Seth Rogen😄 it was really great video
😂 Thank you for the chuckle.
-Josh
@@LaravelPHP You know I really love it since I use Laravel for my project and now I see I can use it wit Next makes my job really easy so I don't need to learn Node js now
Oh my god I can’t unsee it now 🤣
How can we run Breeze Next on a Docker container and use it with Laravel Sail?
Auth is perfect but I am not sure how to handle with roles and permissions for Next. How can I protect routes/middleware based on their roles?
Cool video. This gives me some ideas of how to pair Laravel with Sveltekit or Nuxt.
I'm glad this helped you out! There's also a great community maintained Nuxt version that you can take a look at. :)
-Josh
Would love to see an official implementation of an Astro JS frontend with auth ✨
Great content! But wouldn't it be much simpler if we just used the Laravel + React Breeze scaffold? After all, what Next.js is mainly used for is its ability to support server-side rendering and server components out of the box. But with Laravel as the backend, couldn't we just make it so that Laravel handles routes that require server-side rendering while using React for routes that require intensive client-side interaction?
The only reason I use Next.js is its support for React and server-side rendering. But other than that, it still needs a backend like Express, Laravel, Go, Django, or Rails because it can't really do everything on its own.
What do you think? 🤔
agree, in fact you get that shiny server-side rendering stuff only with plain React, look into a package called inertia-ssr. honestly the implementation on this video only adds boilerplate and makes your life harder lol.
I think the Laravel and React scaffold using Inertia is a great option and gives you all of the power of React with the flexibility of Laravel! Especially if you have the choice. There might be business reasons that one might choose to use Laravel as an API with NextJS. Perhaps, you're needing to take advantage of things like ISR or SSG that are implemented out of the box with Next. Or, it's already been implemented in a project but you're wanting to move to Laravel on the back-end piece by piece (maybe with queues or background jobs).
Overall, it's great to have options and Laravel is fantastic to make those options NUMEROUS. ☺️
-Josh
@@LaravelPHP That makes sense. Thanks Josh!
Your video was really right on time but i would like to know if its possible using next auth with laravel ?
Why would you want to do that? Laravel has every kind of authentication solution that you can connect with the next.js front.
I would say it's possible but maybe not necessary. NextAuth just replaces a lot of what Sanctum is set up for within the Laravel API implementation.
-Josh
@@tauhid97k its just im new to laravel and i used to work with next auth, i will take a look into it
I noticed in your terminal you have herd pro. Could you make a video sometime explaining the features with herd pro and whether its worth it for xyz people / use cases.
Hi, May i know which terminal are you using on this demo?
Sure thing! This is the "Warp" terminal. ☺️
-Josh
Awesome, will try this sometimes
Glad this could be useful to you. It’s a lot of fun to work with. :)
-Josh
Currently i have started using vuejs in my projects.
I used to use vanilla JS before that lol, i had to write big codes. When i started learning these technologies.. i was like woah!!! 😂😂. That reduced my codebase significantly.
would love to see breeze nextjs with typescript as the first party package
I would love to be able to develop the frontend without needing to install the BE locally and just pointing to a dev environment on the cloud. Is that possible? I don’t think so with sanctum cookies, right?
I don't think this is possible at the moment! I know that Google IDX is making something like this happen though.
-Josh
Awesome, but I have a question. Where can I find the next repo in TypeScript?
There is no official typescript version just yet. However, there are a few community driven repos that you might want to try out:
github.com/bry221996/laravel-breeze-next-typescript
You made things better just want to say that you gave me i thing which is right but also developed mu interest in laravel.
So glad that's the case. Thank you! :)
-Josh
Hi, out of curiosity. what is the software you use to record that?
Hello! I use OBS to record and have some custom scenes set up so that I only have minimal editing to complete after recording.
-Josh
@@LaravelPHP amazing. Thank you
Using nextjs with 'use client' everywhere is the same as using react only... What would great is to see is laravel using nextjs with sort of BFF pattern so SSR/ISR/SSG can be used
Btw, I'm very happy to see NextJS ecosystem working together with Laravel
I agree with you there! I didn't want to veer too far away from the conventions that have already been set up in the NextJS implementation, but I think that would be a great next step or a PR (I know others have already done similar stuff in the wild, and with the Nuxt community repo too).
Using NextJS middleware for auth is a perfect way to have that server side rendering implementation. And then I would probably lean on Actions and Mutations for data fetching instead of Axios if I was implementing this from scratch.
Hopefully that helps. :)
-Josh
you actually don't need to send a csrf request each time as laravel store that in the cookies when you first login and use it for each request forward
That’s a good point! I should have talked through what it was doing in the auth implementation to show it’s not necessary for every request we make (like kicking off a queue).
Thanks for pointing that out. :)
-Josh
@@LaravelPHP yes! I am very glad that finally more people talking about this. I was working with it since it was only with nextjs 12 (2022 i guess)and now I literally can’t start a project any other way! I would love to see more videos about this nextjs/laravel combo. And thank you guys for the efforts 🤝
this is work but one problem is prevent back history. after login click on browser back button page return to login same problem after logout page goes to dashboard. kindly give any solution.
im get confused this is using sanctum or not
because i tried to create login custom and get user in saparate route with sanctum api alwasy authentication response
what is name of vscode icon theme using on video? It's very pretty!
oh nevermind i found it. it's "Symbols" file icon theme
This is actually the "Catppuccin Frappe" theme. :)
-Josh
Thank you :)
Does the Breeze/Nextjs package work with the API and the client app being on different domains?
No
I think a openapi codegen to have react query hooks to call the api would be great
It would be! While it might not be a great PR for the repo, I know the Laravel team loves when we have community repos that other people can learn from. Fork the Breeze repo and let's get started. :)
-Josh
Question - I see many useful packages in Laravel ecosystem using Livewire. But I want to use Laravel with React using Inertia. Does that mean I won't be able to use those packages?
You can benefit from all laravel packages, but not on the frontend.
If you're using the Inertia stack, like Joseph mentioned, you could use most packages designed for React unless they are Next.js specific (and use things that are framework specific).
Plus, you can take advantage of Laravel specific packages that don't touch Blade.
But you can also use React components in Livewire with packages like "MingleJS", as well. :) The world is your oyster!
-Josh
How are the requests authorized? JWT?
thank you for your vidéos, what your theme vscode ? i liked
Thank you! This is the Catppuccin Frappe theme. :)
-Josh
What about hosting can u host it on places that support next js but not laravel ??
Yep! Your NextJS can be hosted wherever you want. Your Laravel application would just be hosted on places that are PHP friendly (like Laravel Forge or Vapor). The only requirement is that the front-end (NextJS App) and back-end (Laravel API) use the same domain.
-Josh
Are you left handed or is the video inverted? 😮
I am actually right handed, the video is just inverted during that coding portion. Good eye! :)
-Josh
This is amazing
Thank you! :)
-Josh
This also makes it easier to integrate with Angular or other FE frameworks
Correct! The API version of Laravel as a starter kit is a great way to start implementing this with your (or your companies) favorite front-end resource. I even use that starter kit to implement a back-end for a Chrome Extension I created.
There's even some community driven examples using Nuxt, SvelteKit, and others.
-Josh
is that implementation up to date?
Can I use typescripte ?
Can you share your vscode settings?
Almost all of my VS Code settings are using Caleb Porzio's settings in his Make VS Code Awesome course. Highly recommend. Other than that, the theme is Catppuccin Latte and the font is Dank Mono. :)
-Josh
What db client are u using?
This is TablePlus. I love it. :)
-Josh
with axios you lose your built-in caching, use the default fetch in nextjs nice for caching
Thank you,
You set up typescript version (ts)
While the one maintained by the team doesn't have a Typescript version, I know this might be a great PR if you're up for it. :)
-Josh
@@LaravelPHP i alrady made a ts version can i make a pr?
@@mobythereal Send github repo link.
@@mobythereal everyone knows js, not everyone knows ts. I feel they used js intentionally. You can make a PR and let's see.
@@mobythereal check pr #22
But should they?
I think having the options within Laravel is only a good thing. :)
-Josh
Making NextJS act as a front-end pseudo-framework and connecting it to laravel feels pointless to me. At that point just go with laravel+inertia+react. NextJS without it's backend features is just bloated,convoluted react.
I would lean that way as well if you started from scratch. However, where it can be appealing is you now have one place (your Laravel backend) to manage your auth, queues, emails, cron, etc. While NextJS has services and options for those, having it in one place would be helpful. That way you only need to extract from an API endpoint with NextJS when necessary. Maybe you want to run most things in an API endpoint, auth be managed by a third party, but have your queues be managed by Laravel.
Totally possible.
-Josh
Is there good rich text editor for laravel v
You can use whatever works best for you! Some folks love PHPStorm, others (like myself) love VSCode, while some people use NeoVim or Sublime Text. Just pick what fits your style. :)
-Josh
Phpstorm is the best in my opinion as it is feature rich with superior refactoring capabilities, but its not free though
❤❤❤
🥰
-Josh
I dev on Laravel api's and my front is on react since 2 years ago
Love it. I personally haven't used it for any real-world projects, but it's how a LOT of folks are using Laravel. Having that flexibility to use Laravel however is best for you and your product is INCREDIBLE.
-Josh
I use Laravel with herd and i created app as name laranext so it's domain laranext.test. I set NEXT_PUBLIC_BACKEND_URL=laranext.test like this but i am getting CSRF token mismatch in register.
I don't know the answer to this and would have to do some digging, but I believe it's because your NextJS is not being served from the same domain. Since that would be on something like "127.0.0.1:8000".
I believe you have to run php artisan serve so that it's being served from localhost, as well. That being said, there probably is a way to make it work, but I have not tried solving it yet.
-Josh
@@LaravelPHP First of all, thank you for your answer. I did not give up and solved the error by making some changes in the config files.
In package.json i changed scripts dev as ' "dev": "next dev -H laranext.test"
and in laravel .env i added SANCTUM_STATEFUL_DOMAINS=laranext.test:3000.
FRONTEND_URL=laranext.test:3000
Isnt this implementation very outdated?
I really wish it was typescript based. Regardless, this is nice 👍
I bet a Typescript version would be a great PR. 😏
(I personally don't know enough to do it, but it would be a great option!)
-Josh
I bet you Josh your "ahaa" sound must be inspired from Jeffery way Jeffery always do "ahhaaa"
You're onto me! 😂 I love how Jeffrey always finds ways of making errors and mistakes seem fun.
-Josh
@@LaravelPHP Jeffery is swagger
where Laravel Files ????
After running the Laravel new command, you'll be able to select the Breeze API starter kit which gives you everything you need to get up and running with this. ☺️
-Josh
But livewire anytime.... Great option
Livewire still holds a very special place in our hearts. 🥰 But it's nice to have options!
-Josh
too much complexity for me, I think I rather react laravel or just full next js express fullstack
You can definitely do that too with Laravel Inertia React stack (a Breeze scaffold too). But it's nice to have options too knowing that Laravel can "just" be an API. :)
-Josh
No 😅
Can't we be friends and combine our powers? 🥺👉👈
-Josh
But seems NextJS Devs hate Laravel and PHP in general! :(
Well, maybe we can change that perspective. :)
(I think more and more people are getting on board though!)
-Josh
I'm a Nuxt dev and I love Laravel.
React and laravel is new MERN
Or... LRNT (Laravel, React, NextJS, Tailwind). 😉
-Josh
Yea you can be good friends but Django kicking your tiny butts.
bro is talking human language not like those nerds out there trynna teach
Hmm. Thank you? 😂 I will take it as a compliment. :)
-Josh
I'd use appwrite or supabase instead of this. Who cares about learning php?
noooooooooooooooooooooooooooo keep them separate.
Can't we be friends and combine our powers? 🥺👉👈 (It's nice to have the flexibility to combine or stay separate though).
-Josh