nextjs

Next.js Development Patterns

Configuration

Next.js Config:

• Configure i18n for multi-language XM Cloud sites
• Set up proper image domains for XM Cloud media
• Implement rewrites for XM Cloud API routes
• Configure webpack for SCSS and other assets
• Set up proper build optimization

// next.config.js pattern
const nextConfig = {
  i18n: {
    locales: ['en', 'en-CA'],
    defaultLocale: process.env.DEFAULT_LANGUAGE || 'en',
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'edge*.**',
      },
      {
        protocol: 'https',
        hostname: 'xmc-*.**',
      },
    ],
  },
  async rewrites() {
    return [
      {
        source: '/robots.txt',
        destination: '/api/robots',
      },
      {
        source: '/sitemap.xml',
        destination: '/api/sitemap',
      },
    ];
  },
};

Environment Variables:

• Use NEXT_PUBLIC_ prefix for client-side variables
• Validate required environment variables at build time
• Use different .env files for different environments
• Never commit sensitive environment variables

App Router Pages and Routing

Catch-All Routes:

• Use src/app/[site]/[locale]/[[...path]]/page.tsx for XM Cloud page routing
• Fetch layout data in the Server Component with sitecore-client
• Call notFound() when the route does not exist
• Use draftMode() and editing search params for preview and Pages Editor

// page.tsx pattern (App Router)
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;
    page = await client.getPreview(editingParams);
  } else {
    page = await client.getPage(path ?? [], { site, locale });
  }

  if (!page) {
    notFound();
  }

  return (/* Layout + Providers */);
}

Pages Router:

• Only examples/basic-nextjs-pages-router uses src/pages/[[...path]].tsx with getStaticProps / getServerSideProps
• Do not add Pages Router patterns to App Router starters