Adopting Next.js 13 server components

When Next.js announced support for server components and a completely new architecture to support this, we knew this was going to be big news. At that time a beta edition was ready for usage, but it was unclear when the production-ready version would ship.

Our CMS pages are typically structured as a collection of building blocks which can be reused and positioned across different pages. Previously, the logic for data retrieval for each block was completely separated from the UI component used to actually draw the component. Which made the logic for retrieving additional data harder to follow and maintain.

Lets take a "related articles" block as an example. In a composable website setup, clients can choose which pages need this block and where they want to position it. The block itself contains a short summary of articles with similar tags. Something like the example illustrated in the screenshot. We need a title, url and background image of the two related articles.

Being able to utilize server components in the latest version of Next.js makes it easy to keep business logic closely tied to the React components that actually utilizes it. The "related articles" block example can now implement the UI for showing these articles, as well as the data query to fetch the required data. Which is a big win for easy code reusability across projects.

RelatedBlock.tsx

import { Block, Heading, RelatedCard } from "layout";
import type { RelatedBlockData, PageData, ArticleData } from "cms/types";
import styles from "./RelatedBlock.module.scss";

export default async function RelatedBlock({
  block,
  page,
}: {
  block: RelatedBlockData;
  page: PageData;
}) {
  const { title } = block;
  
  // Fetch the data with a asynchronous query
  const related: ArticleData[] = await apiRequestForRetrievingData(page);

  return (
    <Block type="related" className={styles.related}>
      <Heading title={title} />
      <div className={styles.related.items}>
        {related.map((item) => (
          <RelatedCard
            url={item.url}
            title={item.title}
            image={item.background_image}
          />
        ))}
      </div>
    </Block>
  );
}

Summary

All in all we are very enthusiastic about the latest Next.js release, providing stability for using server components and a powerful architecture to support this. We will definitely be spending time in further maximizing our knowledge about this technology and any further updates and releases.

Are you looking for a seasoned Next.js developer in Belgium to support an existing project or set up something new?

Get in touch