Next.js Fundamentals for Laravel Developers (New Course!)

Hello guys. In 2026 in the age of AI, I'm passionate to help my Laravel developer audience to expand their tech stack and still keep the jobs or find new opportunities. So, I'm searching for what to add in addition to Laravel to my content and I found Next.js. Not exactly found, it was all over the place. It was everywhere over the years. Next.js here on Stack Overflow survey, almost at the top and Next.js is a framework of React, which is even higher on the list. So, this is a no-brainer Next.js should expand your opportunities to get more work in addition to your Laravel and PHP knowledge. Also, recently I've been browsing Upwork quite a lot for project ideas and if you search for Next.js, there are work opportunities pretty much every hour. So, that's why I decided to spend some time and create a new course on Laravel Daily, which is called Next.js Basics for Laravel developers. So, very short fundamentals, what you need to know in 1 hour. And in this video, I will publish first three lessons of this course, so you would kind of feel what it's like to start working with Next.js in addition to already pre-built Laravel API project. So, next you will see three lessons plus intro about what will be building and the link to the full course if you want to get that. It's for premium members of Laravel Daily. The link will be in the description below. And if I see that this topic takes off, the fundamentals of Next.js, then I may dive deeper and create a follow-up to this course or more videos here on YouTube. So, be active in the comments if you want me to dive deeper into this topic. Now, let's dive into the course. Hello guys. Welcome to this course about Next.js, the React framework, but from the perspective of Laravel developer, because we will start from Laravel API. So, throughout this course, step-by-step we'll create this project Baby Gear to rent strollers, cribs and car seats for children. And the starting point for that would be Laravel API application, which already exists, so it has list of products, authenticated endpoints, register and login, and it works with Postman, for example, so you can see the example endpoint and what it returns. So, this is typical Laravel. Now, the question is, for Laravel developers who know how to work with API and how to create that, how to create the front-end part. So, this will be exactly the topic of this course. In roughly 10 lessons and in roughly 1 hour, we will create the list of products consuming that Laravel API. Also, we will take care of the routing in Next.js. Also, login and register would work, so I can use Fake Filler Chrome extension and create account, which already is existing. Now, after I fill this form on the back-end, I can go to my bookings or I can choose some product, choose rent this and fill in the form, when do I need that infant seat, for example. Without payment in this course, because this is about fundamentals. The goal of this course is not to teach you the syntax of Next.js, because in the age of AI, syntax doesn't matter that much. What matters is the conceptual understanding of how different parts of that framework actually work. And speaking of the age of the AI, along the way we will prompt AI to deliver the code. So, I will use Codex CLI and prompt for things like this. But of course, I will not blindly trust the AI generated code and we will go through that, commenting on the code. But generally, the goal of this course was to fit in roughly 1 hour and to mimic kind of the current reality where developers would not necessarily write the code by hand. This is, I think, will happen more and more often. You prompt for something and then you need to review and understand the code and know how to customize it. So, this will exactly be in this course. Again, the goal is fundamentals of Next.js, the understanding, so we will not dive too deep, but after this course, you should be able to create similar simple project with Next.js using Laravel API. Let's dive into the course. So, the first thing I will do is install a new Next.js project with create-next-app and I will call it Next.js folder and then dash dash yes will use the default values of a lot of features that you may want to enable or disable. So, these are the defaults. And it's done in 25 seconds and let's see what's the home page and how the default Next.js application actually works. For that, we CD into that folder and run npm run dev. And that's it. Then we can go to localhost:3000 and this is the default Next.js home page. Let's see what files are inside. But actually, this is the main thing that you need to know, page.tsx. And in this case, we're using TypeScript. When installing Next.js, you may choose JavaScript or TypeScript, but TypeScript became such a popular and almost kind of a standard thing that I didn't want to vote for JavaScript. At least in Laravel starter kits, all Laravel starter kits use TypeScript. So, if we now open that folder of Next.js and then go to app/page.tsx, this is the React component, which returns HTML here, as you can see, but with some React components like image. But for example, if I change some text here, for example, add ABC here, I save and then since npm run dev is running, it automatically is refreshed, so I see the new text here. So, this is how you generally edit anything in the TSX file. This is the HTML part in export default function. Next, you may also see app/layout.tsx and here you see a lot of variables, but also here the familiar HTML with body and then children inside of that layout. So, for example, if we put ABC here and save, that home page will show ABC on top in the beginning of the body. But this is kind of the global layout file for all the other pages we will create. And next, I will launch AI agent, in this case, Codex and will prompt to create a static home page for us. So, we will get familiar with Next.js typical home page and layout structure without the back-end API yet. And this is the prompt and I will save all the prompts in the folder prompts in the same repository. So, I will paste it here and let it run. And by the way, when I created the new Next.js application, the Git repository was already created by default, so I didn't have to do git init or commit the first skeleton. And after 3 minutes, Codex is asking whether I want to run npm run build and I will probably agree to proceed, although we do have npm run dev in the background. And do we run npm run dev? No, I just don't want to have that, because it's already running. And we still should have the home page updated. So, there we go. Is it? No, it was zoomed in. So, this is the new home page, Next.js React.js static with the things that I asked in the prompt. Now, let's take a look at the code, how it all works. So, this is the main file that was changed, page.tsx, the same TypeScript file with, as you can see, new type of product and then featured products variable constant with name, category and price hardcoded. So, those are here below hardcoded products. And those are defined on top and then function navbar is defined in the same component, which may or may not be correct. Actually, a better way for more pages would be to extract those navbar and other features to separate components that would be used in other pages, but we will do that a bit later. For now, as you can see, navbar with baby gear and login and register, which is this thing on top. And then function hero, so another function. Basically, it's a React component, which is again, probably better elsewhere, because we don't have just page for the home page, but in general, for website, we'll have more pages, so those hero and navbars will be extracted somewhere. But for now, we have hardcoded section with some links and hardcoded text. So, this is the hero section. And then we have product card. Again, a separate component and again, Codex decided for now to make it in the same page. Maybe it's good for demonstration, but not good for separation of concerns. So, featured products is a section for, well, featured products. And then inside of that, this one is the most important, featured products.map. And those featured products are defined on top, as you saw. And here we have product card, the same thing from above, reused here with different products. So, this is a for each loop of React.js. And then the main thing, export default function, which defines the page itself, which contains the same navbar, the same hero from above and featured products. So, three components in the same page.tsx, used in the main export default. And now, I will prompt Codex to extract the navbar component to somewhere. We'll see where it does. So, the hero section and the product cards are for the home page. They are fine, but navbar should be elsewhere. Let's see and we will learn about the layout of Next.js components in general. And this is the result. I canceled npm run build and it was extracted to components/navbar.tsx. And this is the logic. I'm extracting it to a root level shared component. So, let's see the code. In the page.tsx, actually, let's close and open again, we have import navbar from components/navbar.tsx, which looks like this. So, the same thing, the same HTML, just exported into another file. But look at the structure of that file. This is in components folder. So, the main page, the home page is an app page TSX and this is imported from components. So, separate individual components will be placed in components folder and then imported into app. In the next video, we'll transform this hard-coded list of products to products from Laravel API. In this lesson, we will change the hard-coded list of products on the Next.js home page with list from Laravel API. So, we have a separate repository Laravel API and this is routes API from that Laravel. We will talk more about other endpoints in the future videos, but for now, let's focus on this one. List of products and product index controller, which returns a typical list of products with API collection, Laravel API resource, which in Postman looks like this. It returns list of products and if I pass, for example, per page equals four, it will return four products, which is exactly what we need for the home page. So, this is the structure and we will paste that into the prompt for AI agent. So, along the way, do you notice what I upload to AI agents? I'm not uploading the thinking. I already know how the architecture should look and I prompt re-prompt along the way if I don't like something, but I don't want to write that manually. And this is my prompt I will launch in a minute in markdown file again saved in the same repository so you can follow along and try to prompt yourself. So, we're calling the API and we extract the feature products and product card that you saw in the last video. And for the record, I've pasted from Postman the exact structure, so React and Next.js components would be structured accordingly. To be honest, we don't need those links, but in this case, I simplified it to just call the first page of products. And now to call the API, we need to specify the main base URL, which is usually set in .env file. We don't have .env file, so I can do it manually, which is usually for testing is called a .env.local and then I need to set this variable. And in this case, it will be not localhost 3000, but babygear.test powered by my Laravel Herd on the same local computer in this case. And actually, I will add one more thing to this prompt, this sentence, "Do not ask to run npm run something, it's already running." So, indeed, it is running and it even said reload.env.local, which happened automatically. And now in Codex, I pasted that prompt and let's see what it will generate. And there we go, the result of changed files. As you can see, page TSX, then components and another component. Let's see if it works. We have the home page. I didn't even refresh it because npm run dev was running and these products now come from API. So, it works. Now, let's take a look at the code. So, look at the changes we have in the main page TSX. We have import feature products and separate skeleton. We'll take a look at that in a minute, but instead of product type here and instead of feature products hard-coded in the page TSX, we have the hero stays the same, product card is also extracted. This one is extracted and all we have here is feature products, which is now a separate component with also suspense. I will also talk about that in a minute. For now, what's inside of feature products TSX? We have this. We import product card with type product and here's where TypeScript is used in the product card. As you can see, the product type is extended to more columns. Then we have a few more helper functions for formatting the values and then we have export function product card, which is the main thing exported from this. We have also some formatting for availability and then we return, so one product card will be article with image and data for one product, which is then looped in the feature products here. We have the function get feature products and this is how React and Next.js calls the API. So, we get the main URL, then we get API products and we fetch the data from the server and we get the response and response JSON becomes product API response. That product API response, Codex decided to separate it into a separate type, which is not really required, but let's follow the lead. So, first we have a separate internal function in the same component, products header. It's kind of like include of the whole component and then we have feature products skeleton and we will take a look at that in a minute. And then, this is the main function, feature products async await, which basically means it's empty until it gets the data from the server. Then we have that products header, which is internal. You saw that above and then again we have for each of products and product card component. So, nothing really that much different from hard-coded products on the home page. It's just some things extracted to separate components. And again, if we take a look at folder tree, those files feature products TSX and product card TSX are in components, not in app. Now, let's talk about suspense and feature products skeleton. This is basically React.js mechanism, so suspense comes from React, not from Next.js. Basically, it is waiting for this to load while the rest of the page is rendered and product skeleton is shown until feature products basically gets the data from the server because it's a server component with async. And to understand it better, the best way to understand it is to introduce artificial delay from API. So, let me do that and show you. So, imagine in the controller of API, we add sleep, for example, 3 seconds. And even VS Code is suggesting the comment that we simulate a slow response. That's correct. Now, we don't change anything on the front end in the Next.js and let me refresh the page. I refresh and see this. And in 3 seconds, it should load the data. See that? And those placeholders are exactly that feature product skeleton here. So, if we click inside, there's export function and it's a static array, so array from and length four to render those four static divs with the same feature products header. This is actually a good example of reusability. So, the same header is used in the skeleton and then below in the main feature products here because this is static and doesn't need any data from the API. So, basically, you see why that suspense is needed. Now, let's try to remove it. So, let me comment those two out. I save and now look what happens if I refresh the page. I refresh, loading, loading, loading and now it loaded. Or actually, a better way, let me open that in a new tab. So, I go localhost and I wait. 1 second, 2 seconds, 3 seconds, loaded. So, see, without that suspense, the whole page is rendered with the speed of API. And if you have a few API calls in different components, then it may be slow altogether. So, this is a great way to wait for specific API data to load in specific page component. So, this is how we get the data from the API and now let's try to reuse that thing and get the data from the API in a separate page called products. This will be the topic of the next lesson. In this lesson, we will go from one home page to multiple pages in Next.js and you will see their structure. For that, I will prompt to create that new products page. And this is the prompt in Codex, "Create a new products page, use the API, use the same component of product card." This will be another kind of sub-lesson of reusability. And for now, just hard-code the categories. We need just a front page design. And there we go, we have the result. And if we go to our home page, which is of course refreshed with npm run dev, we have products here and does it work? Yes, it does work and the data should come from the API. Great. Now, let's see the code. In this case, the code change may seem really small, only two files and then the prompt that I gave to Codex. But page TSX is exactly what I want to show you because now we have multiple pages. Look at this. So, we have app page TSX and then app products page TSX, which is exactly how Next.js routing works. So, the URL /products is resolved into products folder with page TSX inside. And then, it is rendered automatically. In this page, there are quite a lot of helping functions, but basically, it's the same logic as home page. Products grid skeleton, that's for the static array and then the main products grid function to get the data from the API and show the products using the same product card already existing component. This is again the lesson on reusability and products map, but using the same component. And then at the bottom, export default is the main function, which is exported and what it returns. Navbar, main and then in the main we have category filters, which is another component in this case inside of the same page TSX. And then again, we have suspense with products grid with products grid skeleton launching first. So, this code actually works, but we may improve it and slice it into different components, so it wouldn't be all in one page TSX. This is one of the improvements. This isn't general like in PHP, like in any other language, everything in one file is kind of a bad practice. So, I will prompt Codex for this, "Extract pagination and category links to their own components." And again, with that, we will practice how to slice components and how to import and them in other components and pages. And this is the result. We have components category filters TSX and components pagination TSX. And we should have shorter as expected page TSX 160 lines. So products page is export default. We have products grid inside and grid skeleton and get products which will actually extract next. But then separately we have categories with filters for now hard coded again. And separately pagination with all the logic about pagination. It's kind of a separation of concern. So this page does not need to know how pagination actually works. It needs to just call the component. And now similarly we can extract and separate the stuff that is related to API operation. And this will be my prompt for that. I want to separate API logic from both of those pages into library. So lib products TS TypeScript not TSX because it's not a component. It's a library. It's a helper to fetch the data from the API. So that would be one extraction and then another one separately type. We have the type of product which is now currently this one products API response and also we have another type product in the product card. So the types also could be elsewhere not in components. So maybe I will clarify product and product response types. And let's see what it comes up with. Basically we're performing the cleanup currently which makes the code more readable separately in separate components, libraries, helpers and types. Of course it's a personal preference how to structure such components and types. But I will show you my example. And this is done now. The summary you can see it here products TS for getting the products from the API. Then types related to all the products and then updated pages with components. Let's take a look. So now our main page TSX should be much shorter. 120 not by much but still it should be more readable because we have now only products page and products grid and probably skeleton. And a few more smaller helpers. And on top as you can see we import everything from lib products from components pagination for example and then use inside of that component. Now the new thing is library lib products TS which is just a function for getting the products and all the API logic is here now. Fetch products, get products. So as you can see there's no export default because it's not a component. It's export a sync function. So these are kind of public functions that may be used in other components. And this for example function is not exported. It is used only inside of the same TS like this. And then also we separated the types. So where is the type here? So for example here import type from types products and then this file lists all the types for TypeScript. And for example then in the product card component instead of exporting type we import from the same file.