NextJS and Laravel Can Be Friends

[@zulfiqrysaadputra]

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.

[@LaravelPHP]

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

[@QueeeeenZ]

I am using Nuxt (Vue) with Laravel and it's a match made in heaven ❤

[@LaravelPHP]

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

[@vardasolutions5981]

same here bro. I love this combination.

[@theprimecoder4981]

I started learning Nuxt and I I'm excited to incorporate Laravel in the mix

[@stevepottz111]

@@LaravelPHP Nice! if you get the chance can you post the link to this repo?

[@CharlieKiloSierra8893]

Hopefully Laravel team release typescript version of breeze-next

[@MdArifBinAAziz]

Mind blowing! Really helpful to jump in nextjs. Thank you so much.

[@LaravelPHP]

Thank you so much for watching. I'm glad it could be helpful. :) -Josh

[@nicknick-dev]

The sound of the video is MUCH better this time around :D

[@LaravelPHP]

I'm glad Nick! I made sure to take it into account for the last two. ☺️ -Josh

[@iamputhea]

would love to see breeze nextjs with typescript as the first party package

[@zieddams]

very clean - well done sir

[@LaravelPHP]

Well thank you. I appreciate the watch and support! :) -Josh

[@simonswiss]

Loved the sip of phantom chroma key water! Jokes aside, amazing video!

[@LaravelPHP]

Did I really drink water or was it just an 🪄illusion 🪄 😉 Thank you Simon! :) -Josh

[@ISKLEMMI]

Thank you for this video! 14:45 - Missed an opportunity to go for millions of peaches. :D

[@LaravelPHP]

Gah! I missed a great opportunity there. 😂 Next time. :) -Josh

[@discoverlance]

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.

[@FranFiori94]

Why would y do that tho

[@LaravelPHP]

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?

[@crik0724]

@@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.

[@ethan.creates]

@@LaravelPHP would love a more in-depth guide, very interested to leverage Laravel's auth and overall backend for my Nextjs apps

[@discoverlance]

@@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.

[@chilledgamer5585]

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.

[@sentgine]

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? 🤔

[@MohamedElguarir]

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.

[@LaravelPHP]

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

[@sentgine]

@@LaravelPHP That makes sense. Thanks Josh!

[@yvannerosat]

Can I use typescripte ?

[@stevepottz111]

Cool video. This gives me some ideas of how to pair Laravel with Sveltekit or Nuxt.

[@LaravelPHP]

I'm glad this helped you out! There's also a great community maintained Nuxt version that you can take a look at. :) -Josh

[@SaXuongLife]

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?

[@mychoppaeat]

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.

[@gerardnll2]

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?

[@LaravelPHP]

I don't think this is possible at the moment! I know that Google IDX is making something like this happen though. -Josh

[@septianardiwijaya3927]

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

[@mediafire09]

And nothing about how to authenticate requests coming from server components

[@ricdizio]

It’s already done via cookies/session

[@mediafire09]

@@ricdizio do you mind explaining how it's done via session when the next server is initiating a request?

[@NeiRauniSantos]

Hi, out of curiosity. what is the software you use to record that?

[@LaravelPHP]

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

[@NeiRauniSantos]

@@LaravelPHP amazing. Thank you

[@nicolasmartinez684]

Awesome, but I have a question. Where can I find the next repo in TypeScript?

[@LaravelPHP]

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

[@yvannerosat]

thank you for your vidéos, what your theme vscode ? i liked

[@LaravelPHP]

Thank you! This is the Catppuccin Frappe theme. :) -Josh

[@andreyaires226]

Are you left handed or is the video inverted? 😮

[@LaravelPHP]

I am actually right handed, the video is just inverted during that coding portion. Good eye! :) -Josh

[@shahabz24]

You made things better just want to say that you gave me i thing which is right but also developed mu interest in laravel.

[@LaravelPHP]

So glad that's the case. Thank you! :) -Josh

[@mobythereal]

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

[@LaravelPHP]

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

[@mobythereal]

@@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 🤝

[@ryanp56]

Does the Breeze/Nextjs package work with the API and the client app being on different domains?

[@josephajibodu2377]

No

[@MarioPalomera]

This also makes it easier to integrate with Angular or other FE frameworks

[@LaravelPHP]

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

[@ThePandaGuitar]

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?

[@josephajibodu2377]

You can benefit from all laravel packages, but not on the frontend.

[@LaravelPHP]

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

[@김동혁-k3d]

what is name of vscode icon theme using on video? It's very pretty!

[@qoophon3790]

oh nevermind i found it. it's "Symbols" file icon theme

[@LaravelPHP]

This is actually the "Catppuccin Frappe" theme. :) -Josh

[@TallStack-su8sq]

any alternatives for nuxtjs and breeze or jetstream?

[@LaravelPHP]

There's a community repo for Nuxt and Breeze that I found, so it's not an official Laravel supported version, but great to use and learn from! github.com/amrnn90/breeze-nuxt -Josh

[@TallStack-su8sq]

@@LaravelPHP thanks

[@brunocascio]

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

[@brunocascio]

Btw, I'm very happy to see NextJS ecosystem working together with Laravel

[@LaravelPHP]

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

[@yigityalm5784]

Can you share your vscode settings?

[@LaravelPHP]

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

[@filomontani8683]

But should they?

[@LaravelPHP]

I think having the options within Laravel is only a good thing. :) -Josh

[@0zankurt]

Isnt this implementation very outdated?

[@joe4843]

This is amazing

[@LaravelPHP]

Thank you! :) -Josh

[@nasko235679]

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.

[@LaravelPHP]

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

[@kantediakaridia]

Thank you, You set up typescript version (ts)

[@LaravelPHP]

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

[@mobythereal]

@@LaravelPHP i alrady made a ts version can i make a pr?

[@Terminus265]

@@mobythereal Send github repo link.

[@josephajibodu2377]

​@@mobythereal everyone knows js, not everyone knows ts. I feel they used js intentionally. You can make a PR and let's see.

[@josephajibodu2377]

@@mobythereal check pr #22

[@himesh_89]

Is there good rich text editor for laravel v

[@LaravelPHP]

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

[@drugoviic]

Phpstorm is the best in my opinion as it is feature rich with superior refactoring capabilities, but its not free though

[@ErdemNagikho]

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.

[@LaravelPHP]

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

[@ErdemNagikho]

​@@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

[@meemaw8949]

❤❤❤

[@LaravelPHP]

🥰 -Josh

[@ravisorathiya1756]

I bet you Josh your "ahaa" sound must be inspired from Jeffery way Jeffery always do "ahhaaa"

[@LaravelPHP]

You're onto me! 😂 I love how Jeffrey always finds ways of making errors and mistakes seem fun. -Josh

[@ravisorathiya1756]

@@LaravelPHP Jeffery is swagger

[@shubhamsahuSD]

But livewire anytime.... Great option

[@LaravelPHP]

Livewire still holds a very special place in our hearts. 🥰 But it's nice to have options! -Josh

[@TVpositiv]

where Laravel Files ????

[@LaravelPHP]

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

[@brightlyvirya7500]

too much complexity for me, I think I rather react laravel or just full next js express fullstack

[@LaravelPHP]

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

[@mediafire09]

It doesn't make much sense because next is using server components now. Page router is dead

[@LaravelPHP]

The NextJS Breeze implementation repo from the Laravel team IS using the App Router, just not server actions to fetch or post data just yet. That's why I did want to clarify that something like that COULD be done with NextJS or if you wanted to use React Query or something else, it's entirely possible. But for the purpose of this video, I did want to use the conventions already set in place in the rest of the starter project. :) I would look towards the Nuxt community Breeze implementation for some thoughts on how they are doing server actions, but putting the auth in the Middleware would be a great first step (and maybe a welcome PR to the repo). The good news is the Laravel API setup doesn't change. -Josh

[@mediafire09]

@@LaravelPHP the server actions are the most difficult part of this auth flow... So just having axios and using next as SPA isn't that helpful. Even at the beginner level.

[@baware80]

why not just use Laravel instead of going through the complexities of a JS framework? keep it simple.

[@LaravelPHP]

I think it shows the flexibility that Laravel provides out of the box. You can (and many people do) choose to use it as an API-only implementation like we see here. But you also have incredible flexibility to use Laravel as a Full Stack framework, with React/Vue/Svelte in Inertia, or with something like Livewire, HTMX, or even JQuery if you wanted! -Josh

[@codernerd7076]

But seems NextJS Devs hate Laravel and PHP in general! :(

[@LaravelPHP]

Well, maybe we can change that perspective. :) (I think more and more people are getting on board though!) -Josh

[@QueeeeenZ]

I'm a Nuxt dev and I love Laravel.

[@KhodeCamp]

No 😅

[@LaravelPHP]

Can't we be friends and combine our powers? 🥺👉👈 -Josh

[@Herxh428]

React and laravel is new MERN

[@LaravelPHP]

Or... LRNT (Laravel, React, NextJS, Tailwind). 😉 -Josh

[@mynameisnotshane6501]

bro is talking human language not like those nerds out there trynna teach

[@LaravelPHP]

Hmm. Thank you? 😂 I will take it as a compliment. :) -Josh

[@greendsnow]

I'd use appwrite or supabase instead of this. Who cares about learning php?

[@RanaMuaviyaAmeermuaviya]

noooooooooooooooooooooooooooo keep them separate.

[@LaravelPHP]

Can't we be friends and combine our powers? 🥺👉👈 (It's nice to have the flexibility to combine or stay separate though). -Josh

[@alifatahi7952]

Wow thank you Seth Rogen😄 it was really great video

[@LaravelPHP]

😂 Thank you for the chuckle. -Josh

[@alifatahi7952]

@@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

[@luigibattaglioli6026]

Oh my god I can’t unsee it now 🤣

[@YeowPann-kw4dt]

Hi, May i know which terminal are you using on this demo?

[@LaravelPHP]

Sure thing! This is the "Warp" terminal. ☺️ -Josh

[@FranFiori94]

I think a openapi codegen to have react query hooks to call the api would be great

[@LaravelPHP]

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

[@hmatpin]

How are the requests authorized? JWT?

[@blabla-kk8bl]

Yea you can be good friends but Django kicking your tiny butts.

[@vuya3D]

Comes to the right moment. Please provide more videos with Next.js.

[@LaravelPHP]

I'm glad it helped and was useful for you! We will have to do some more NextJS videos in the future. :) -Josh

[@vuya3D]

@@LaravelPHP very happy to hear that. Thank you so much!

[@sawos1596]

Your video was really right on time but i would like to know if its possible using next auth with laravel ?

[@tauhid97k]

Why would you want to do that? Laravel has every kind of authentication solution that you can connect with the next.js front.

[@LaravelPHP]

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

[@sawos1596]

@@tauhid97k its just im new to laravel and i used to work with next auth, i will take a look into it

[@aliffiansyahmaulana]

Awesome, will try this sometimes

[@LaravelPHP]

Glad this could be useful to you. It’s a lot of fun to work with. :) -Josh

[@Ivcota]

I really wish it was typescript based. Regardless, this is nice 👍

[@LaravelPHP]

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

[@endoritos__]

What about hosting can u host it on places that support next js but not laravel ??

[@LaravelPHP]

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

[@lotkutv2392]

in our company we used this combination, really love to use both.

[@LaravelPHP]

It's nice to have that flexibility and power for the front-end and back-end, huh. :) -Josh

[@DestroyWolves]

I dev on Laravel api's and my front is on react since 2 years ago

[@LaravelPHP]

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

[@marioniko4714]

What db client are u using?

[@LaravelPHP]

This is TablePlus. I love it. :) -Josh