I completed a website using Next.js (a React variant) for a church in San Antonio, TX.  Next.js is a popular choice currently because it delivers websites with blazing fast speed.  Websites can be judged on how quickly they load (often monitored through Google Lighthouse).  Fast websites keep users happy and matter even more for people on slower cell connections.

## The Problem
Many websites manage changing content by generating pages in real-time.  When you visit a webpage a computer somewhere often checks a database for the latest version of that page’s “stuff”.  Then that computer packages the content into a page and sends it to you.  That can take a while.

## The Solution
Next.js uses Static Site Generation (SSG) to render webpages ahead of time.  Pages are “pre-baked” so they can be delivered more quickly.  I’ve known SSG exists for a while now but couldn’t find an answer to one important question: “how do I automatically update a pre-baked site when content changes”?


## But How?
### Revalidation v. Rebuilding The Site

One way to automatically update a Next.js site is with revalidation (officially named Incremental Static Regeneration).  With revalidation Next.js sends pre-rendered pages back to users and simultaneously checks for updates.  If a pre-rendered page is out of date Next.js re-renders that page for future visitors.

Revalidation is awesome!  But it fails when a route (or slug, page, or address) is added or deleted.  Next.js doesn’t cook up new routes or paths without rebuilding the entire site.

### Triggering Rebuilds
Next.js can also update content with standard SSG: meaning the whole site is rebuilt when triggered.  This takes about 30 seconds for my site containing about 50 pages.

How do you trigger Next.js to rebuild a whole site?  For me the answer is “with a webhook”.  Webhooks really are awesome.  I found webhooks intimidating a year or two ago but learned it was critical for making static site generation work.  

When someone adds or deletes an entry in my CMS (Strapi) that CMS triggers a webhook to an IP address with a specific port and password.  I setup my server to listen on that port.  It checks the password and if approved the server rebuilds the site.  Voila, 30 seconds later those new paths/slugs/pages come alive.  The 50 or so pages are rebuilt and the node server restarts.

## Using these Render methods
You can generate pages of your site in different ways based on which functions you use in a page.  If you use the “getInitialProps” or “getServerSideProps” functions then you get the old-school ways of rendering a page (slower, server side renders).  

![Screen Shot 2021-05-24 at 3.25.37 PM.png](https://res.cloudinary.com/diqgdacjy/image/upload/v1621991594/Screen_Shot_2021_05_24_at_3_25_37_PM_ea6a4612df.png)


Static pages use no initial props and have no changing content.  If your page uses “getStaticProps” you get classic SSG change at build time.  If you use “revalidate” in the getStaticProps function you get “incremental static regeneration” (ISR) which updates the built page in realtime for the next response.

![The getStaticProps function in Next.js along with revalidation](https://res.cloudinary.com/diqgdacjy/image/upload/v1621991649/Screen_Shot_2021_05_24_at_3_26_10_PM_cbe5bea559.png)



## To sum it up:
Next.js is great and powerful.  Want to render content on the server?  You can.  You can also speed up rendering with revalidation or site rebuilds.  There’s more to love too, like Next Images but that’s another post in and of itself.

My lessons from building a website with Next.js (a React/web development framework)

large_5294398307303424.png

medium_5294398307303424.png

small_5294398307303424.png

thumbnail_5294398307303424.png

5294398307303424.png

Lessons From My First Next.js Project In Production

Page

large_default-image.png

medium_default-image.png

small_default-image.png

thumbnail_default-image.png

default-image.png

Logo Black.svg