Next.js for Beginners: Learn the fundamentals of Next.js | Atlas C. | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Next.js for Beginners: Learn the fundamentals of Next.js

teacher avatar Atlas C., Professional Web developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

17 Lessons (57m)
    • 1. Welcome to the fundamentals of Nextjs

    • 2. 1 What is Nextjs

    • 3. 2 Setting up the work environment

    • 4. 3 Creating Next app

    • 5. 4 Creating page - route

    • 6. 6 Creating Links

    • 7. 5 Creating 404 page and handle redirection

    • 8. 7 Components

    • 9. 8 Wrapping the app (Layout)

    • 10. 9 Styling

    • 11. 10 Images

    • 12. 11 The Head Component

    • 13. 13 Data Fetching getStaticPaths()

    • 14. 12 Data Fetching getStaticProps()

    • 15. 14 Deployment

    • 16. 15 Incremental Static Regenration

    • 17. Congratulations

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Learn Next.js framework the easy way. This course will stick to the fundamentals, and guide you through the creation of your first Next.js app.

When many newbies hear about Next.js and SSR - SSG - ISR - Code splitting ... they think It is quite complicated, while It is the complete opposite. Next.js provides dozens of features that make our coding experience way easier and faster, It is a framework for React that is even easier than React itself.

In this course, We will stick to the basics and simplify the features of Next.js.

Some of the topics covered include:

  • What is Nex.js and why using It anyway while there is React.js?
  • Creating pages
  • Routing
  • 404 Page & Redirecting
  • Components in Next.js
  • Link Component
  • CSS / Styling
  • Image Component
  • Head Component
  • Data Fetching - getStaticProps() / getStaticPaths()
  • Deployment
  • ISR - Incremental Static Regenration

In addition to the above I’ve also included two bonus videos on React rendering, and updates. If you have ever wanted to learn a bit about how React works under the hood these are for you.

Course Requirements:

  • JavaScript, HTML, and CSS fundamentals are required.
  • React.js is benefical.
  • Not required, but experience with JavaScript ES6+ is beneficial.

Meet Your Teacher

Teacher Profile Image

Atlas C.

Professional Web developer


Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Welcome to the fundamentals of Nextjs: Next, JS, an open source React front-end framework for creating static and dynamic websites. It is used widely by many large companies such as versa, Netflix, GitHub, Hulu, mykey, and many other companies. It was ranked by set off JS has the best framework for 2020 regarding developer satisfaction in the past framework for three years on row regarding developers interests. Moreover, it was worded as the second most adopted technology for js after TypeScript. In this course, we will learn the fundamentals of Next JS in a simple and easy way. Firstly, by figuring out what is next, JS create an art first, next step, pages, routes, 404, links, components, CSS, silent images, data fetching, deployment, and much, much more joined today to become an experienced developer. 2. 1 What is Nextjs: Hello developers and welcome. In the first lecture of this course. In this lecture, we will discover what is next chairs and y using index.js and majestic and width react. So next, JS is a React framework for production. I know it does not make sense, right? Well, in simple words, next, JS enables us to build super fast websites with amazing user experience. And actually it gives us a stunning development experience along with so many features that make our programming experience were easier and efficient. I know it's still not clear. In order to make it more clear, we have to know why using an x js. Well, the first thing is to SEO efficiency. A big reason to choose an exterior. This is the SEO efficiency that it gives us. Because an exchange as it supports the boat, server-side rendering and dispersed static site generation, which help drive and more organic traffic to the website and rank the website higher on search engines. Well, not just dad actually, but an XJ is it gives us the head component, which happens to be the same as the head element that we know with HTML. And since it provides us with there, it simply means that we can provide the title for each page along with the Meta tags, as we will see in the course. There's also something called the file system based router, the file system based drought, or it's simply a loss for us to not use in the router component that we used to use actually with the a3x, the file system based router. It simply means that every JS file inside the Pages folder that we're going to take a look at. It simply is going to be a wrapped by itself, which is amazing. So now we will take a look at the image optimization as well. The image optimization. It simply means that the image is index.js. While using the component provided by index.js, it gives us an amazing image optimization and automatic lazy loading. There is a faster refresh as well, which will notice while building the app. As soon as we're going to make some modifications and we get back to see the results. That's going to be so quick. There's also a bolt and CSS, SAS and TypeScript support without any configuration and a stunning module dot CSS that next JS provides for us so that we can separate our styles. There's also the cards planning and bundling, which makes our website way we faster. There is also something that we have maybe mentioned in the first, which is about SEO, but not just about the SAR. It makes our website, we, we first there as well, which is the static site generation and a server-side rendering time. In other words, we get to choose whether we want our website to be Sadik. When we finish the coding. The static sites, they are silt so fast and the RSA or friendly. There's ourselves. The last thing, which is a big thing, then next JS provides for us is the incremental Sadik regeneration. So imagine with me maybe if we will build a website that's linked to an API so that we can get the content of the website. So maybe we will build it using the psi degeneration. But what if that API is getting changed? That means that we will not see those changes on our website because we have already deployed it. So that's why Next, JS provides for us the incremental static regeneration. So that even if we have deployed that website, it's still linked to their API. Revalidate time that we will actually specify. So even though that cell died enough, the best way that we got to know index.js and to get our feet wet with it is simply by doing, and that's what we will discover in the next lectures. 3. 2 Setting up the work environment: In this session, we're going to sit in up to our work environment. The first thing we're going to need is a text editor. For me I like to go with was also new coat. It's 100% free and it comes with so many features available. It's available actually on three operating systems. You can find it on Windows, Linux, and Mac. You can simply go to code dot Visual slash download and you can get it for free. We will also be a need for Node.js installed on our system. You can go to slash download. And you will probably find the version that's going to suit your operation system. In order to check up whether NodeJS is already installed on your system or not, you can simply go to the terminal and psych note, I find v In that will give you the version of your note. We're going to probably need some other features like HTML, CSS, and JavaScript. So you should probably have some basic knowledge about these three. So since Nixon chess is a React JS framework, we're going to probably working on to react, but not that much. But you should at least have some knowledge about the basics of React JS as well. 4. 3 Creating Next app: In this chapter, we're going to be creating our first Next JS application. In order to do so, we have to jump into the terminal and simply run in px, create next space. And then we can define the name of our project first. And before the premiere hour would like to create the project into the desktop. In order to do so, let's first cd into the desktop. And then we can run npm, the eight next hack. And we'll just call it learning. Next. Hit Enter and wait what folder to be made. So after it's finished, it's going to tell us that we have to see the into the folder and run the npm run dev in order to see our project. But before that, let's just open up this folder with Visual Studio code in order to take a look at what this folder is consists of. In order to do so, just from the terminal, you can run code and learning next. Enter. And that will open up the folder in next in Visual Studio code. Okay, So these are the folders that we will find inside our application. The first folder is the normal hurdles, is all the models. The next JS needs. Here you can see the pages in these folders we will make in this folder, we will make all the different pages of our website. In this public folder, we will add all the assets that we will need in our application. Here you can find the Styles and inside it, it consists of a global CSS and our home.html dot CSS. Here we can put all the different files rather than style. Here. This is the E S, E S Let it has lent is simply responsible for finding and fixing if there are any problems inside our JavaScript code. This is the good acknowledge is responsible for pushing to get hub. And this is, and you think that happened to me since the last update of an x js, we use to create this next dot conflict dodge AS where we can put all the different configuration of our next js app. What would the last version? It just comes with read an app. Here you can find a package luck budgetary sign, and this is the packet dot JSON in just the README file. In the scripts, you can find that there is a death belt start and linked. The crucial one for us right now is this nerve. It's going to create a local server so that we can see our application. In order to do so here inside Visual Studio Code, we can go to here and then go to the terminal. And this actually will bring the terminal here inside Visual Studio Code. So what we can simply do is just running MPM run. They have hit Enter and wait for the application to create a server for us. As you can see here, this is says that ready to start a server at localhost and the port is 3 thousand. This weight some few more seconds. And this will create for us on local server. Now as you can see here it says compiled successfully, which means that we can access our website. Now, let's take this here and go to our browser and paste it over here. And as you can see, this is all source. We will come to next JS. And it says that we can start by editing the pages slash index.js. Here it shows the documentation. If we can press on it, we will see the different information regarding next year features in API. If we click on this, we can learn exchanges on the website. This is just some examples in here how we can instantly deploy traversal. 5. 4 Creating page - route: We have finally reached a point where we would get our hands dirty with some code. But before we even saw it's called in religious delete a few default pages insights that comes with creating except knowledge. To do so let's go inside pages, although here, and let's just delete this index dot next dot js. Lot of fingers logistic. Remove the default styles that comes with Next JS by the elite in the global of CSS. In this home model will not CSS as well. Great. So now let's create our first speech and our first route. At the same time. We can simply do this inside Next JS, I go into the pictures folder. And inside the folder, let's create a new file and let's call it index budget AS please be careful, here, it must be named index.js. For one act to be our home. Wrapped. Inside here, we just have to make a function that will return JSX and we can export it default. But in order to not hard cold dead, we can simply go to the extensions, look for something called the ESM and react to redox craft your React Native snippets. This simply allows us to just create few letters in is going to generate for us what we want. For us. We just want a stateless functional component to, let's just type S C. And this will generate for us a stateless function Components tab. And here we can just name it. So for me I'm going to name it index here. Okay? So what we want to see is just for example, an H1, That's gonna say hello, world. Let's hit save control S. I am probably, I am pretty prudish or not just probably I'm pretty sure that we are going to be facing an issue and it's a chance for us to see how Next JS handle the issues. If we come back here, as you can see here, it said fail to compile. And it says that module not found and cannot resolve the styles dot global Nazi SS. Do you remember we have just remove that file. Well, here it says that inside the pages, the app, It's still have cell has this import styles, sludge global dot CSS. So just to go back to this app dot css and heart, this is after we removed colleges to remove it, save, go back to our file, refresh. And as you can see here, we have just make our first page and our first right. Let's just create another one. Let's go inside the Pages folder. Let's remove this inside the Pages folder, and let's make a new file. And let's, for example, call it About dot js. The same way we have created index.js. We just write SFC and this will generate for us stateless function component. In here we can name it a lot for example. And we want it to return for us just in Mother each one that's going to say this is cup bleach in the safe, nor back in. Then let's go back to our local host port results in slash about to see whether we have created this page, press Enter. And there you can see here, this is about page great. 6. 6 Creating Links: Now let's take a look at how we can handle links inside our next JS application. Before the one, just wrap this Hello World in our index page. In a div. You'll select that. They'll earn. We all know there is a link component in reactors. In x years. We have a link component as well. The main difference is the link component in React, we need to find that you need to define it with an attribute called to. While index.js, we are working with links, just like we are working with the intake in HTML. So let's take a look at that. So first things first, let's import the link component. And it just took incorrect link from next slash, like like that. Well, let's make a link here. Well, it's McCloy ink and just write link. And here we type in sheriff. And let's say that we want this linked silica city about Beach. Be careful. Don't get confused between index.js and react. In React we used to use to you, we are using the H ref, just like we are working with an HTML tag. So here inside link, we can make an ETag. And we can simply say a girl to about age group them. Now let's go back to our homepage. And as you can see here, we have created a link. If we click on it, it takes us to the about page. 7. 5 Creating 404 page and handle redirection: So far, we have created only two routes, mean or the home route in the about routes. But what's going to happen if a user goes to another route which does not exist. For example, let's say contexts. This is shows 404 page in the speech could not be found. This is automatically generated in handled by an exchange. But what if we want to add our own 404 page? You can simply go inside the Pages folder. We add a new file and let's call it 40 for NodeJS. Let's generate a stateless auction component on its call it for example, era pledge. In this era plate, we want just an each one again is going to show that each knot out. And this mice emerging. It's all, it's HIPAA saved. Now, let's get back, refresh and only continue here. And now we have our own 40 for page. So let's imagine this. What if we wanted user when it's going to get to this 404 page, we want to redirect it to our home page. In order to do so. The first thing we're going to need is a huge effect Hooke used effect hook is simply a hook that's going to run when the page first load. So let's do that. First. Let's import the US effects. Firm reacts rate. And we can use it, we can simply do here, use effects and run it as a function. After that, it takes a callback function. And here we can put the code that we want. At first we have to add here an empty array, which gonna tell this function to run when the page first load. So we want to redirect the user when he can get to a 40 four-page, right? So how can we do that? We can simply import when Peter, the function, let's call it the US Laughter. Run. Next, slash right through. Then here as an example, let's make it constant. Let's collect route on router. And that's going to take all the US router functions that we will need. That for us now, we just want to use this float and push to you the user to our homepage. Let's go back. Refresh now as you can see where it takes us to the homepage. So if we use the try to get to a 404 page is going to show that page. And we directed to our homepage. So let's add a simple trick here. What if we want to hold the user for two or three seconds and then redirected to our homepage. We can simply do that by r1, here, the set timeout function. And here for the timeout, it's going to be 2000, which is two seconds. And here we can use them. Our route dot. What's the user to go to the homepage? Let's go back now. Let's go to a route which is not found in the bank intro. And as you can see here, Peter, that film and after two seconds, it's going to take us to the homepage. 8. 7 Components: Now, let's take a look at how we can create a component inside Next JS. Well, it's actually the same as React. So let's, for example, first, make a new folder on its colleague components. Inside this folder here, Let's make a new file and let's create a component. For example, let's just call it seamless and opponent, and let's call it m for notes. Please be careful here. The first litter need to be capitalize. Since this is a component inside it, maybe we just want one. And it's gonna say this is a component to save. Let's see this component in our homepage. First lesson posted. Still import and prominent from large components. Smash the component. Right? So let's display this here. I see interests components like that. Intro less still make law on page. And here we can see our components. 9. 8 Wrapping the app (Layout): I think you have probably not less dead. Whenever we will go to a route, the whole page into Kitchener, read it. So what if we want a component to be appeared in all our pages? In order to do so, we definitely have to wrap all our app in a layout component. So let's do that. Let's go to our components here. And let's create a new component. And let's call it, for example, layout, not yes. Sfc to generate a stateless function component. And let's just call it layout. You're in this layout. We want a div, for example, with a className. That's again the simplicity layout. Okay? So in this layout, we want to put or our application. So the first thing we want to do is to go to our pages here. Income to this app dot js. And let's remove this. Who cuts. And here we want first, import our layout components. Topics imports, layout from components lashed layouts, grids to you. What I want to do is I want this layout to rep, or my application. So we will simply called the layout in inside it would work put this component would debate, perhaps interesting. So how we can access this page? Perhaps we can simply go back to our layer here. And here we can get something called children. Certainly hope order here. If we do. Children were supposed to see all our application. So let's take this up. Rush. And as you can see here in Levin has changed. Interesting. So let's see. Now we want this Hello World to disappear in all our, to appear actually an arc our pages. We can simply go back to this index and remove this Hello World. Hit Save. And let's create a component for it, a new file. Let's call it Hello. Yes, I sub c in here and let's call it low. And it's kinda simply generate for us. And it's one that's going asleep, hello world, and hit Save. So now in order to make this component here appear in old pages, we can simply go back to the layout that we have built. And let's inside this layout here, we can simply grab our hello and prominence. And well, It's important though. I'm hello. Great. So as you can see here now, our layout, it takes all the pages in this component here will appear and all the pages. So let's check this out. Now if we refresh, you can see their little world. And if we go to the About page is hello world cylinder. 10. 9 Styling: We can style our app in XJs in various ways. So let's take a look at them. The first one is the inlet solvent. We can simply type your style, open up the brackets and the weekend just change. For example, the color of go to about page to be, for example, brown. Let's go back to our egg. And here it says that there is something wrong in the index. Let's go back to the index here. India. Go back to our app. And as you can see, this has changed too brown bread. We can also make a silent by simply typing here soil. And then JSX. And inside here, we can open up the brackets and then type some vector x. And everything inside this backticks, it can be considered as a CSS file. So here we can write class names. So for example, let's write a class name called about. And inside the sidebar, we can just simply, we want to change the color of the bolt to be yellow, for example. Now we can go back to the about here, className. And let's just make it a lot. Okay, Let's go back. All right. And as you can see here, this has changed the yellow. There is also another way site or app. I simply go in here to this soils and making a new file. And let's call it, for example, hello. And got my double dot CSS. So here for example, I'll just read a class name called hello. Hello. Let's make the color red. In order to use this className in this module, we can simply go to, for example, our components in here we have the homo component. So the idea here is that we want to change this Hello World to be read by using this last name. So first things first, let's import this hello dot module dot CSS in OT soil from hello dot, dot CSS. So now we have this style, this style object. You can just like, for example, imagine it directs going to contain inside it all the signs that this file has. So here if we can just say the class name and the class name, it's going to be this, the soil dot, hello, save. Go back to our app. And as you can see here, now, hello world has become red. Just please be careful here. This has to be dot module part C says it. Another thing to pay attention to is that these models here, you do not accept global elements. So for example, if I come here and I want, for example, to modify the H1 and see here that each one make the color green, for example. Go back to our app, that's going to say was that there is a syntax error because the selector, each one is not pure. Your son electron must contain at least one local class or ID. In other words, in order to work with this selector like this, it has to be first dot hello, for example, dot-dot, each one. We cannot just select them by themselves. In order to work with such thing, we can simply write inside this trials something called the globals. Nazis us. Here we can write our default global styling, which we want to apply to our all up total, every element inside our application. So let's say that for example here, I want to make a container. In this container, I want to make the width Before example 50 percent, the margin to be 0. Portal. Okay, So this container here, we have a className. We want to pass it to our layout. So let's go back to components, layouts. And here we want this className here to be container. But even though it's still not going to apply to our application, as you can see here. In order to apply the container, we can go to our app here. And let's import the global styling. Import. Mom smiles, we want the globals, not CSS. You think normal and will have misspelled this on the scholar globals like that. Now let's go back now to our application in there. As you can see here, we have applied as soil in logistics, make vague ground to there, we can see it. So let's make a background color, blue, for example, green. Let's go back. And as you can see here, another thing maybe we want to do that. We want to apply something to each element inside our application. For example, we want to remove the default margin and padding. We can simply go back to our globals story here. Now let's make the margin and padding as well. I think Save vesicles here. This is going to be applied for every element inside our application. 11. 10 Images: In the beginning of this course, I mentioned that one of the cool features then next genius provides for us is the image component. So let's see how it works. Rapidly while building our application. We will have to deal with two kinds of images, those who are internal and external ones. So let's see first how to deal with the internal images. In order to add an image that you are next JS application, you can simply go to the public folder here and add the image. So for me here I have added an image dot JPEG in the public folder. So let's see how we can work with it. Let's go, for example, to our layout. In here. The first thing we're going to need is to import the image component from next slash image grid. We can now go inside our app type image. And here we are going to need some properties. The first property, it's going to be the SRC, which is the source of our image. So since our images in the public folder, we just need to type slash and then the name of the image. So for meetings, image not GPG, we will have to specify as well the width and the height of the image. So for me, I'm going to specify the width. It's going to be 600. And height, for example, let it be 400 pixels. Save. Let's go back to our application. Refresh. And as you can see here, we can see our image. So what about those images that are external? Which means that we were going to need to import them from other resources outside our application. Let's say for example, I have this image over here. Let's copy the URL. Let's go back to our application and we'll just change the SRC Control S. But we're going to be probably facing an error. So let's take a look at it. Let's go back to our application. It refresh. And as you can see here, it's gonna show us an error, which is that there is an invalid source, but it says that we have to add the host name of the images is not configured under the images of the next dot conflict dot js. So next year is air cylinders that we will have to go to the next the conflict WAS here and add that hostname. In order to add the host name, you can simply type your images to a point like that and an object. And this object will have specified domains like that, which is an array where we're going to add all our host names. So let's go back to the directors, to the app. And this is the host name that we will need to add Control C and Control V here. Let's save. When you modify the next dot conflict ab.js, you're going to have to restart the server so that it can recognize the changes that happened in flight. So Command G to open the terminal. And as you can see here, it's telling us that there is a change in the next dot conflict or JS. So we must restart the server to see the changes. So with Control C, we can kill the server. And in order to run it again, we can simply type npm, run dev, hit Enter. And now you can see that this is compiled successfully, which means that if we go to our app and we can see the image that we want. 12. 11 The Head Component: Next, JS provides for us the head component, which happens to be the same as the element that we used to have inside HTML. So let's see how we can use it. So for example, for me, let's go to Pages and I would like to use it in my index page, the homepage. So first for logistic import, the hurt from next slash kept for me it just like using a simple HTML page. I like to put the head element on the top of my component. So here we have the head. And let's see what we can do inside it. Here. A little pseudocode tells us that this component injects element to head, which is the same as the HTML. So for example, maybe we can give our homepage a title and let's resample call it home. Learn. Next DOJ S to save. Let's go back to our app. And as you can see, home, learn next pointer. Yes, great. So what we can do now is maybe we would like to use some other tags. So let us use the metadata. For example, we can specify here Mehta. And then for example, we can say that the name here we want the keywords. And here for example, that the content, let's add some keywords so that they will help our website to arms kill more when it comes to the search engines. So this is what is called to improve your search engine optimization. For example, here, since this website, we assume that it will be 4 then in next. So let's put, for example, next Node.JS, JavaScript and maybe even react and so on and so forth. 13. 13 Data Fetching getStaticPaths(): After reflection, all the to do's, let's now try to make a separate page for each to do. So. First of all, if we take a look at this API, it has an endpoint there. Maybe if we pass slash one, it's going to give us the first to do. If we pass slash 3 is going to give me the third two. That's amazing. Sinologist come back to all the to-dos. Let's see how we can build static pages for it to do. So first, let's go inside pages and let's make a new folder. And let's call it, for example, to-dos. In here inside this folder, Let's make a new file. And we want it to be dynamic. So we can just like make some square brackets and inside the wasp put the ID dot js, since we are going to be using the ID to generate those breaths. Press enter into your with SFC, and let's, for example, name it to pinch. Okay, great. Now inside this to do here, logistics, make in each one and just leave it empty for now. So the first thing we're going to be using is to export an asynchronous function. And it's going to be called kept steric, but this time our props, It's going to be pets. Let's make a request costs requests, and let's make the request to all the to-dos. Absolutely GET request. Let's say for example, called the to-dos here. We're going to be waiting for the request to turn it from JSON. Great, Now we have all the tools we want to create pets or it's to do. So, let's make her, for example, fast Scott Betts. And let's take all those to-dos and maps are loaded. It's going to generate for us a to-do. Then here Let's see what we can do with it. So what do we want from each to do is simply return for us here, something called the verbs. In inside the parameters. It's going to be an object that takes my D. And from where we're gonna get the ID from the todo dot ID, Collins journey to string. Great. So now we have here inside this pets, all the birds, all, it's do's. Let's go here. And now let's just return the pets to return for us to pass in the fall work. Great. So now in order to make static page for each path here, we have to use the function that we use in the last lecture. So please just export an asynchronous function. And this time it can record, get steric prompts. And here in order to access the context of all this here. But just space here becomes fixed. So here I'm going to just make any requests. Let's fetch everything. For example, how this is going to work is that we're going to be friction by the ID. So for example, if we type here, five is going to generate for us to do. So. Let's take this, copy, this here, but we don't want it to fit here. A certain number of social ID. We want it to fit the id, then we are going to provide. So let's just type here plus the ID from where are we going to generate this ID? Where we're simply here, Clear Console ID. And that's gonna, we're gonna bring it from the context that we have as a parameter to this function and get from it those params and their ID. Okay, so now we will fetch a to-do geologists to make a const called to do. And that will be equal to the weight or the request boundary. So worried. So now we can return drops that the black that. So let's see what we want to do with it, since we can access it now from here to do. And for example, in every page I want to generate in the H1 there to do dot title. Let's save. And let's see what we will get. For example, now, if we go to slash, todos, slash, for example, the fifth one and enter that 0. We will get there. As you can see here, it says the risk is not defined. So let's see what we have done wrong. So here we have made a huge mistake. We shouldn't be here calling the race, calling the req. It's my bed. And just severe. Go back to our app, refresh. And as you can see, you generate for us the title. For example, if we go to the second one here, as you can see, remember the silo would make, I don't know even what is this language. And here if we go to the second and as you can see, the same tiles. 14. 12 Data Fetching getStaticProps(): In order to generate static pages. Next, JS provides for us a function called get Cyrillic bras. So let's use it. So first thing that you're no iron inside the index page, choose a homepage. First thing I wanted to lose us to delete. Everything can just leave the head so that we can focus more on what's we're going to create. So let's go down here and let's create the function that's going to be responsible for fetching the data from an API so that we can generate some static pages. So first, let's export that a function and let it be an asynchronous function. And its name is going to get static. Props just like that. So the first thing is then we need to make a request. So costs, for example, called wreck, and that's going to be a wheat for fetching the data. For me, I'm just going to reuse on dummy data from a website called JSON placeholder. That time we slash todos. Solids. Use it in order to fetch all these students. Let's go back to wherever you have lunches to place it inside the fetch. Here, let's make a const, which is going to be the data and logistics await for their requests and turn it to the side. Now, since we have an ordered data here, we want to pass it to our page. The way we can do that, it's simply write, return an object. And here we would say prompts. In those prompts here, you're going to have Core Data. So now if we go up to our page here, we can bring that data. So let's use it for example, in order to generate all these titles of the students. In order to do so, we're going to have to write some JavaScript. So let's take that data here and map through it. And when we mapped through it, we will get, for example, a certain want to do. And then we can just make an H1 inside each one. I don't want that to do. Dot title. This is the total. So let's go back to our app. Wait for it to refresh. And as you can see here, we have generated all the titles from this API. 15. 14 Deployment: Now let's take a look at how we can deploy our index.js application on for me, I'm going to be used in oversell by the waiver cell is the creator of x js provides for us a simple way to do to deploy our next JS application. And you can sign up and sought for free just to go to the sign-up here. And Dan, you can come see me or wind whatever whatever type of offer, e-mail or GitHub or GitLab that you want to sign up with for, for us, we're going to just keep it simple. I'm going to just continue with email. And here you just like base your, your email. I have already signed off. And so this is the interface that you're going to see if you go to after signing in and we're not going to be touching anything year. Most of the things we're going to do just into terminal for cell provides us, for us, provides for us to stay alive, to easily deploy our, our application. So first things first, let's just make sudo npm install and globally and tidy verse cell. So now if we press Enter, by the way, when we type sudo and to begin in because we want to install this sale LIGO for sale globally. And dad might ask for your, for your permission and to actually type your password if your machine, if it already has one. So after data, you're going to find out that their salary is already installed in your, in your, in your machine, and then you can use Excel. The first thing I'm going to be doing here is that let's see d to the desktop. And after that, let's see the two learning next to his own project. Okay, So now we're trying to, to deploy that horrible WHO website that we made. So now we're inside on Glennon and learning next time folder. So let me just type here, prefer cell. And as you can see here, it's going to ask me to login with either GitHub, good lab, Bitbucket email or deaths in Goldstein. And one. For me, I'm just going to go with the e-mail here. It's going to ask me to paste my e-mail. And feudal is pleased to e-mail. And as you can see that it's going to say dat waiting for confirmation, we just need to go back to our email here and you will find out a message now here and just type verifier. So as you can see you and that's going to say verifying after dad, he says that e-mail address confirmed. So let's get back here and go as you can see, Save. Congratulations, you are now logged in. So this is Control L to delete everything can, Let's talk developing and deploying in our website. So in order to deploy our website, you can simply just type another time for cell. And just like as you can see, a diverse cell CLI and just sigh EPS for whatever I might pick it up for you. As you can see, it was going to ask us whether we want to override some settings and all that. I want to keep it simple. So just keep typing. Press enter. I'm just going to pause the video until deployment. And okay, so now I'm actually deployment has ended on and you can see kinda show was dad on the production and it's going to give us this on this link which is on the length of our websites logistics copy it. Go back to our website is still 0. And if we go to Versaille the dashboards, and it's going to show us some our project. And if we click on it, it's going to show us so many details about it. And I like deployment. Url can get it from here as well. And we can even visit our website. So let's just paste that link over here. And as you can see here now, our web applications on the Web Legacy sit out on like for example, does go to, to do's slash om six for example. And as you can see here that it gives us the to do. And if we try to go to the About page, now, you can see that this is a multipage. And if we try to grow to a round through which does not exist. So I, for example, the contact page that's going to show us a 404 page and a half to two or three seconds. It's kinda read direct us to the homepage. 16. 15 Incremental Static Regenration: In the beginning of this course, I have mentioned that one of the cool features that next j is provided for us is the incremental static regeneration. So now let's take a look at it. So the incremental static as generation, it's simply means to add or we can create and update our static pages even after we have built our website. In other words, we can update that static content instantly without the need to fully rebuild our website over and over. I have here some, an example, which is, which is that if we have an API, so imagine it would mean that this is a blog and this is our API. And when we finished golden and real dot-product and deployed traversal. And these are the pages that we have for the cost. I mean, we have all these reposts and hear what a user will see when he's going to get to our website, only those three posts. So what is the need for an incremental static regeneration? So imagine with me if this were, if this API here, we have added another posts, for example, let's call it posts for. We're also now, if we just think about this statically and the only way we can now update our website on the server is simply by rebuild that project again and deploy it all over again to oversell. So by using the incremental static or regeneration, by the way, it's used here in the good static props where turned the prompts with the data and after a doubt, and we can just say here revalidate 10. And this will attempt to regenerate the page. And when a request comes in, as we will see in the example, and at most once every ten seconds. So this is actually in seconds. So what's going to happen now? Well, when you're going to deploy your website using this revalidate 10. It's like the website on the server. It's going to always keep that connection between our, between, between it and the API. So now when the API get changed, the first user that we'll get into our website that's going to send a request to check whether we still have the same data here. So as soon as it's going to figure out that this data here has changed. So dad's going to update our website here on the server in after a dose seconds that we have. We have specified here, which means 10. So after 10 seconds to second website, that's gonna get to our website, he's gonna see this fault the website. So we'll use an incremental static regeneration. We make sure that we don't have to rebuild our project over and over again. And I had the same time we can keep bed static, but at the same time, dynamic and amp connected to our API. 17. Congratulations : So that's it. Congratulations for completing the fundamentals of Next JS. I hope that you know now how to deal with next GSA and how it works and what he's capable off. But still the best way to learn is by practicing, especially for programming. That's why we will try to put everything we have learned so far to build a real project, I'm going to probably drop another course sort where we will build a real project using x js. So stay tuned for that. Until then. I really would like to say that I'm really sorry for you if I didn't if I didn't know how to explain something or if you didn't understand something. And I just would like to thank you for your time and see you in the next course. Bye bye.