NextJS and Laravel Can Be Friends

so there's been a lot of press recently about how larl and react or view or spelt they don't clash it's not US versus them larel and react view or spel they all work together whether you're using something like inertia or we're going to take a look at what laravel looks like strictly as a backend as an API for something like [Music] nextjs so lille's starter kits which includes Breeze and stream Breeze has a blade version a Livewire version a react and view version which is inertia the glue holding those react or view view layers with your back end in One Mono repo and then a breeze nextjs with an API version of LEL this is one that doesn't get talked about that much and frankly it's very underrated because you get the power of nextjs the power of using all of those components just like you might with inertia but you can host it anywhere and then use laravel on the back end and still have the same magic the same functionality that you're accustomed to within a Lille application so why don't we take a look at what this looks like for example you get to scaffold out a Lille application which basically just gives you the ability to have it set as a full backend API and then the Lille team has a nextjs reference implementation available on GitHub so why don't we take a look at what these two folders look like together how to set them up and then some magic that they combine all right I created a new directory on my local machine where this project is going to live and I called it l next so why don't we go into that directory and now we're going to start by installing the laravel backend API we can do that with the laravel installer that's laravel new and then we can just pass it the name of the directory where this Lille application is going to live and since I have Lille herd set up I have access to this Lille new command in my command line Lille new we're just going to call this API we're going to start off with a starter kit because as we saw earlier Lille Breeze has a starter kit where if we were to scroll all the way down we have API only um the other next ones don't really matter too much just for our testing purposes right now and while this installs why don't you take a sip of water and we'll get going we'll use sqlite and then we'll be off to the raises this is mostly just for Simplicity sake so that way we have a database all set up and ready we'll go ahead and pull some information from the database so that we can display in our nextjs application and we're actually going to run a command from our nextjs application and start off a cue in our database and all the that Q driver and everything will live in our sqlite database collection so we'll go ahead and run those migrations just so we're all set up and ready because we do need migrations set up for our user table because like we saw in the starter kit not only does Lille Breeze in this nextjs application make talking to your backend a lot easier because it has a hook set up out of the box for us but it has users all set up as well so let's go ahead and install now our so we can see that we have our API directory let's go ahead and install the nextjs application as well so we're going to go um into GitHub and we're going to grab the GitHub repo from larabel which is the breeze nextjs implementation I have the GitHub CLI so that's just going to be GitHub repo clone larvo SL Breeze next I'm going to place this into the client folder and after that's already cloned I'm going to go into the client folder I'm going to make sure I'm using the most recent version of node and we're just going to say mpm install not that mpm install there we go perfect okay now why don't we open this up in our code folder okay so in our code folder you can see here in the read me that gives us some instructions for how we can start implementing this from within our lville application since we already have an API set up that isn't running just yet so we can't necessarily have that connection just yet but why don't we see what we have to to do so we created the larl application we already did that we installed larel Breeze because we started with the starter kit and we ran the migrations so it says next ensure your applications app URL and frontend URL environment variables are set to Local Host 8000 Local Host 3,000 respectively so why don't we go back into our command line what we're going to do is go to our um let's actually open this into a new new tab and we'll go into our um API folder and we'll just go ahead and run PHP Artisan serve now looks like this was going to be serving on Port 8000 which is perfect for us and now we need to copy over the env. example file in this nextjs directory and change it to env. looc now we can just go ahead and do that right here so I'm just going to say this is env. local there we go and then we should be all set up and ready to go all right and let's go ahead and run mpm run Dev perfect looks like we're all ready to go now if we were to access this in our local site what we see here is the breeze implementation within nextjs now why don't we go ahead and check out what these login and register routes actually do so we have register and looks like we can actually register ourselves a user let's go ahead and do that right now perfect and we're all logged in so we have the ability to have users that can log in and now these users are then stored to our database in laravel so one of the first things I like to do is take a look at what the implementation looks like within this nextjs directory so that way we know how it's already been done within this project within this scaffolded starter kit if you will and then what are some of the conventions that have already been placed here that we can build upon so let's go back into our code editor and we'll go ahead and take a look at some of the files so we have a source directory this is using the app directory with a nextjs and then we have our oth Pages we don't really need to touch those right now we can definitely look at those for implementation uh advice and and experience we have the app directory which has a layout directory a loading directory navigation as well as a header.jpg which has an axios implementation this is going to be key because we're going to be using this for all of our post and fetch requests because we're grabbing information from the base URL and we're going to be passing xsrf tokens through this axios do create call and then we have this hooks file which is giving us the implementation for off JS this is what makes it easy to kind of in our um in our page here be able to see information from the user so if we wanted to let's go ahead and go to our dashboard and why don't we show maybe the email that we signed up with on the dashboard let's see how how hard this might be to implement so if we were to go into app we have dashboard and then we have page.js you can see here that we don't have access to a user here so how would we implement this well if we were to take a look at that off. JS file you can see here that we have access to this user API sluser now this is a hook using the useo hook to get the user from the API verify their email and then grab that information so how is this being done in the navigation why don't we check so in that navigation this is where we kind of see that name up here in the top so how are we accessing that name again we saw the use off hook that we have access to within the library but within here we're having we're we're having this child children Pro of user now where are we actually using this down here it looks like we have a um let's see looks like we have a dashboard and maybe it's right over here let's see oh there we go user.name so we should have access to the email as well let's just say if we have a user. email this would change we have access to that email there so how would we pass in this into our actual dashboard page well if we were to take a look at the layout that that laral set up within this nextjs implementation again this is all just using the implementation that the laral team maintains to get you up and running connected to your laral database laral application all the tools and magic and functionality that you get within the layal application but now you just have this nextjs implementation on the front end okay so in the layout we're passing in this useo middleware and this is that useo hook that we have available able to us um through this nextjs implementation again just to note this has to be done in a client component so how would we implement this to display on the page in the dashboard well the dashboard is an client component so let's go ahead and create a component let's just say this is our um maybe our you know our user display or user HUD for example and maybe we'll go ahead and do that in components and we'll just go ahead and say that this is let's say new file and we'll just go user component.js and we'll go ahead and we'll just say that this is um a use client page and we'll go ahead and Import off then we'll just say this is user component and we'll just say you know display um we don't need this image here but we'll go ahead and display the user's name and maybe they we'll just go ahead and say maybe their their email as well okay we don't actually need to passin a children props we're just going to display this user component so what we should be doing is export default user component and then we should be able to use this component in our file in our dashboard. page file so let's go ahead and import the user component from at components user component and then we'll say you're logged in instead we'll just call this the user component now let's see what this does for example now we have our name and our email if we were to like refresh this you can see here that it's loading as the user is loading the information on the page just note that this is one of many different ways that you could actually pull information from your larl application now we are just using the hook that the larel team has provided in this nextjs implementation it does make things a little bit easier because it's all set up for you but if you want to use something like react query or fill in the blank with your favorite kind of implementation to talk to the server when it comes to actually grabbing that information you can do that this is just something that's been set up for you and this is what we'll continue to use as we kind of pull information from the server so there we go we have our user and we have our username and again that's just a component that is being loaded in onto our dashboard page.js there just a component that we created using that useo hook that we have access to in any client component across our whole nextjs application because of this off. JS hook file that has been set up for us when we scaffolded out this application so let's take a look at what this is actually doing it's using use SWR that is a uh react hook for data fetching that the versell team put together and it's an HTTP cach invalidation strategy that basically just after first returning the data from the cache it sends the fetch requests to revalidate that information and then it finally comes with the upto-date data and we're doing that through axios right here and that's where we have that axios library to pull information using the credentials that we've already passed and because we have that use off hook we can pass in the information from the user to our Lille application to know if this user is actually authenticated if they're able to use and validate that information so how would we use the stru structure that's already been given with things like this axos Library component to actually grab information from our laral API well in this case we could use that use SWR hook and we are just kind of using the oth hook to kind of give us this implementation where we're just grabbing data passing it to a variable uh or or destructuring that data I should say and grabbing the specific API endpoint that we want to display that information from or grab that information from so this display fruit is just a component that we have that just grabs the fruit from the API and then displays and for now we're just going to stringify that data just to see what we have but let's go ahead and write this route in our Lille application so we can say route get and we'll just go ahead and call this um slash fruits and maybe we'll go ahead and turn um fruit all that that that should work great so let's go ahead and see what that does and maybe we can even pass on middleware of off syum this is just saying that we'll go ahead and bring that in this is just saying that this has to be an authenticated user to go ahead and make this API request so we have API SL or SL API fruits so that looks like it's routing to their ER name so why don't we take a look and so in our application we're not actually going to see anything displayed because we don't have any data so why don't we input some data let's go have some fruits we have a name quantity field so let's go ahead and call this watermelon and we'll say we have 30 of those and we'll say some peaches and we have 10 of those and then maybe some strawberries and we have three of those okay okay and looks like we're grabbing information about our user so what did we do wrong let's go ahead and take a look aha we have/ API sluser where actually we want fruits let's take a look now so now we have this information available to us this information that we added to the database so why don't we clean this up a little bit just to make this look a little prettier there we go so we have watermelon we have peaches and we have oh let's go ahead change that so we have strawberries aha perfect now what if we wanted to only make this available to the user because we're using Lille on the back end API this just makes that so much easier because now we can say I only want to grab the fruits that are associated with the user so why don't we make that change on the Lille backend and then see how easy it is to implement in the next J nextjs implementation so first I'm just going to roll back that migration so that we don't have any more fruits all right now in our fruits table why don't we go ahead and give this a um foreign ID for our user ID and we'll just say that that's constrained to that specific user and now um in our fruit model we'll say that a fruit has to be associated with a user belongs to a user perfect and then we'll go ahead and say a user US has many fruits so why don't we add that down here so public function fruits has many perfect now why don't we implement this in our API so we're only grabbing fruits that are associated to this user so return fruit all now we can pass in the request here and we can say return fruit all or return uh request user fruits that way we're only returning the fruits that are associated with this user so why don't we go ahead and add some more fruits there should be none right now and it looks like we need to First migrate those so let's go ahead and PHP Artisan migrate there we go now we have some fruits let's take a look now why don't we go ahead and they're not going to be associated with a user um let's actually create a new user we'll go ahead and duplicate we'll say this is uh we'll say this is a tailor and we'll go ahead and say uh tayor test.com and a password of password okay so now we have two users so these fruits I'm going to add to the second user and we'll just say this is strawberries and we'll have three and then me my user will have watermelon and we'll have eight and then the third thing will be peaches and there'll be one of those so to the user user two has Taylor has two fruits and user one only has one fruit so what should we see in our browser just watermelon now this is how easy it is to connect to our Lille implementation we didn't change anything in our nextjs code here we're still querying the same data but because we have already authenticated because we're using the hook that we have here we have because we're using oh excuse me because we're using the axios library which includes any credentials that are already set because we're logged in we have access to that in our request to request the users fruits okay but what if we want to take this one step further what if we wanted to actually run some information or collect some data and put it into a cue on our lville API backend and then just display that information or have the user Kickstart this process from our nextjs front end so instead of using use SWR which is just for grabbing information we can still use the axos uh hook axos library that that the LEL team has put together through this lib axios.com cookie for authentication and then posted to a particular API endpoint now um in this case this is uh to posting to SL register but if we to go into our send fruit Roundup which is one that I uh created we're basically grabbing that syum cookie but then uh when this button is clicked we have this handle click button when this button is clicked we're going to grab that data that's sending the cookie off waiting for that and then posting to this send fruit email API endpoint on our larvo application which maybe we'll uh send an email to the user with their fruits that they have in the back and maybe we'll queue up that email so that it doesn't overload our server when this button is pressed and then we'll just send a response back to the client saying this message was cued or this message was sent here we have that response message being displayed out on our nextjs clients why don't we go ahead and write this endpoint so we'll go ahead and Route post we'll say that this is uh slash what do we call it send fruit email perfect so we'll go ahead and pass in a function and because we need the actual authenticated user we'll go ahead and grab that request okay perfect we'll just grab the fruits from the user first that we can pass that into our email I actually set up an email to go this is just basic larel email maila bles where we'll take that information and pass it on to a simple blade view so we grab the users fruits and then let's go ahead and do a mail to and we'll go ahead and send this to uh the request users email and instead of sending a fruit email why don't we go ahead and cue it so this is just simply saying instead of sending it directly in This Server request let's go ahead and queue it up and then why don't we return a response and we'll say that this is a Json message and we'll say through email queued up there we go and let's round this off perfect so let's bring in the necessary facades we have the fruit mail that I set up for us and then let's go ahead and start up our queue so we'll go PHP Artisan Q work we have that ready to go and why don't we take a look at what this looks like on our front end perfect so we have the fruits that are being displayed but what if we want to send that Roundup email click this button fruit email queued up we get that response back immediately from the server we were to take a look at our um our cue we see that that was running and then completed now let's go ahead and take a look at what that looks like in our email and Bam there we go we have a simple fruit email with the actual fruits that we have from our database linked to our user overall there's so much more that we could show for how to use a front-end implementation like nextjs with laravel strictly as an API but this implementation through this nextjs Breeze straight from the LEL team gives us a great starting point to have those resources those libraries those um best practices already set up for us for how to retrieve information and how to send it and of course if you're familiar with nextjs you might have the tools that you already need in order to retrieve information and to send it but this just gives you a great starting point if anything a great repo to kind of look to and learn from as you're building this out yourself overall you shouldn't have to choose if you want to use nextjs or larabel there might be a great opportunity to use both to take advantage of things like cues and emails and background jobs within larl but have all of your front end being served up with nextjs or maybe you have additional external apis that just work easier if you're hitting them and serving them up through your nextjs front end and while the glued together might not be as simple as something like inertia you still have the ability to have those powerful front end combined with a powerful back end within laravel without having to compromise on any flexibility altogether so laravel and xjs can be used together [Music] [Music]

Channel: Laravel

Views: 18,249

Keywords: laravel breeze, Laravel auth, Auth Laravel NextJS, Laravel and NextJS, NextJS and Laravel, Laravel as API, Laravel API starter, Laravel Breeze API, NextJS Laravel, NextJS Laravel API, API with Laravel, API with NextJS, NextJS with PHP, PHP and NextJS, NextJS Laravel starter, Laravel NextJS starter, Laravel and Next api, next js api starter with laravel, laravel breeze api, laravel breeze api next js, laravel nextjs breeze starter, laravel and javascript next

Id: Ri65-XNBtYA

Length: 23min 54sec (1434 seconds)

Published: Fri Jun 07 2024