URL Routing

Default URL Patterns

SAP Commerce Cloud uses short /c and /p prefixes because these are the native SAP CC URL format. SAP CC generates URLs like /Collections/Streetwear/c/streetwear where the category slug follows a /c/ marker. Alokai matches these URLs with rewrites that strip the breadcrumb prefix, leaving /c/streetwear.

How Routing Is Configured

Routing in an Alokai Next.js storefront is built from four layers:

1. File-based routing — Next.js pages like app/[locale]/(default)/c/[[...slugs]]/page.tsx define the URL structure.
2. Route config — config/routes.ts defines pathname patterns used by components to build links.
3. Navigation config — config/navigation.ts exports pathnames for next-intl i18n routing.
4. Native URL rewrites — config/rewrites.config.mjs handles SAP CC breadcrumb-prefixed URLs (e.g., /Collections/Streetwear/c/streetwear → /c/streetwear).

Page components are decoupled from URL patterns — they re-export from sf-modules:

export { default, generateMetadata } from '@/sf-modules/category';

This decoupling means you can change URL paths without modifying any page logic.

Why Consider SEO-Friendly URLs

There are cases where /category and /product prefixes might be preferable:

• Descriptive URLs help users and search engines — Google recommends using descriptive words in URL paths rather than abbreviated codes.
• User trust — users can understand page content from the URL before clicking.
• Consistency — matches other Alokai integrations and common e-commerce conventions.

Rewrites vs Redirects

Before migrating, it's important to understand the two URL mechanisms already in play:

Rewrites (already in place) internally route SAP CC breadcrumb-prefixed URLs to the correct page handler. The browser URL doesn't change. For example, /Collections/Streetwear/c/streetwear is internally rewritten to /c/streetwear. After migration, you'll update the rewrite destinations but keep the same sources. See Next.js Rewrites docs for full configuration options.

Redirects (needed for migration) send an HTTP response telling browsers and search engines that a URL has permanently moved. Use 301 (Moved Permanently) — this is Google's standard recommendation for URL migrations and tells search engines to transfer ranking signals to the new URL. See Next.js Redirects docs and Google's redirects guide.

Migrating to SEO-Friendly URLs

mv app/[locale]/(default)/c  app/[locale]/(default)/category
mv app/[locale]/(default)/p  app/[locale]/(default)/product

export const routes = {
  categoryPage: ({ slugs }: CategoryPageParams = {}) => ({
    params: { slugs: slugs ?? [] },
    pathname: '/c/[[...slugs]]' as const,     pathname: '/category/[[...slugs]]' as const,   }),
  productPage: ({ id, slug }: ProductPageParams) => ({
    params: { id, slug },
    pathname: '/p/[slug]/[id]' as const,     pathname: '/product/[slug]/[id]' as const,   }),
};

export const pathnames = {
  '/c': '/c',   '/c/[[...slugs]]': '/c/[[...slugs]]',   '/category': '/category',   '/category/[[...slugs]]': '/category/[[...slugs]]',   // ...
  '/p/[slug]/[id]': '/p/[slug]/[id]',   '/product/[slug]/[id]': '/product/[slug]/[id]', } satisfies Pathnames<typeof locales>;

export default async function rewrites() {
  return {
    beforeFiles: [
      { destination: '/:locale/c/:slugs*', source: '/:locale/:prefix+/c/:slugs*' },       { destination: '/:locale/p/:code/:code', source: '/:locale/:prefix+/p/:code' },       { destination: '/:locale/category/:slugs*', source: '/:locale/:prefix+/c/:slugs*' },       { destination: '/:locale/product/:code/:code', source: '/:locale/:prefix+/p/:code' },     ],
  };
}

async redirects() {
  return [
    { source: '/:locale/c/:slugs*', destination: '/:locale/category/:slugs*', permanent: true },
    { source: '/:locale/p/:slug/:id', destination: '/:locale/product/:slug/:id', permanent: true },
  ];
},

Further Reading

• URL structure best practices — Google Search Central
• Designing a URL structure for ecommerce sites — Google Search Central
• Redirects and Google Search — Google Search Central
• Next.js Rewrites — Next.js docs
• Next.js Redirects — Next.js docs