Understanding Next.js GetStaticProps
A Next.js page component has two interesting functions getStaticProps and getStaticPaths.
In this lesson we're going to look into getStaticProps to get a basic understanding of what it does and why it will be useful for our final target of creating a statically rendered portfolio site with Next.js
Prefer to read along as well? Here's the accompanying article.
Instructor: [0:00] Now that we have our About page ready, we definitely want to learn some of the basics of Next.js. I definitely don't want to go into the details of how Next works as there are a lot of courses and other resources around. Definitely check those out.
[0:14] We are going to explore just enough for our course here and for building our portfolio site. There are two main properties or two main functions of a Next.js component. There is the getStaticProps and the getStaticPaths. Let's focus first on the getStaticProps.
[0:32] If you go over to the Next.js docs, there is some good details on how the getStaticProps works. Overall, what it helps us is to define how Next.js would pre-render the page at build time. That's the important point here.
[0:45] GetStartedProps runs at build time, which means that it also allows us at that point to read from the local file system, which is really powerful, and which is also what we will need later on. Basically, it gets a context object.
[0:59] It can potentially get params from some root parameters when pages are being dynamicly rendered. We will have a look at that soon. Then in the end, it should return an optional props object, which will then be passed onto the actual page component or the React component.
[1:14] Let's have a look at a very simple example. What we want to do is first of all, define the function. We have the getStaticProps. I definitely want to type this so we can pass in getStaticProps. Since we're already using TypeScript.
[1:30] I might want to use the about props, which is basically what our component here gets. We can define here that interface and what I would like to pass is something like the name.
[1:43] Then let's define this as an async function, which takes the context object, which you have just seen in the documentation. Here now at this point, we need to return an object.
[1:55] We want to return also the props property and that props property should have some arguments on property called name as we just defined. In this case, let's just hard code it. I'm just returning here name Yuri.
[2:09] What happens is now, this props object is being returned and this will be passed as an input of our component here. What we could do here, let's distract trail. Let's say here name comes in and so here we could then simply change this one here and say, "Welcome, Yuri."
[2:29] If we save this and run through this again, refresh here, you can see now that our page reflects the change by using the property passed on from the getStaticProps.