Static Site Generation in Next.js

getStaticProps and getStaticPaths in Next.js

Static Site Generation (SSG) is one the great ways in which we can generate webpages in Next.js.

I have a blog post called Why I Love Using Next.js which gives a high-level overview of Next.js if you are unfamiliar with what Next.js is all about.

SSG Functions

Firstly, let's talk about the two functions built in to Next.js that we can use, called 'getStaticProps' and 'getStaticPaths'.

These functions are called at build time which means that when you deploy your website, it will go and fetch all the required data and pre-render out each page to be served by the server.

This data could be a list of blog posts that you will 'map' over and render out as a list on the page.

This is a good time to show what I mean in action.

getStaticProps

getStaticProps function

This is the getStaticProps function on my blog index page. This function is ran at build time, and every 600 seconds (10 minutes) to fetch new data from Prismic CMS for my blog posts.

Firstly it will assign a variable named 'blogs' which is asynchronously waiting for the response back from the Prismic CMS.

Once it has returned back the data, it will pass the blogs variable as a prop into my webpage so I can refer to it.

The 'revalidate' property is very handy because it means I don't have to manually build the web app every time some new blog post is created or updated on Prismic. That would be a pain!

getStaticPaths

So suppose you are creating a blog, you will want to have dynamic URL slugs for each blog post. This works by pre-rendering out the HTML for a list of paths that is using getStaticProps.

So your getStaticPaths will run first which then fetches back a list of post URL slugs. This will be passed into the getStaticProps function to then execute individually on each one and create a static HTML page for each.

getStaticPaths and getStaticProps function

In this image you will see exact code I am using on the dynamic [slug].js page inside the blog directory.

Here you can see the getStaticPaths function running first which will collect a list of slug names based off the list of posts in the CMS.

Slug names

It passes these slugs into the params object.

In the getStaticProps we are then referencing the context parameter which will have our slug we passed in before.

Context object

This is the context object inside the 'What is Node.js and Should I Learn it in 2021?' article.

We can then get all the data required for the blog post based off that slug and render the page.

This is the function that took me a while to grasp but I hope this helps!

I would like to point out one key thing to making this work properly and not having to manually re-build the website every time a new blog post is made.

That's the 'Fallback' property!

What Is The Fallback Property?

The fallback property is used on getStaticPaths for when you want to change the behaviour of getStaticProps. Usually what will happen is the getStaticPaths and getStaticProps will run at build time and pre-render all the webpages.

Any new blog posts for example that needs a dynamic route linking to the article will need to be updated on the website. However, the website will have been built already so any new blog post will have no data fetched to it on the website.

The fallback property will make it so that when a user tries to go to the new blog post for the first time, it will check with the CMS to see if there is any URL and content related to that URL.

If so, it will re-run getStaticPaths and getStaticProps to supply the website with the most up-to date information.

I stumbled up on this recently when I couldn't figure out why I was receiving a 404 error for new blog posts.

Conclusion

At first these concepts can be quite hard to grasp but it will eventually 'click'!

I recommend reading more about SSG on the Next.js Data Fetching Documentation.

The Net Ninja has a great YouTube playlist covering Next.js and he is very good at explaining the data fetching concepts!

Join the mailing list!