Next.js In Review: An Exceptional Experience for Developers Building on a Headless CMS
CrafterCMS is an open source headless CMS designed to provide an enterprise-class solution for a wide variety of digital experience applications. Next.js is a strong contender for building out your next enterprise website, digital product, customer portal, or any other type of digital experience. But first, let's consider what problems Next.js is seeking to solve.
A Developer's View of React.js
Like most UNIX utilities, React solves the problem it's designed to address very well. It introduced the idea of a virtual DOM to aggregate changes to a browser's document model, and push multiple changes at once to improve performance. It enforced a one-way data flow that simplified the headaches of reasoning about state held in the real DOM and that can be mutated by anything, seen or unseen. But the downside of React, as with UNIX utilities, is that the burden of building a full pipeline to do meaningful work is on the shoulders of developers.
Next.js to the Rescue
Facebook's React team recognized the problems developers were having and introduced the create-react-app app (so meta) to help. CRA provided some elementary opinions on project structure and a preconfigured build pipeline. It bundled the configuration into NPM modules, so that a project could stay current with the project and avoid managing dependencies themselves, and an option to "eject" and copy all configuration into your project repo if your needs varied. A whole ecosystem of "create-" style apps sprung up based on CRA that offered more opinionated approaches and to save dev time - including a preconfigured Apollo client for state management and GraphQL API tooling.
Next.js has its roots in the CRA ecosystem of downstream apps that expand the footprint of Facebook's original CRA. One problem "create-" style apps introduce is there's now a lot of abandonware out there. While vendor provided extensions to CRA are usually well maintained, they're also usually limited in what they add. Developers using "create-" style apps that match closely with what they need often face the choice of either ejecting and assuming responsibility for dependency management, or falling behind and being barraged with security vulnerability reports in their CI pipelines.
Next.js is a site generator built on React , and introduces well-considered patterns to building out your frontend. It's a stand-alone application that's intended to be included into your project as a module, not a "create-" app that you eject from. In fact, Vercel (formerly Zeit, and Next's maintainer) offers their own create-next-app that's actually a scaffold generator to create a quick-start project template for you. The tool also lets you use Next-specific CRA-style projects as a template for additional preconfigured functionality.
What Exactly is a Site Generator?
CRAs are designed for client-side rendering. The index.html page delivered to a browser on page load usually has a sparse body: generally the body of the document contains a single, empty tag with an id set. Once the browser has loaded and begins executing the client code bundle, React will reference the empty tag and inject the page's HTML dynamically in place of the marker tag. From that point on, everything happens in code: when a user navigates to a new page, React intercepts the link and generally fetches the data to build the next page using an API.
Next.js pulls some features from client-side rendering CRAs that developers love: hot module reloading, so that changes in code are reloaded in the browser immediately, and a preconfigured build pipeline with tree-shaking to minimize the size of code bundles delivered over the wire to browsers. But Next's execution model is fundamentally different, at least for the first page load.
Routing: Next.js is opinionated on routing and offers a file-based routing system and mandatory file hierarchy that developers need to maintain in a project. It provides dynamic routing, where the build system applies a given page template to all content from an API endpoint that returns a list, such as CrafterCMS's organization of content into a site navigation tree. Next's routing solution also offers prefetching, where likely links that a user might click are loaded in the browser before the user navigates to them.
React Hooks for SSG and SSR: Next.js provides simple hooks to include in pages that are generated using SSG and SSR strategies. Pages can also be delivered for client-side rendering, as with vanilla CRAs.
Styling Support: Next.js offers built-in support for using external style sheets, with or without a preprocessor like SCSS, and also CSS-in-JS solutions like Emotion.
Advanced Code Splitting: Next.js is a great platform to build on for achieving high Google Lighthouse performance metrics, boosting your site's potential SERP placement. You can deliver just the code bundles a given page needs and avoid loading large and mostly-unused code to users.
Lambda Support: Next.js makes working with serverless functions easy. Hosting providers like Netlify and Vercel are integrated with Next to automatically deploy lambdas, and Next provides support for hosting lambdas - especially useful in developer environments.
Combining CrafterCMS and Next.js
CrafterCMS is always on the lookout for the latest technologies to help our community innovate. That means offering as many points of integration and approaches as possible so that organizations can bring the best tools available into their tech stack.