MC3: My First Nonprofit

MC3, or the Monmouth County Curriculum Consortium, is a wonderful organization run by internally elected members in 2-year terms. I completed a little more than one year of my term, but in that time, I migrated the organization's web presence from a Google Site to GatsbyJS and finally to NextJS.

Why Would I Rebuild Their Site Twice?

That's a fair question. An argument could be made for not needing to migrate to NextJS. I hope to show you what I did and why I did it in just a few minutes.

Why I Rebuilt it the First Time

Deciding on a website platform is not always easy. What makes the decision even more difficult is training a new group of leaders to use the tools every two years.

Before I started in my role, MC3 had made its web presence through a no-code tool. Many school districts use Google, so a Google Site was the tool of choice. Google Sites have come a long way in being responsive. The classic sites had a blog, but the "New" Google Sites did not. Collectively, the leaders of MC3 wanted to improve the branding and user experience for its members.

Why Did I Avoid Prismic?

If you saw my prior project where I leaned on Prismic, you know that I decided against using Prismic for MC3. This was because Prismic content editors could easily and mistakenly edit the types rather than edit the content. I wasn't sure who would edit MC3's content after my term.

I knew MC3 was "going Google," thanks to their free non-profit tier. This allowed me to explore the source plug-in gatsby-source-google-docs. This meant I could set up a folder in Google Drive and let MC3 members add Google Docs to the folders. When content was added, a rebuild could be triggered via webhook, and the new content would be available. This felt more "fool-proof" than risking it with Prismic + Gatsby.

Why I Rebuilt It the Second Time

During my time with MC3, I began to feel concerned about Gatsby and the reliance upon the plug-in developers. I wondered what would happen if the Google Docs plug-in stopped working and the developer abandoned the project. This would be very bad. If I were no longer the technology consultant, this would become a burden for the current consultant.

The second piece to this puzzle came when I discovered Prismic's Slice Machine. Besides being an awesome developer tool, Slice Machine removes the need to use the Prismic Legacy Type Builder. I could confidently turn the CMS over to future technology consultants without the worry of the models being edited.

There was a problem. Slice Machine was not available for Gatsby. And this is why I had to rebuild the site again...

Why Is NextJS My New "Go-To" Framework?

As I just alluded to, Gatsby wouldn't be an option if I wanted to use Prismic. This left me with two possible choices: learn to use Next or learn to use Nuxt. Since GatsbyJS and NextJS are both React meta-frameworks, Nuxt was not going to be the smoothest transition for me.

Incremental Static Regeneration 🤯

Something new to me for this project was integrating a Google Calendar into a page. Thanks to NextJS's incremental static regeneration (ISR), MC3 members could add, edit, and remove events on a Google calendar.

These events would be added to the calendar page, which would be revalidated every 15 minutes. A full site rebuild was not required to fetch and display updated content.

While there are some things that I still really like about Gatsby, making a move to NextJS has been a very enjoyable experience. MC3 is still running on the Pages router with JavaScript, but I have since moved to the App router with TypeScript.