Adoptie van Next.js 13 server components

Toen Next.js de ondersteuning voor servercomponenten en een compleet nieuwe architectuur hiervoor aankondigde, wisten we dat dit groot nieuws zou zijn. Op dat moment was er een bètaversie beschikbaar voor gebruik, maar het was onduidelijk wanneer de productierijpe versie zou worden uitgebracht.

Onze CMS-pagina's zijn meestal gestructureerd als een verzameling bouwstenen die op verschillende pagina's kunnen worden hergebruikt en gepositioneerd. Voorheen was de logica voor het ophalen van gegevens voor elke bouwsteen volledig gescheiden van de UI-component die we gebruikten om de bouwsteen daadwerkelijk weer te geven. Dit maakte de logica voor het ophalen van aanvullende gegevens moeilijker te volgen en te onderhouden.

Laten we een "gerelateerde artikelen" blok als voorbeeld nemen. In een typische website-setup kunnen klanten kiezen op welke pagina's ze dit blok nodig hebben en waar ze het willen plaatsen. Het blok zelf toont een korte samenvatting van artikelen met vergelijkbare tags, zoals het voorbeeld in de screenshot illustreert. We hebben een titel, URL en achtergrondafbeelding van de twee gerelateerde artikelen nodig.

Het kunnen gebruiken van servercomponenten in de nieuwste versie van Next.js maakt het gemakkelijk om onze logica nauw te integreren met de React-componenten die deze daadwerkelijk gebruiken. Het voorbeeld van het "gerelateerde artikelen" blok kan nu de UI implementeren voor het tonen van deze artikelen, evenals de query om de benodigde gegevens op te halen. Dit is een grote winst voor gemakkelijke code-herbruikbaarheid tussen projecten.

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>
  );
}

Samenvatting

We zijn erg enthousiast over de nieuwste release van Next.js, die stabiliteit biedt voor het gebruik van servercomponenten en een krachtige architectuur om dit te ondersteunen. We zullen zeker tijd besteden aan het verder maximaliseren van onze kennis over deze technologie en eventuele verdere updates en releases.

Bent u op zoek naar een ervaren Next.js-ontwikkelaar in België om een bestaand project te ondersteunen of iets nieuws op te zetten?

Contacteer ons