Jamstack Explorers

Next.js from the Ground Up with Cassidy Williams

Next.js Pages and Content

I'll show people how page components are different from regular React components, and how the method getStaticProps works.


[00:00:00] Let's talk a little bit about page components in Next.js. Now I mentioned before how pages are the bread and butter of how Next.js works, [00:00:10] but I'd like to get a little bit deeper than that. Now by default, Next.js pre-renders every single page that you or your user sees. That means that Next.js generates HTML [00:00:20] for every page in advance, instead of having it done by client-side JavaScript. Again, this is why Next.js became popular because it used [00:00:30] to react without doing everything client-side. Pre-rendering can result in a much better performance and search engine optimization. Like I mentioned in the intro, Next.js [00:00:40] first became popular for server-side rendering but has since changed its tune to preferring static generation in a more JAMstack approach for performance reasons. Every single generated HTML [00:00:50] page is associated with just a little bit of JavaScript code, the minimal amount necessary for that page, because Next.js does automatic code-splitting, meaning it only loads the code [00:01:00] needed to the users. If you look at our current page component here, this page does not need to fetch any external data to be pre-rendered. [00:01:10] For this, Next.js generates a single HTML file for this page. If I wanted to make another page, I could say Pokemon, [00:01:20] let's just say Pokemon.js. Now, if I were to copy this exactly over to Pokemon.js, we'll rename it to Pokemon [00:01:30] here, Pokemon here, and we say welcome Pokemon fan. I'm assuming you're a Pokemon fan as I am. Now, [00:01:40] if we were to actually go to the browser and then go to /Pokemon here, it has generated another page based on that [00:01:50] file. Again, this is a single HTML file per page at build time. I emphasize at build time because it's not happening at runtime. [00:02:00] The users are getting something that has already been made, so no JavaScript has to be run to be able to load up this page. Now, some [00:02:10] pages that you might have might require some fetching of external data for this pre-rendering. There are two scenarios where this might happen, where the content depends on that [00:02:20] external data or the actual paths themselves depend on external data. In this section, we're just going to be talking about the content. Page components in [00:02:30] Next.js have access to a special function called getStaticProps. We can write export async [00:02:40] function getStaticProps just like this. Now, this function gets called at build time. Meaning that the data that you get in [00:02:50] getStaticProps can be passed to the actual page component right here, and because it's called at builds time, you don't need to call any APIs [00:03:00] when the page runs or at runtime. For example, I could say that we want a response here. We're going to await [00:03:10] some API. We could say, let's just say, there's posts that we [00:03:20] want. The return value is an object called props. [00:03:30] Then inside of there are any props that you wanted to do. In this example, it would be posts. Then up [00:03:40] here in the component, we would have access to posts. You can make, for example, a blog post and have the content in there. Now let's actually use a real [00:03:50] API for this. Instead of posts, let's actually get some Pokemon and inside of fetch, we can call the pokeapi. Now, if you [00:04:00] haven't used it before, it's at pokeapi.co, you can copy this line here. It's pokeapi.co/api/v2/pokemon, [00:04:10] and then whatever Pokemon you want to pass in here. I'm going to do Charmander. Now, instead of posts, I'm going to call this Pokemon [00:04:20] and I'm going to put that inside of the object. Now, this is what is passed in to our page component at the top. Now [00:04:30] I wanted to use this Pokemon variable. You can use it however you want. You can look at the API and all of the options here, but I just pulled in the name and then one of the sprites from [00:04:40] there. If I were to go back to the browser, hey, you can see that we've got Charmander and we've got a little Sprite there. Again, this happens at builds time. If you [00:04:50] were to actually deploy this to Netlify or whatever host you use, that API call happens when the site is being built. Later, [00:05:00] when the user loads up the page, they don't have to wait for the API to be called. It's already done and the data will already be on the page. Now, of course, [00:05:10] if you need more dynamic data and you need to call things on user requests, you can totally do that. That's fine, but this getStaticProps function is what you want to run [00:05:20] things at build time. Now, I also mentioned that there's another function called getStaticPaths and that's for dynamic paths. We will talk about that a little bit later, [00:05:30] but for right now, let's transition a little bit to talk about the head API. It's a really cool one and I'm excited to talk to you about it. [00:05:40]


your progress