Experience Sitecore !

src/
├── app/
│   ├── [site]/
│   │   ├── [locale]/
│   │   │   └── [[...path]]/
│   │   │       └── page.tsx
│   │   └── layout.tsx
│   ├── api/
│   ├── layout.tsx
│   ├── not-found.tsx
│   └── global-error.tsx
├── components/
├── lib/
└── middleware.ts

Data Fetching in Server Components

With the App Router, Server Components are the default. This means you can fetch data directly within your components without getServerSideProps or getStaticProps. Here’s a look at the new page.tsx:

// src/app/[site]/[locale]/[[...path]]/page.tsx

import { notFound } from 'next/navigation';
import { draftMode } from 'next/headers';
import client from 'src/lib/sitecore-client';
import Layout from 'src/Layout';

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

  let page;
  if (draft.isEnabled) {
    const editingParams = await searchParams;
    // ... handle preview and design library data
  } else {
    page = await client.getPage(path ?? [], { site, locale });
  }

  if (!page) {
    notFound();
  }

  return <Layout page={page} />;
}

A New Approach to Layouts

// src/app/[site]/layout.tsx

import { draftMode } from 'next/headers';
import Bootstrap from 'src/Bootstrap';

export default async function SiteLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ site: string }>;
}) {
  const { site } = await params;
  const { isEnabled } = await draftMode();

  return (
    <>
      <Bootstrap siteName={site} isPreviewMode={isEnabled} />
      {children}
    </>
  );
}

This SiteLayout component wraps all pages within a given site, providing a consistent structure and allowing for site-specific logic.

Migrating from JSS to the Content SDK: A Checklist

1. Update Dependencies: Replace your jss-nextjscode> packages with the new @sitecore-content-sdk/nextjs packages.
2. Centralize Configuration: Create sitecore.config.ts and sitecore.cli.config.ts to consolidate your settings.
3. Refactor Data Fetching: Replace your data fetching logic with the new SitecoreClient class.
4. Update Middleware: Consolidate your middleware into a single middleware.ts file using the defineMiddleware utility.
5. Register Components: Manually register your components in the .sitecore/component-map.ts file.
6. Update CLI Commands: Replace your jss CLI scripts with the new sitecore-tools commands.
7. Remove Experience Editor Code: Clean up any code related to the Experience Editor, as it’s no longer supported.

The Rise of AI in Sitecore Development

Another fascinating aspect of the Content SDK is its deep integration with AI-assisted development. The repository now includes guidance files for Claude, GitHub Copilot, and other AI tools. This is more than just a novelty; it’s a serious productivity booster. These guidance files instruct your AI assistant on Sitecore-specific conventions, ensuring that the code it generates adheres to best practices.

• Use the correct naming conventions.
• Create the necessary props interface.
• Use the Sitecore field components (<Text>, <RichText>, etc.).
• Handle missing fields gracefully.

The Road Ahead

References

• Official Content SDK documentation
• Official Content SDK codebase repository on GitHub
• XM Cloud SDK support lifecycle
• XM Cloud Front End Application Starter Kits with Content SDK
• AI tools for Claude Code, GitHub Copilot, Cursor AI, Windsurf, and LLM Guidance