New Website: - NextJS site deployed on Google Cloud with Prismic webhooks

Hi All,

Ali here ( :)

Recently finished a two-weeks website overhaul project for a client who wanted a custom form that accepts all sorts of CAD Drawing files.

Site is:

For the site iteself, the project required nested navigation and typewriter effect in the hero section:

Website Design

Here is what the full website looks like:

Typewriter effect:

Screen Recording 2023-07-12 at 08.40.33

Nested Tree Navigation:

Custom Contact Form

Prismic Integration with Google Cloud and Use of Slice Machine

Content Modelling

The content modelling experience was quite fun! The nested tree structure really took me for a ride to model its content but also the slice machine simulator was the highlight of the experience. Just look at that!

For each website section, we created a dynamic slice:

And to model the nested navigation tree, I decided to go for a dynamic slice alongside a navigation custom type similar to a page document.

Overall, we ended up with a content model that was like below. Global content like footer, navigation and homepage were built with custom type single document types whereas homepage and other landing pages had their own core repeatable types.

Prismic Previews

Then setup site preview in prismic for both local and production enviornments when updating content. This was going to be a static website so had to rebuild the site with a webhook on content updates but didn't want to wait several minutes to see changes. This is where prismic content preview both locally and on production would come in handy.


Setting up Webhook Triggers

To get the site to publish changes from Prismic, had to hook a webhook to Google Cloud Build. This required setting up a cloud-build.yaml file in root of my project and configure Prismic to send events to the endpoint:

CICD Pipelines

Here I had to setup some manual and automatic triggers to rebuild the static site everytime there were code pushes or Prismic content updates.

On Google Cloud, I had to dockerise my NextJS and prismic application so that it can be redepolyed each time with the webhook or code push triggers:

Once the image was built, it pushed into a Google Cloud Artifact Registry (Docker Registry) and redeployed the service to Google Cloud Run:

Deploy Previews

To setup deploy previews on Google Cloud Run, I had to create yet another trigger on Google Cloud Build to deploy the new image built from a Pull Request branch on Google Cloud Run with a tag and --no-traffic flag so that the client can view the site.

Deployment Configurations

This is where environment variables came handly. It allowed the client to configure the form, their SEO indexability and update their API keys.

Custom Form - Integration with Airtable, Email automations and Google Cloud Storage

The last piece of the puzzle was the custom form below.

This had to be hooked to Google Cloud storage for uploaded files, create record entries in Airtable with attachment previews and submit email notifications with attachments to the client for direct response to the site visitors.

Airtable API would receive link to files stored in Google cloud storage and fetch a copy to preview within the table.

Then on record creation it would send an email to the client:

This whole setup was slightly complicated as the form had to upload the file to Google Bucket on submit, grab a signed link of the uploaded file and then send a record entry to Airtable.


Overall, this was a simple project but what made it interesting is variety of integrations and tools that had to be used to make the system work. For deployment, I could go with Netlify but decided to build my own deployment pipeline in Google Cloud for better control and cheaper hosting costs. You have more visibility of traffic and end up paying for hosting per request instead of the usual monthly charges that Vercel or Netlify provide.

Under the hood, they provide similar mechanisms but with CDN and edge functions. I would say if you're deploying on Google Cloud or other cloud providers, you can also attach a CDN or load balancer on the front to make sure you serve the site closer to your users (for instance for a e-commerce store type project.)

This was quite a fun project and challenge to build with Google Cloud and Prismic but if anyone have questions how to build their own integrations with this tech stack or need more details please feel free to leave a comment :). And, I hope you enjoyed this showcase / case study.


Wow, awesome work @aliparandeh!

Really thankful you made a walkthrough of your process, this is all really interesting, and I was glad to see my questions being answered along the way (notably why Google Cloud in that case!)

Congratz on shipping another great website, and happy to hear you enjoy using the Simulator :slight_smile:

Lots of great things ahead, onward!


Hey @aliparandeh ! Great to see you, buddy. And yeah, what Lucie said, this is such a great walkthrough, I really love seeing the process. Are you turning this into a blog post or anything? It's an excellent writeup and website!


Thank you very much @lihbr for the kind words! Glad the case study answered your questions as you were going through it. Yes this was quite a controversial decision to go with GCloud as I was considering Netlify or Vercel for the client but went for the pay per request pricing model which required more custom CICD pipeline development. The Slice machine was definitely a highlight.

Hey Alex! It's great to hear from you again! Glad you also enjoyed reading the writeup. Absolutely a great idea. Would you like me to re-purpose it for Prismic Blog or something similar?

I am thinking of taking the projects I've done so far and create case study pages with pictures and everything on my website as I'm doing a redesign and want to include blog posts and other pages on there too.

The client also want to make this site more complex so would be cool to add new additions to the process on how to take to the next level too.