Building Dynamic Web Experiences with CrafterCMS and Next.js

Frameworks like Next.js enable developers to build dynamic and engaging web experiences to engage an audience. However, when using these robust JavaScript frameworks and libraries, it helps to have a strong headless content platform at the foundation. 

In this blog, we’ll explain how to build those experiences with CrafterCMS and Next.js. This blog is a summary of the presentation by Tony Field of Kingsway Digital at the CrafterCMS Live! 2024 User Conference.

Watch the video: Building Dynamic Web Experiences with CrafterCMS and Next.js

What Is Next.js?

Next.js is a React framework for building full-stack web applications and one of the most popular frameworks available today, climbing from 11th to 6th among the most commonly used web frameworks in Stack Overflow’s 2023 Developer survey. 

With Next.js, developers can use the React components to build their UI, and the framework contains runtime tooling compiling, file system-based routing, and full Typescript support, among other features. 

Next.js Deployment Choices

When building a website with Next.js, developers have three options:

1. Static site delivery: Using this approach, Next.js ports your content to static files or a regular web server. This method works well and offers low hosting costs. However, pages must be entered before being served, which can be tricky on a technical level, even though Next.js provides excellent tools to simplify the process.
2. Single-page (client) app delivery: Using this approach, the website is deployed onto a regular web server as a set of HTML, CSS, and JavaScript files, plus static assets like images and videos. The client downloads the HTML and JavaScript files but makes dynamic calls to an API endpoint to retrieve content for the site. This model is ideal since hosting is simple and inexpensive, and content is returned directly from the source. However, single-page application delivery via static files isn’t ideal for public sites because search engines don’t all hydrate the site to index the content. Often, the payload downloaded for a single page can be many times larger than the contents, which have to do all the JavaScript.
3. Dynamic delivery: With this deployment option, Next.js hosts the site’s frontend on a Node server. The Next.js server can make calls to external servers to access data, and business logic can be executed on the Node server on an external server or can be shipped to the client as JavaScript. Next.js supports both traditional and client React components as well as the comparatively new React server components. Dynamic delivery with Next.js is flexible and powerful and is the recommended deployment model.

Integration Factors

CrafterCMS provides a high-performance, headless architecture out of the box with REST and GraphQL APIs for developing front-end sites and apps using any technology such as React, Angular, and Vue. CrafterCMS also supports server-side development with Freemarker templating, Groovy scripting, and Spring. And of course it’s also possible to leverage Next.js. 

When choosing the integration architecture for your CrafterCMS Next.js solution, there are many factors to consider. Some of these include:

Deployment Architecture

• Can your site support headless content delivery?
• Do you require the CMS to provide both content and UI delivery?

Development Team Expertise

• Does your team already have expertise in a specific technology? 
• Are they experts in working with something other than React? 
• Do you already have experience deploying in-house?

DevOps Experience

• Has your DevOps team deployed in-house?
• What deployment architectures have they used? Static or dynamic? 
• Will you be building a CI/CD process around your web frontend?
• Would you prefer that this all be handled internally within CrafterCMS?

Content Authoring Experience

• Are you looking for a full in-context editing experience with experience builder? 
• What about in-context editing without experience builder?
• Do you just want to expose the site in preview without in-context editing?

Will CrafterCMS be Delivering to Other Channels?

• Will you deliver content to other channels entirely served via an API like REST or GraphQL?
• Will you be delivering content via the Crafter JavaScript SDK?

Deployment Options

The three deployment options for working with Next.js apps and CrafterCMS are:

1. Static with CrafterCMS hosting the app in SPA mode
2. Static with the app hosted externally on a web server
3. Dynamic with the app hosted externally on Node

Single Page Application (SPA)

When deploying a website as a Crafter-hosted website in SPA mode, it’s important to take note of the following functionality:

• Files are served by CrafterCMS
• The index.html is dynamically included in Freemarker templates
• Dynamic logic accessible
• Each time the backend code is modified, you must deploy to CrafterCMS and publish

The approach is perfect for companies with one team running the front and backend. 

Proxied

When hosting externally using the CrafterCMS proxy, a proxy server that's built into Crafter Studio, requests will be made to the site and rendered directly inside Studio. This includes the following functionality:

• Served externally, proxied by CrafterCMS
• Decoupled delivery
• Decoupled deployment

This approach is ideal for companies with separate teams for the front and backend. 

Dynamic

Using the dynamic approach, the website runs on Next.js on an independent node server. In many ways, this proxy static site is fully decoupled and serves content using the Crafter proxy server. That content is served to the authors in preview using the Crafter proxy. It includes the following functionality: 

• Served by Next.js proxied by CrafterCMS
• Decoupled delivery
• Decoupled deployment
• Authentication is easy
• Crafter hidden behind the scenes
• Business logic can be in Next.js, or in CrafterCMS, or both
• Authenticated search engine queries

This approach is also ideal for companies with separate teams for the front and backend. 

Advanced Integration

Other more advanced integration approaches are common with React deployments. These include authenticated requests, experience builder and routing.

Authentication

Other options exist in addition to CrafterCMS’s simple header-based authentication. If authentication is required, visitors will authenticate their client through a system like OpenID Connect or by other means. 

These solutions generate a token that can be stored in the browser. That token can then be sent to CrafterCMS via fetch requests or by configuring authorization headers in the CrafterCMS SDK so that those requests are sent for you. Depending on the authentication provider or your token, it is possible to leverage existing CrafterCMS plugins. Otherwise, you might need to teach CrafterCMS how to use your token.

Dynamic

For dynamic sites running through a Node server, the same process applies. However, in this case, Node is on the front end. Developers can build their own tokens however they like. But if it’s a custom token, you will need to write your own decoder. If running on Node, the approach is the same as the SPA approach. Otherwise, Next.js can send a JWT in a bearer token to CrafterCMS, and Crafter accepts the token and authenticates the user. 

Experience Builder

A well-thought-out intuitive content architecture is just the beginning of creating a positive experience for content teams. Happy authors create better content, and the experience builder makes authors happy.

Users can use experience builder to edit content in context and compose experiences. When deploying Next.js, leverage Crafter’s SDKs in your React client components to reap the benefits of both server-side rendering and client-side rendering.

Routing

URLs are arguably the most important content on your site and are the entry point to everything. Next.js provides file-based routing, and developers leverage dynamic routes to tie CrafterCMS URL management into Next.js. This enables the content team to own URLs, and the custom logic will help make this more efficient. 

Getting More Out of CrafterCMS and Next.js

CrafterCMS is an enterprise-grade headless CMS that allows developers to build a variety of content-centric websites and applications using the frameworks of their choice. 

To learn more about using Next.js with CrafterCMS and get some tips and tricks for dealing with content modeling, relationship types, data sources, and more, view the CrafterCMS Live! 2024 recorded presentation: Building Dynamic Web Experiences with CrafterCMS and Next.js