Implementing SitecoreAI Wildcard Pages with the Next.js App Router and Content SDK

// This context provides dynamic route parameters (id, slug, path, etc.)
// to all components in the Next.js App Router using Sitecore Content SDK.
// It enables features like dynamic breadcrumbs, page titles, and external API queries
// for deeply nested and wildcard routes, without needing multiple static files.
// Used in conjunction with ProvidersWithParams to inject route data from [[...path]] catch-all routes.

'use client';
import { createContext, useContext } from 'react';

// Type for dynamic route parameters extracted from Next.js App Router
export interface DynamicParams {
  id?: string;        // e.g. /blog/123 → id = '123'
  someslug?: string;  // e.g. /blog/123/slug → someslug = 'slug'
  path?: string[];    // Full path segments from [[...path]]
  blogSlug?: string;  // e.g. /blogs/[slug] → blogSlug = slug
}

// Context for sharing dynamic params across the app
export const DynamicParamsContext = createContext<DynamicParams>({});
// Hook for consuming dynamic params in any component
export const useDynamicParams = () => useContext(DynamicParamsContext);

// This client component wraps the app in DynamicParamsContext,
// providing dynamic route parameters to all child components.
// Used in Next.js App Router with Sitecore Content SDK to enable
// dynamic breadcrumbs, page titles, and API queries for wildcard/nested routes.
// Receives route params from [[...path]] and passes them via context.

'use client';
import { DynamicParamsContext } from 'src/contexts/DynamicParamsContext';
import Providers from 'src/Providers';
import Layout from 'src/Layout';

export default function ProvidersWithParams({ id, someslug, path, blogSlug, page, componentProps }) {
  return (
    <DynamicParamsContext.Provider value={{ id, someslug, path, blogSlug }}>
      <Providers page={page} componentProps={componentProps}>
        <Layout page={page} />
      </Providers>
    </DynamicParamsContext.Provider>
  );
}

// Breadcrumb component for Next.js App Router using Sitecore Content SDK.
// Dynamically renders breadcrumbs for any nested/wildcard route using the path array from context.
// Enables SEO-friendly navigation and reflects the current content hierarchy without static routes.
// Consumes dynamic params from DynamicParamsContext, which is populated by ProvidersWithParams.

import React from 'react';
import { useDynamicParams } from 'src/contexts/DynamicParamsContext';

const Breadcrumb = () => {
  const { path } = useDynamicParams();
  return (
    <nav id="breadcrumb" className="breadcrumb">
      <a href="/">Home</a>
      {Array.isArray(path) && path.map((segment, idx) => (
        <span key={idx}>
          {' / '}
          <a href={`/${path.slice(0, idx + 1).join('/')}`}>{segment}</a>
        </span>
      ))}
    </nav>
  );
};

export default Breadcrumb;

import { isDesignLibraryPreviewData } from "@sitecore-content-sdk/nextjs/editing";
import { notFound } from "next/navigation";
import { draftMode } from "next/headers";
import { SiteInfo } from "@sitecore-content-sdk/nextjs";
import sites from ".sitecore/sites.json";
import { routing } from "src/i18n/routing";
import scConfig from "sitecore.config";
import client from "src/lib/sitecore-client";
import Layout, { RouteFields } from "src/Layout";
import components from ".sitecore/component-map";
import Providers from "src/Providers";
import { NextIntlClientProvider } from "next-intl";
import { setRequestLocale } from "next-intl/server";
import ProvidersWithParams from 'src/contexts/ProvidersWithParams';

type PageProps = {
  params: Promise<{
    site: string;
    locale: string;
    path?: string[];
    [key: string]: string | string[] | undefined;
  }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
};


export default async function Page({ params, searchParams }: PageProps) {
  const { site, locale, path } = await params;

  let id, someslug, blogSlug;
  let isBlogDetail = false;
  if (Array.isArray(path)) {
    // blogs/[slug] → path = ['blogs', 'some-blog-slug']
    if (path[0] === 'blogs' && path.length === 2) {
      isBlogDetail = true;
      blogSlug = path[1];
    } else if (path.length === 1) {
      // Single-segment page, e.g., /About
      // You can use path[0] as the page name/slug
    } else if (path.length >= 3) {
      // Multi-segment, e.g., /mypath/123/slug
      id = path[path.length - 2];
      someslug = path[path.length - 1];
    }
  }

  const draft = await draftMode();

  // Set site and locale to be available in src/i18n/request.ts for fetching the dictionary
  setRequestLocale(`${site}_${locale}`);

  // Fetch the page data from Sitecore
  let page;
  if (draft.isEnabled) {
    const editingParams = await searchParams;
    if (isDesignLibraryPreviewData(editingParams)) {
      page = await client.getDesignLibraryData(editingParams);
    } else {
      page = await client.getPreview(editingParams);
    }
  } else {
    if (isBlogDetail && blogSlug) {
      // Fetch blog detail page by slug, e.g., from Sitecore or your API
      // Example: page = await client.getBlogDetail(blogSlug, { site, locale });
      page = await client.getPage(['blogs', blogSlug], { site, locale });
    } else {
      page = await client.getPage(path ?? [], { site, locale });
    }
  }

  // If the page is not found, return a 404
  if (!page) {
    notFound();
  }

  // Fetch the component data from Sitecore (Likely will be deprecated)
  const componentProps = await client.getComponentData(
    page.layout,
    {},
    components
  );

  // ProvidersWithParams wraps the app in a dynamic context provider, making route params
  // (id, slug, path, blogSlug) available to all components. This enables dynamic breadcrumbs,
  // page titles, and API queries for deeply nested/wildcard routes in the Next.js App Router
  // using Sitecore Content SDK. It receives route params from the catch-all [[...path]] route.
  return (
    <NextIntlClientProvider>
      <ProvidersWithParams id={id} someslug={someslug} path={path} page={page} componentProps={componentProps} blogSlug={blogSlug} />
    </NextIntlClientProvider>
  );
}

// This function gets called at build and export time to determine
// pages for SSG ("paths", as tokenized array).
export const generateStaticParams = async () => {
  if (process.env.NODE_ENV !== "development" && scConfig.generateStaticPaths) {
    // Filter sites to only include the sites this starter is designed to serve.
    // This prevents cross-site build errors when multiple starters share the same XM Cloud instance.
    const defaultSite = scConfig.defaultSite;
    const allowedSites = defaultSite
      ? sites
          .filter((site: SiteInfo) => site.name === defaultSite)
          .map((site: SiteInfo) => site.name)
      : sites.map((site: SiteInfo) => site.name);
    return await client.getAppRouterStaticParams(
      allowedSites,
      routing.locales.slice()
    );
  }
  return [];
};

// Metadata fields for the page.
export const generateMetadata = async ({ params }: PageProps) => {
  const { path, site, locale } = await params;

  // The same call as for rendering the page. Should be cached by default react behavior
  const page = await client.getPage(path ?? [], { site, locale });
  let title = (page?.layout.sitecore.route?.fields as RouteFields)?.Title?.value?.toString();
  // If title is '*' (wildcard), use the last path segment or fallback
  if (title === '*' && Array.isArray(path) && path.length > 0) {
    title = path[path.length - 1];
  }
  return {
    title: title || "Page",
  };
};

"use client";
// DynamicData component for Next.js App Router using Sitecore Content SDK.
// Consumes dynamic params from context and fetches external API data based on the current route.
// Demonstrates how to integrate external systems (e.g., PIM, Commerce) with Sitecore-driven pages.
// Useful for showing contextual data (e.g., blog slug, wildcard path) and API results on dynamic/wildcard pages.

import React, { useEffect, useState } from 'react';
import { useDynamicParams } from 'src/contexts/DynamicParamsContext';

const DUMMY_API_URL = 'https://jsonplaceholder.typicode.com/posts?_limit=3';

const DynamicData: React.FC = () => {
  const { blogSlug, path } = useDynamicParams();
  const [dummyData, setDummyData] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    setLoading(true);
    fetch(DUMMY_API_URL)
      .then((res) => res.json())
      .then((data) => {
        setDummyData(data);
        setLoading(false);
      })
      .catch((err) => {
        setError('Failed to fetch dummy data');
        setLoading(false);
      });
  }, []);

  return (
    <div style={{ padding: '1rem', border: '1px solid #ccc', margin: '1rem 0' }}>
      <h2>Dynamic Data Component</h2>
      {blogSlug && (
        <div>
          <strong>Blog Slug:</strong> {blogSlug}
        </div>
      )}
      {path && path.length > 0 && (
        <div>
          <strong>Wildcard Path:</strong> {path.join(' / ')}
        </div>
      )}
      <div style={{ marginTop: '1rem' }}>
        <strong>Dummy API Data:</strong>
        {loading && <div>Loading...</div>}
        {error && <div style={{ color: 'red' }}>{error}</div>}
        {!loading && !error && (
          <ul>
            {dummyData.map((item) => (
              <li key={item.id}>
                <strong>{item.title}</strong>
                <div>{item.body}</div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
};

export default DynamicData;