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

My blog

large_splat2.jpg

medium_splat2.jpg

small_splat2.jpg

thumbnail_splat2.jpg

splat2.jpg

A bug-tracker app.  Bugs are placed in columns of "Todo, Doing or Done" and organized by Projects.  Similar in feel to Trello, it's a simple kanban.

Splat

large_seatSaveBig.jpg

medium_seatSaveBig.jpg

small_seatSaveBig.jpg

thumbnail_seatSaveBig.jpg

seatSaveBig.jpg

Event reservation system developed to help churches manage RSVPs during Covid restrictions.  Administrators authenticate via Google.

SeatSave

large_sanPedro.jpg

medium_sanPedro.jpg

small_sanPedro.jpg

thumbnail_sanPedro.jpg

sanPedro.jpg

Website for San Pedro Presbyterian Church in San Antonio, TX. Static site automatically rebuilds via webhook when CMS changes.  CMS uses Quill for improvement rich-text customization.

San Pedro Presbyterian Church

large_requestWheel.jpg

medium_requestWheel.jpg

small_requestWheel.jpg

thumbnail_requestWheel.jpg

requestWheel.jpg

Website that receives, organizes and prepares content for distribution through multiple media.

Request Wheel

large_walindwa.jpg

medium_walindwa.jpg

small_walindwa.jpg

thumbnail_walindwa.jpg

walindwa.jpg

Website for charity that serves Kenyan children.  They received a customized Content Management System allowing for independent ongoing maintenance.  Financial transactions process through Stripe.

Walindwa

Projects

Contact Me