Optimization Next.js Pages Router

pnpm add @contentful/optimization-nextjs

// lib/optimization.ts
import { createNextjsPagesRouterOptimization } from '@contentful/optimization-nextjs/pages-router';

export const APP_LOCALE = 'en-US';

export const { NextPagesAutoPageTracker, OptimizationRoot, OptimizedEntry } = createNextjsPagesRouterOptimization({
  clientId: process.env.NEXT_PUBLIC_OPTIMIZATION_CLIENT_ID ?? '',
  environment: process.env.NEXT_PUBLIC_OPTIMIZATION_ENVIRONMENT ?? 'main',
  locale: APP_LOCALE,
  defaults: { consent: false, persistenceConsent: false },
  app: { name: 'my-next-pages-app', version: '1.0.0' },
});

// lib/optimization-server.ts
import { createNextjsPagesRouterOptimization } from '@contentful/optimization-nextjs/pages-router/server';
import type { GetServerSidePropsContext } from 'next';
import { APP_LOCALE } from './optimization';

const CONSENT_COOKIE = 'app-personalization-consent';

const { getServerSideOptimizationProps } = createNextjsPagesRouterOptimization({
  clientId: process.env.NEXT_PUBLIC_OPTIMIZATION_CLIENT_ID ?? '',
  environment: process.env.NEXT_PUBLIC_OPTIMIZATION_ENVIRONMENT ?? 'main',
  locale: APP_LOCALE,
  app: { name: 'my-next-pages-app', version: '1.0.0' },
  server: {
    consent: (context: GetServerSidePropsContext) =>
      context.req.cookies[CONSENT_COOKIE] === 'granted' ? { events: true, persistence: true } : false,
  },
});

export function getOptimizationProps(context: GetServerSidePropsContext) {
  return getServerSideOptimizationProps(context);
}

import { NextPagesAutoPageTracker, OptimizationRoot } from '@/lib/optimization';
import type { NextjsPagesRouterOptimizationPageProps } from '@contentful/optimization-nextjs/pages-router/server';
import type { AppProps } from 'next/app';

interface OptimizationPageProps {
  readonly contentfulOptimization?: NextjsPagesRouterOptimizationPageProps;
}

export default function App({ Component, pageProps }: AppProps<OptimizationPageProps>) {
  const optimization = pageProps.contentfulOptimization;

  return (
    <OptimizationRoot
      clientDefaults={optimization?.clientDefaults}
      serverOptimizationState={optimization?.serverOptimizationState}
      prefetchedManagedEntries={optimization?.prefetchedManagedEntries}
    >
      <NextPagesAutoPageTracker initialPageEvent={optimization?.initialPageEvent} />
      <Component {...pageProps} />
    </OptimizationRoot>
  );
}

<NextPagesAutoPageTracker
  initialPageEvent={optimization?.initialPageEvent}
  getPagePayload={({ context: { pathname } }) => ({
    properties: { routeGroup: pathname.startsWith('/account') ? 'account' : 'public' },
  })}
/>

import { OptimizedEntry } from '@/lib/optimization';
import { getOptimizationProps } from '@/lib/optimization-server';
import type { NextjsPagesRouterOptimizationProps } from '@contentful/optimization-nextjs/pages-router/server';
import type { GetServerSideProps } from 'next';

type PageProps = NextjsPagesRouterOptimizationProps & {
  readonly entries: ContentEntry[];
};

export const getServerSideProps: GetServerSideProps<PageProps> = async (context) => {
  const [entries, optimization] = await Promise.all([getPageEntries(context), getOptimizationProps(context)]);

  return { props: { ...optimization.props, entries } };
};

export default function Page({ entries }: PageProps) {
  return entries.map((entry) => (
    <OptimizedEntry key={entry.sys.id} baselineEntry={entry}>
      {(resolved, { getMergeTagValue }) => (
        <EntryComponent entry={resolved as ContentEntry} getMergeTagValue={getMergeTagValue} />
      )}
    </OptimizedEntry>
  ));
}

// lib/optimization-server.ts
const { getServerSideOptimizationProps } = createNextjsPagesRouterOptimization({
  // standard server config
  contentful: { client },
  server: { consent: resolveConsent },
});

export function getOptimizationProps(context: GetServerSidePropsContext) {
  return getServerSideOptimizationProps(context, {
    prefetchManagedEntries: [{ entryId: 'hero-entry', entryQuery: { include: 10 } }],
  });
}

// _app.tsx: required handoff
<OptimizationRoot
  clientDefaults={optimization?.clientDefaults}
  serverOptimizationState={optimization?.serverOptimizationState}
  prefetchedManagedEntries={optimization?.prefetchedManagedEntries}
>
  {children}
</OptimizationRoot>

<OptimizedEntry entryId="hero-entry">{(resolved) => <Hero entry={resolved as HeroEntry} />}</OptimizedEntry>

<OptimizedEntry baselineEntry={entry} liveUpdates>
  {(resolved) => <Hero entry={resolved as HeroEntry} />}
</OptimizedEntry>

type PageProps = Partial<NextjsPagesRouterOptimizationProps> & {
  readonly entries: ContentEntry[];
};

export const getServerSideProps: GetServerSideProps<PageProps> = async (context) => {
  const entries = await getPageEntries(context);
  try {
    const optimization = await getOptimizationProps(context);
    return { props: { ...optimization.props, entries } };
  } catch {
    return { props: { entries } };
  }
};