Jamstack your Sitecore site with Next.JS and Uniform

If you have been wondering about Jamstack and Sitecore, and you are thinking to get started with it. You can start now, literally today 🙂

So what is Jamstack is all about? What are Jamstack principles?

Markup is generated at build-time vs. runtime pages are served from CDN

API driven – pull dynamic content via API (search, commerce, etc.)

JavaScript helps making sure the site is still dynamic

How about Headless and Decoupled, well these terms get always confused and misinterpreted as well as Jamstack.

Headless is NOT fully decoupled, you still need to go back to the origin.

When we talk about improving performance you need to decouple and create a static site and serve it from the CDN. How do we decouple? You need to statically generate your site content and personalization and deploy to the CDN, so your journey is shorter from browser to CDN.

Keep reading 🙂

Next section will be about NextJS.

Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React based web applications.

So what is Static Site Generator? Think of a static site generator as a script which takes in data, content and templates, processes them, and outputs a folder full of all the resultant pages and assets.

In case you missed it, cool guys at Uniform have created a repo and they open sourced it.

Sitecore JSS NEXTJS Starterkit

https://github.com/uniformdev/sitecore-jss-nextjs-starterkit

I will demonstrate the ease of use of it in few simple steps that are covered in the README.MD file inside the repository.

My expectations are that you already have a Sitecore installed and you have Sitecore JSS as well.

Now we have all the prerequisites, we can go ahead and move forward.

First we will need to install Uniform package and you can get it from Uniform team

Lets begin our journey with the StarterKit

• Clone the repo from GitHub
• NPM Install
• NPM Start and check that it is working without Sitecore
• JSS Setup
• JSS Config Deploy
• Install Sitecore Content Package, because we need some content in Sitecore to consume from there
• Run Export
• Run Locally the exported static bundle
• Deploy to Netlify

Once I install the Uniform package I can view the content that is needed for me to build my static site.

One of the APIs will show us the page structure:

http://host/uniform/api/content/uniform-jss/page

So next I will start my NextJS app from the starter kit, with a simple command:

npm start

I will go ahead and load it and this is what I see:

Next I will go ahead and update the page in Sitecore, with new content, Save it and Publish it.

My locally running NextJS application gets instant update and refresh:

You probably noticed that there are two data sources, once is coming directly from Sitecore, another one is hard coded, see the code below:

And it got also deployed to Netlify:

I tested it right away with Lighthouse and got blazing fast results:

Let me know if you want to learn more about this, and you would like to see more blogs.

Next blog will cover how Uniform helps decouple Sitecore personalization.

If you cannot wait for the next blog, find me on twitter (@tmamedbekov), or request a demo (https://uniform.dev/uniform-for-sitecore)