[00:00] 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.
[00:15] 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.
[00:29] So this is a no-brainer that 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.
[00:47] 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 one hour. And in this video, I will publish first three lessons of this course, so you would kind
[01:03] 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 we'll be building. And the link to the full course, if you want to get that, it's for premium members of
[01:18] 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.
[01:30] 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 NetJS, the React framework, but from the perspective of Laravel developer,
[01:42] 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,
[01:58] which already exists, so it has a list of products, authenticated endpoints, register and login, and it works with Postman, for example, so you can see the example endpoint and where it returns,
[02:11] 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.
[02:23] In roughly 10 lessons and in roughly 1 hour, we will create a list of products consuming that level API. Also, we will take care of the routing in Next.js. Also, login and register would work.
[02:35] So, I can use, say, for Chrome extension and create account, which already is existing. Now, after I fill this form on the backend, 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
[02:52] 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 Merck JS, because in the age of AI, syntax doesn't matter that much. What matters is the conceptual understanding of how different
[03:08] parts of that framework actually work. And speaking of the age of AI, along the way, we will prompt AI to deliver the code. So I will use code at CLI and prompt for things like this.
[03:20] 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 sit in roughly one hour and communicate kind of the current reality
[03:33] where developers would not necessarily write the code by hand. This, 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.
[03:46] 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.
[04:01] 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
[04:13] 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 homepage and how the default Next.js application actually works.
[04:28] 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 homepage. Let's see what files are inside.
[04:41] 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
[04:55] that I didn't want to vote for JavaScript, at least in a lot of those starter kits. All a lot of those starter kits use TypeScript. So you can now open that folder of Next.js and then go to app page TSX.
[05:08] 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
[05:22] since npm landup 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
[05:34] 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 homepage will show ABC on top in the
[05:54] 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 homepage for us. So we will get familiar with Next.js typical homepage and layout structure
[06:11] without the backend 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,
[06:23] 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 three minutes,
[06:35] 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
[06:48] 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
[07:03] 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 hard-coded. So
[07:20] those are here below hard-coded 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
[07:35] 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
[07:47] baby gear and login and register, which is this thing on top, and then function here, also another function. Basically, it's a React component, which is, again, probably better elsewhere, because we
[08:02] don't have just page for the home page, but in general, for website, we'll have more pages for those hero and mouthbars, will be extracted somewhere, but for now, we have hard-coded section with some links and hard-coded text, so this is the hero section, and then we have product card.
[08:20] Again, a separate component, and again, Kodak 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,
[08:35] and then inside of that, this one is the most important, FeaturedProducts.map, and those Featured Products are defined on top, as you saw. And here we have Product Card, the same thing from above, we use here with different products.
[08:49] 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,
[09:01] and future 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 components to somewhere.
[09:13] We'll see where it does. So the hero section and the product cards are for the homepage. 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 cancelled npm run build and it was
[09:30] 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,
[09:43] Then we have import navbar from components navbar-tsx, which looks like this. So the same thing, the same HTML, just export it into another file, but look at the structure
[09:55] of that file. This is in components folder. So the main page, the home page is in app-page-tsx, and this is imported from components. So separate individual components will be placed in components folder, and then imported
[10:09] into app. In the next video we will transform this hardcoded list of products to products from Laravel API. In this lesson we will change the hardcoded list of products on the NetJS homepage with lists from Laravel API.
[10:22] 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.
[10:34] 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
[10:47] products, and if I ask, for example, per page equals four, it will return four products, which is exactly what we need for the homepage. 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 offload to AI agents? I'm not
[11:04] offloading 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.
[11:16] In moddown file, again saved in the same repository, so you can follow along and try to prompt yourself. So we calling the API and we extract the feature products and product card that you saw in the last video And for the record I pasted from postman the exact structure so react and next components would be
[11:35] 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
[11:51] don't have .env file, so I can do it manually, which is usually for the local testing, it's called .env.local, and then I need to set this variable, and in this case, it will be not localhost 3000,
[12:05] but babygear.test, powered by my ladder that I heard 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
[12:18] something, it's already running. So indeed it is running and it even said reload.eng.local, which happened automatically. And now in codecs I pasted that prompt and let's see what it will
[12:30] 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
[12:42] 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 separately skeleton.
[12:56] We'll take a look at that in a minute. But instead of product type here, and instead of feature products hot-coded in the page TSX, we have the hero stays the same, product card is also extracted,
[13:09] this one is extracted, and all we have here is FeaturedProduct, which is now a separate component with also Suspense. I will also talk about that in a minute. For now, what's inside of FeaturedProduct.tsx?
[13:22] We have this. We import ProductCard with TypeProduct, and here's where TypeScript is used in the ProductCard. As you can see, the ProductType is extended to more columns.
[13:35] Then we have a few more helper functions for formatting the values, and then we have export function products card, which is the main thing exported from this. We have also some formatting for availability,
[13:48] 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,
[14:00] and this is how React and Next.js call the API. So we get the main URL, then we get API products, products, and we fetch the data from the server, and we'll get the response, and response.json
[14:14] 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.
[14:26] So first we have a separate internal function in the same component product header, it's kind of like include of the whole component, and then we have feature product skeleton, and we will take a look at that in a minute.
[14:38] 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 product handle, which is internal.
[14:50] You saw that above. And then again we have for each of products and product code component. So nothing really that much different from hard-coded products on the homepage. It's just some things extracted to separate components.
[15:03] And again, if we take a look at folder 3, those files feature product.tsx and product.cars.tsx are in components, not in app. Now let's talk about suspense and feature product skeleton.
[15:15] This is basically React.js mechanism, so suspense comes from React, not from React.js. Basically, it is waiting for this to load while the rest of the page is rendered.
[15:27] 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
[15:40] 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
[15:53] the comment that we simulate a slow response that's correct Now, we don't change anything on the frontend in the next.js, and let me refresh the page. I refresh, and see this. And in three seconds, it should load the data.
[16:07] See that? And those placeholders are exactly that featured product skeleton here. So, if we click inside, there's export function, and it's a static array. So, array from and length for.
[16:19] To render those four static divs, we've got the same feature press 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.
[16:32] 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.
[16:44] 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.
[16:56] 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 try to reuse that thing and get
[17:23] 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 WebJS and you will see
[17:35] their structure. For that I will prompt to create that new products page. And this is the prompt in codecs. Create a new products page. Use the API. Use the same component of products card. This will be another kind of sub-lesson of reusability. And for now just hard code the categories. We need
[17:51] 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 ramdev. We have products here. And does it work? Yes it does work.
[18:03] 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,
[18:16] because now we have multiple pages. Look at this. So have add page TSX and then add products page TSX, which is exactly how Next.js routing works.
[18:28] So the URL slash 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,
[18:40] but basically it's the same logic as homepage, product grid skeleton, that's for the static array, and then the main product grid function to get the data from the API and show the products
[18:53] 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.
[19:09] Navbar, main, and then in the main we have category filters, which is another component in this case inside of the same. HTSX, and then again we have suspense, with products, grid, with products, grid skeleton, launching first.
[19:23] So this code actually works, but we may improve it and slice it into different components, components, so it wouldn't be all in one page TSX. This is one of the improvements. This is in general, like in PHP, like in any other language, everything in one file is kind of a bad practice.
[19:40] So, I will prompt codecs 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
[19:52] include 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
[20:04] 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
[20:18] 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.
[20:32] It needs to just call the component. And now similarly we can extract and separate the stuff that is related to API operations. And this will be my prompt for that. I want to separate API logic from both of those pages into library.
[20:48] So, lit 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,
[21:01] 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,
[21:13] 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.
[21:31] 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 product from the API,
[21:43] 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
[21:58] 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 component pagination for example and then use inside of that component. Now
[22:14] the new thing is library lib product 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,
[22:26] there is no export default, because it's not a component. It's export async 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,
[22:43] we separated the types. So, where are the types 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.