Next.js Static Site Generation (SSG) Tutorial

the next years framework now has static site generation and this video we're taking a look at exactly how that works if you'd like to follow along with this video I'm gonna be starting from a blank next jazz project and the way I generated that is just by running MPX create next app in my terminal and then you also specify the name of your project or folder in this case I just called it test blog and then if you open up or if you run this command and open up the folder what's gonna look like is the following on the left here I just have this open vs code and then there should be a single page inside there called index GS and this is where going to start from now the thing with static site generation is it's great when you have a lot of different pages on your site which are basically the same thing you have kind of like a template that you want to reuse but you want to put different data in it and this data you know you have available to you at build time or you want to generate these pages ahead of time and put on your website and so a great use case for this is a blog and so what I figured I'd do is I kind of tempted to remake my own blog with next yes now our blog is super simple all I have is two posts and the way that I do it is I write my posts in markdown so this is the first post this is just an FAQ and how my posts work is at the top there is some metadata in the markdown and notice the file is called MD and that's because it's written in markdown and here's just you know the title in the description this is kind of metadata that I want on the page and then below here's actual content of the page and it's written in markdown here's another one right here and I'll link both of these articles our markdown files in the description if you want to follow along and use the exact same markdown as me otherwise you can write your own mark down and use the posts like this so this is basically the data for my site and with static site generation there's basically two things you'd have your template and then you need to have the data that you need to pump through your template to generate the pages alright so what this is the data I'm going to be using now let's start with creating the template so what I'm going to do is I'm going to create a new file here and now you'll notice I have two different posts and so I want these to be on two different pages and I may have 20 different posts I want them to be on 20 different post pages so if we want dynamic pages we're going to need dynamic routes and so the way you do this in to us is to do brackets in your file name and inside of this give your you know the dynamic name a parameter name so the parameter name I'm gonna use this call it slug and I'm gonna call it slug GS so this may look a little weird for a file name but that is basically a variable inside the file name and so we're actually gonna use the slug name there in art code and then I'm just going to import from react because we're gonna be doing some react stuff and then I'm going to start off with a export defaults and we're gonna create a post component so I'm gonna just say up here comments post and for now we're just going to return a div that says hello alright so this is how we would normally do things in next yes we have a component that we write and then we export that component and next yes we'll create a route for us based on that now next is introduce two new functions that we can use for static site generation so the first one that we are going to start off with is called get static paths and this is going to be a function that we are going to fill in and this function is also asynchronous an important part about this function is we're also exporting it so that way next yes can import this and do the things that it needs to do now what we're going to return here is an object and it's going to have two things a paths property and this is going to be an array which we're going to fill out in a second and then the second property is called fallback which we're gonna set to false for now and saying it to false just means we're gonna build everything at Build time and we're gonna talk more about what fallback does later and what true will do alright so what the paths is going to be here is I mentioned that we may have twenty different pages and you know we may have twenty different routes that we want to create and so here we need to tell next yes what those different paths are and so we have an async function here where we can run some code and generate what those paths are going to be so in my case what I want to do is I want to create a path or sorry a page per post that I have here and so next years gives us a function but there's no tooling around kind of doing this stuff so we have to write all the code for how this works ourself so what we're going to do is we're going to actually import a node module here called filesystem or FS so this is actually gonna run on the server or on our computer so we don't have to worry about you know this is only accessible if we have access to node it won't work in the browser but that's okay because this is gonna be running on the server so what we're gonna do here is just read the files in this folder here to get the different paths so what I did is you'll notice I kind of named these different markdown files FAQ and I put dashes in the docker Linux access localhost post and so I'm gonna use that as the slug or the path for my particular page so what I'm going to do here and so I'm gonna say Const files is equal to FS dot read file I'm sorry reader sync now a sync just means it's not going to return a promise we could also use the asynchronous one because we can await things since this is an async function I'm just gonna make it synchronous to keep it simple and we're just gonna read the posts folder and so what this will do is this will give us an array of strings back and just the filenames inside of the folder now notice there is a dot MD at the end there so I want to strip that out and so what I'm going to do here is the path I'm gonna say files dot map so we're gonna create some different objects here and so this is going to be the file name and we're going to return an object and this object here is going to have the following key called prams and params we're just going to pass in the parameters for this particular page so you notice how we called this thing slug there we're gonna have to use slug here so all the params are gonna pass in here and then I'm just gonna say file a name and I'm gonna say replace I'm gonna get rid of dot MD and just do an empty string and just to show you what this looks like for the paths and the files I'm going to console.log both of them so a line I just say paths and bring this up here and then down here I'm just going to return the variable and then I'm gonna console.log paths and let's console.log files all right so now when this function runs we can see what the output of these guys are and you'll see this makes a lot of sense and then there's another function we are now going to use to actually fetch the content of the post so I'm going to say export can't get static props and again you'll notice we're exporting this and we're also going to make this async and here I'm gonna return props so we're doing an object with props inside of it and anything we put in this props object is going to be passed to our component and so what this function gets passed is the parameter that we need to fetch data for so we're going to D structure this we're gonna say prams and then we know the name of our parameter is slug here and then we just pass any kind of data that we want to here in this case I'm just going to pass the slug in for now later on we're gonna add some more stuff to this but for now just to show you how this all comes together we're gonna pass in slug here so then in my post here I can access that prop which is called slug and I'm going to display it here so the slug for this page is and then we'll display the slug so basically these are the two functions that we're going to be dealing with and then this is the template part of our static site generation and these two functions deal with how the data that we need for our template and this particular one we create the different paths that we need and for this one we fetch the data which we haven't done quite yet because I just wanted to render this and make sure it's working so far so what I'm going to do is I want to say yarn def or you can do npm dev I guess NPM run dev and if we look at our package JSON this just runs next step and this starts up a local server which we can actually go look at this so I'm gonna keep my log open because I want to see these console logs and I'm just gonna come over to my browser over here I'm on localhost 3000 and go to /faq and you can see this is going to be i haven't actually gone to this page yet this is just the index page and i don't need to name this stuff in index IGS so why don't I just clear that out to make it simple and actually why don't we create a why don't we create a link so I'm going to create a link here that way we can go to our FAQ page so this is how you create a link in next yes so I just went to the index ijs file and I cleared out everything and here I'm just going to say go to FAQ and we're gonna say href slash and then up here I'm an import FAQ or sorry link from and this is going to be next slash link and I don't need this class name so link is a special component from next yes that you can actually use to navigate pages and then this is the syntax that you use your href here and then this is just the text that you want to display alright so now I see my link here and I'm just going to click it to go to the FAQ and then I notice how the URL changes we're on FAQ and says this slug is for the page FAQ and now if I go I'm gonna open this up so you can see our console.log should fire and if I open that this up I see it so you can see these are the pages that were created so you'll notice how we read the files from our file system in this case we have two files this one and this one and then all I did was I generated the paths or the pages based on that so we have two pages one of them is this one and the other one is this one so now I can go to either one of these URLs so I could also go here if I wanted to do slash d-doctor links access localhost and you'll see this now if I were to go to any other page like random post all right it's gonna tell me 404 because this page has not been created all right so that's what our setup is so really the next step is to actually display the content of our post here so we kind of have this all wired up and we saw how we are feeding the data in the next part is to actually you know passes so when we actually go to one of these pages to get the data that is actually displayed here we need to do stuff in art get static props and then we have access to that inside our component here so what I'm going to do is I'm going to take this slug and I'm going to read the markdown that we have over here all right so let's start with the file system and we are going to read a file and we're going to read this file synchronously so here I'm gonna say contents is equal to FS read file and I'm going to say path join and here I'm going to import join our sorry path so this is another node module you don't need to install anything install anything to get access to this and what we'll do here is the contents of our markdown file we're just going to read so all we're gonna do is we're gonna say posts and we're gonna have slug and you'll remember our slug here doesn't have dot MD at the end so we need to add that back here to actually read the file so we can say plus MD and the reason why I'm doing path join is this we'll just build the path no matter what file system you're on correctly so if you're on a Mac it'll do or Linux it'll do post /faq MD but if you're on a Windows machine it may use a backslash like that so path dot join just make sure it works correctly and joins them with the right stuff all right so I can now just pass the contents in here so you can see what the contents is and here I'm just going to display the contents so I'm going to say div contents below and I'm gonna just stick this in a pre tag so I got rid of the slug I'm now going to import or grab the contents problem alright so now I'm going to refresh the page air sterilizing contents I mess something up I thought I was thinking contents was going to be a string but it looks like it's a buffer because that's what this returns like I just have to say to string so that's another thing that's important to note you cannot pass objects or it needs to be serialized objects to this particular object right so it has to be numbers floats boolean strings and we just saw if you don't do that we get an error that says it's not serializable actually let me show you that error see in case you run across it you can just make sure all right so remember this error if you get JSON is not serializable that is why in this case I was passing a buffer all right so let's put this back in at all to string it and now we can see the contents of our block right but we also see like the metadata up here and this is not basically mark downing it like it's not turning into an HTML file and that's really the next step that we need to do and again next us doesn't have any tooling for us yet and so we are going to actually do that ourselves so the first thing we're going to do is parse that metadata that we have at the top there so a popular library to do this is called gray matter and all that gray matter does is takes this and sticks it in an object for us so we can give it a string and it's going to generate an object like this that we can actually access all right so we're going to install gray matter and just use it like this so actually let's copy this and then we just call it like this all right so I'm gonna say yarn add gray matter and then I'm going to import matter from gray matter and then here I'm just gonna call this markdown and then the contents of the page I'm actually going to or I can call this markdown with metadata all right and then we're just gonna say here this is going to be parsed markdown is going to be matter and we're gonna just pass our markdown with metadata all right so what this is going to give us is the contents all right and we can also we can actually just pass this directly in if we want to and then the data is going to be parsed markdown data and then here I can actually access contents and data and then what I can do is I'm going to do a fragment and up here I'm gonna say a head tag and I'm gonna import that from next slash head and what this allows us to do is we can say update the title alright so data title so I'd like the title of my page to match whatever I put here and so what that will do we come back to our code over here i refresh oh I need to restart my server so run yarn dev again and I will let this boot up and I refresh you'll notice the metadata is gone from the page now and now it's in my title which is exactly what I want and if I go to /faq it's gonna update the title of my page to what I have there so awesome alright and then you'll notice I also have the description if I wanted to I can add a meta tag for that to be honest I even remember what the syntax for this is I think it's like title and this I'll say description and the content is going to be data description this might be the right meta tag I can't remember to be totally honest but that will give you the idea we can get whatever data we want here and we can update meta tags like this if we want to alright so the last step is to actually get our markdown to render we haven't done that yet all that gray matter does is parse out the metadata it doesn't actually take the parsed markdown and turn it into HTML and so for that we're gonna use a separate markdown parser and so I'm going to use a parser called marked but honestly you get to choose your favorite one here because you're building it remark is another popular one with a bunch of different plugins you might like that one and so all we're gonna do with this is install this do npm install marked or i'm doing our nad and we're just gonna import marked from marked and then down here we're going to say HTML string is equal to marked parsed markdown content so what this does is it's going to take the HTML markdown or sorry the markdown string which is in the content right there and it's going to turn it into an HTML string so that's what I'm I pass in here and then I'm going to access this HTML string instead of contents here and then react to render an HTML string what we do is we say div and we say dangerously set enter HTML and we pass in an object and we say underscore underscore HTML and then we pass in that HTML string all right and we'll give that a save and now I'm gonna come over to my faq and I'm gonna refresh the page I need to start my server first and now that markdown should be turned into HTML so the hash tags should be turned into divs and or sorry headers if we refresh this we can see if that's the case and awesome it is so now we can see the page our markdown page has been rendered and if I go back to our home page or our Linux one that one should hopefully be as well oh this is the slash blog we're gonna do that in a second all right we can see this page is also being rendered as well so awesome so we got it now working that we can parse the data in this case we're getting our data locally from some markdown files and then we're just parsing those files and you get static props which we pass to our component and then our component just uses that to render it and one thing that I wanted to mention as well with this is a lot of times you may want to give your you know your pages a prefix so in this case I can just create a new folder for example blog and I can stick the slug folder sorry while inside of the blog folder so now the path is going to be slash blog a slash slug is and then all that does is now this file does not exist we have to go to slash blog and then the doc or - Linux - access right and same with FAQ now we have a nice blog indention and now if I come back over to my home page I can have a single link that was the other thing I want to show you so on our home page now I might want to link to each one of my posts right that's a very common thing you may want to do and so what we can do is we don't actually want to statically generate anything on this page or stack site generation on this particular home page we just want to get some static data and so we can use that static function so I can say export kant's get static props here and I can make this a sink as well so I don't have to actually use the get static paths and every page if I don't want to generate any pages so in this case I just want to pass in some props so in this case what I want to do is the same thing I'm doing my slug over here is just read the posts directory so I can get these files and I just need to import file system from FS and so in the props here what I can do is I can pass in the files alright and if I want to instead call it like posts and do files map and maybe just replace the file name could do it like that and then I can access it here so I have access to posts and I can say post map for each post and really this is not really a post it's really just a slug so why don't we call it slugs so for each slug I can render a link all right so we have our slugs we're mapping through and I'm gonna give this a key because we're mapping through every time you do an array and react you wanna add a key I could do our slug and then our href is going to be all right slash blog slash and then we add the slug and then we may want to do the same thing here as well all right for the content here so you can see where you're going so here I can say slugs and now let's go to this page refresh well you know what they're all mashing together let's wrap these in a div then and so I need to make sure to move the key up to the div here you just want to add the key to the component that's at the outer level and that's gonna be the diff all right so now I can see that the pages on my blog and now I can click and access them and then go back go to my FAQ and then now I have this whole system set up what I can do is I can add a new post like my first day MD I can add whatever content I want to add here can I have my description all right I don't know you get the gist you can write a better blogpost okay it's just three ticks not four and there you go now if I come back over here i refresh the page there's now a new blog post right that I read from the file system and we can access that and we can see our blog their tests and we can see the stuff so now we have this whole system set up we can add blog posts it's all going to work and generate the pages for us one last thing I wanted to mention about static sites like that that you're generating is how to actually go about the polling them so once we have this all set up and we're happy with this and we want to actually publish this to the Internet how do we do that with next jeaious so to actually do this the first thing you're going to do is run Yarn built so next yes actually he already has in the package of JSON a build command that you can run and that will create basically a output of a generated XJS project and then to make it static add a new script here called export and then there's a command called next export which will take the built next GS code and generate a static site from it all right so I'm just gonna come up over here and the cool thing about this is when you run yarn build you can also see the different pages that you have created and you can also see what kind of pages they are so you can see that we have two pages the index page and the blog page what we also have this 404 but the blog page are the two that we statically generated or static site generation you can see that down here it has this symbol associated with it and then after this is built and you can see this page sizes and all that fun stuff we can say yarn export and what this will do is they'll generate that static site I was talking about and if you go to the outfile so you should have gotten a new file and the folder over here called out and you can actually see this is where your code is so you can see this is XHTML and if I save this I can see the styled page in this case I can see the links in here and if I go to blog I can see the different FAQ to HTML and my daugher and my first day and you can see all the HTML output so then this out file here I can then upload to anywhere that can deploy or host HTML files and that's pretty much all there is to deploying this and if you wanted to just test this locally you can run MPX serve this starts up a local file system or sorry a local server which can just serve HTML files and you just point it at the out folder and then you can go to the I believe it's locos five thousand and we'll see when this is done here yep five thousand and this will actually let you copy this a view the created site so this is the from static HTML that we built and then we can access this and you can see this is my generated site so again this is what you would actually just upload to say s3 or wherever you wanted to actually deploy this all right but there you go that is an introduction into next yes static site generation and as you can see the get static paths and the get static props are very flexible you can write whatever code you want inside of there and you can create kind of your own tooling we ended up reading files from the file system but that could have been a fetch to an API to get the posts if you want to work with say like a headless CMS or something like that we could but if you liked this video let me know in the comments below and I can do some more next GS videos we didn't end up covering the fallback prop so we can talk about that in a future video and how this interacts with server-side rendering you

Channel: Ben Awad

Views: 58,142

Rating: 4.961791 out of 5

Keywords: Next.js, Static Site Generation, Next.js Static Site Generation, SSG, next.js ssg, next.js ssg tutorial, Next.js Static Site Generation Tutorial

Id: pY0vWYLDDco

Length: 27min 31sec (1651 seconds)

Published: Tue Mar 24 2020

Reddit Comments

[u/benawad]

Next.js recently introduced Static Site Generation, and in this video I show you how to use it.

[u/b7th]

Nice! Been thinking of moving my site to nextjs! Very helpful video!