Abhishekfm · Nov 6, 2026 · Nov 6, 2026
diff --git a/app/[locale]/(user)/aimodels/[modelId]/AIModelDetailsPage.tsx b/app/[locale]/(user)/aimodels/[modelId]/AIModelDetailsPage.tsx
@@ -7,15 +7,17 @@ import { Spinner, Text } from 'opub-ui';
 import BreadCrumbs from '@/components/BreadCrumbs';
 import JsonLd from '@/components/JsonLd';
 import { GraphQL } from '@/lib/api';
+import { aiModelLookup, publicPageUrl } from '@/lib/public-link';
 import { generateJsonLd } from '@/lib/utils';
 import Metadata from './components/Metadata';
 import PrimaryData from './components/PrimaryData';
 import Versions from './components/Versions';
 
 const aiModelQuery = graphql(`
-  query getAIModel($modelId: Int!) {
-    getAiModel(modelId: $modelId) {
+  query getAIModel($modelId: Int, $publicId: String) {
+    getAiModel(modelId: $modelId, publicId: $publicId) {
       id
+      urlSlug
       name
       displayName
       description
@@ -93,7 +95,7 @@ export default function AIModelDetailsPage({
 }) {
   const { data, isLoading, error } = useQuery(
     [`aimodel_details_${modelId}`],
-    () => GraphQL(aiModelQuery, {}, { modelId: parseInt(modelId) }),
+    () => GraphQL(aiModelQuery, {}, aiModelLookup(modelId)),
     {
       retry: false,
       onError: (err) => {
@@ -108,7 +110,7 @@ export default function AIModelDetailsPage({
     '@context': 'https://schema.org',
     '@type': 'SoftwareApplication',
     name: modelData?.displayName || modelData?.name,
-    url: `${process.env.NEXT_PUBLIC_PLATFORM_URL}/aimodels/${modelId}`,
+    url: publicPageUrl('aimodels', modelData?.urlSlug || modelId),
     description: modelData?.description,
     applicationCategory: 'AI Model',
     publisher: {

diff --git a/app/[locale]/(user)/aimodels/[modelId]/page.tsx b/app/[locale]/(user)/aimodels/[modelId]/page.tsx
@@ -1,45 +1,76 @@
+import { graphql } from '@/gql';
+
+import { GraphQL } from '@/lib/api';
+import {
+  isCanonicalRedirect,
+  redirectToCanonical,
+} from '@/lib/canonical-redirect';
+import { aiModelLookup, publicPageUrl } from '@/lib/public-link';
 import { generatePageMetadata } from '@/lib/utils';
-import { use } from 'react';
 import AIModelDetailsPage from './AIModelDetailsPage';
 
-// For now, we'll use a simple metadata generation
-// You can add GraphQL query later if needed
+const aiModelMetaQuery = graphql(`
+  query getAIModelInfo($modelId: Int, $publicId: String) {
+    getAiModel(modelId: $modelId, publicId: $publicId) {
+      name
+      displayName
+      description
+      urlSlug
+    }
+  }
+`);
+
 export async function generateMetadata({
   params,
 }: {
   params: Promise<{ modelId: string }>;
 }) {
+  const { modelId } = await params;
   try {
-    const { modelId } = await params;
-    // TODO: Fetch AI model data from backend API
-    // const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/aimodels/${modelId}`);
-    // const model = await res.json();
-
+    const res = await GraphQL(aiModelMetaQuery, {}, aiModelLookup(modelId));
+    const model = res?.getAiModel;
+    await redirectToCanonical('aimodels', modelId, model?.urlSlug);
+    const title = model?.displayName || model?.name || 'AI Model Details';
+    const description =
+      model?.description ||
+      'Explore AI model details, capabilities, and specifications';
+    const segment = model?.urlSlug || modelId;
+
     return generatePageMetadata({
-      title: `AI Model Details | CivicDataSpace`,
-      description: 'Explore AI model details, capabilities, and specifications',
+      title: `${title} | CivicDataSpace`,
+      description,
       keywords: ['AI Model', 'Machine Learning', 'API', 'Model Registry'],
       openGraph: {
         type: 'website',
         locale: 'en_US',
-        url: `${process.env.NEXT_PUBLIC_PLATFORM_URL}/aimodels/${modelId}`,
-        title: 'AI Model Details',
-        description: 'Explore AI model details and capabilities',
+        url: publicPageUrl('aimodels', segment),
+        title,
+        description,
         siteName: 'CivicDataSpace',
         image: `${process.env.NEXT_PUBLIC_PLATFORM_URL}/og.png`,
       },
     });
   } catch (e) {
+    if (isCanonicalRedirect(e)) throw e;
     console.error('Metadata fetch error', e);
     return generatePageMetadata({ title: 'AI Model Details' });
   }
 }
 
-export default function Page({
+export default async function Page({
   params,
 }: {
   params: Promise<{ modelId: string }>;
 }) {
-  const { modelId } = use(params);
+  const { modelId } = await params;
+
+  try {
+    const res = await GraphQL(aiModelMetaQuery, {}, aiModelLookup(modelId));
+    await redirectToCanonical('aimodels', modelId, res?.getAiModel?.urlSlug);
+  } catch (error) {
+    if (isCanonicalRedirect(error)) throw error;
+    console.error('AI model lookup error', error);
+  }
+
   return <AIModelDetailsPage modelId={modelId} />;
 }
diff --git a/app/[locale]/(user)/collaboratives/[collaborativeSlug]/CollaborativeDetailsClient.tsx b/app/[locale]/(user)/collaboratives/[collaborativeSlug]/CollaborativeDetailsClient.tsx
@@ -95,6 +95,7 @@ const CollaborativeDetails = graphql(`
       datasets {
         title
         id
+        urlSlug
         isIndividualDataset
         user {
           fullName
@@ -133,6 +134,7 @@ const CollaborativeDetails = graphql(`
       }
       useCases {
         id
+        urlSlug
         title
         summary
         slug
@@ -539,7 +541,7 @@ const CollaborativeDetailClient = () => {
                           iconColor="success"
                           href={getPlatformEntityUrl(
                             'usecases',
-                            useCase.id,
+                            useCase.urlSlug || useCase.id,
                             locale
                           )}
                         />
@@ -597,7 +599,7 @@ const CollaborativeDetailClient = () => {
                         ]}
                         href={getPlatformEntityUrl(
                           'datasets',
-                          dataset.id,
+                          dataset.urlSlug || dataset.id,
                           locale
                         )}
                         leftFooterChips={[

diff --git a/app/[locale]/(user)/components/Datasets.tsx b/app/[locale]/(user)/components/Datasets.tsx
@@ -14,6 +14,7 @@ import {
   Text,
 } from 'opub-ui';
 
+import { publicHref } from '@/lib/public-link';
 import { cn, mediaUrl } from '@/lib/utils';
 import { Icons } from '@/components/icons';
 import { DatasetListingSkeleton } from '@/components/loading';
@@ -40,6 +41,7 @@ interface DatasetPublisher {
 
 interface DatasetResult {
   id: string | number;
+  url_slug?: string | null;
   title: string;
   description?: string;
   modified: string;
@@ -188,7 +190,7 @@ const Datasets = () => {
                       ]}
                       variation={'collapsed'}
                       iconColor="metadata"
-                      href={`/datasets/${item.id}`}
+                      href={publicHref('datasets', item.url_slug, item.id)}
                       withViewButton={false}
                       // type={[
                       //   {

diff --git a/app/[locale]/(user)/components/ListingComponent.tsx b/app/[locale]/(user)/components/ListingComponent.tsx
@@ -18,6 +18,7 @@ import {
   Tray,
 } from 'opub-ui';
 
+import { publicHref } from '@/lib/public-link';
 import { cn, formatDate, mediaUrl } from '@/lib/utils';
 import BreadCrumbs from '@/components/BreadCrumbs';
 import { Icons } from '@/components/icons';
@@ -58,6 +59,7 @@ interface ListingSdg {
 
 interface ListingResult {
   id: string | number;
+  url_slug?: string | null;
   title: string;
   description?: string;
   modified: string;
@@ -722,7 +724,13 @@ const ListingComponent: React.FC<ListingProps> = ({
                           view === 'expanded' ? 'expanded' : 'collapsed'
                         }
                         iconColor="warning"
-                        href={`${redirectionURL}/${item.id}`}
+                        href={publicHref(
+                          redirectionURL === '/usecases' || type === 'usecase'
+                            ? 'usecases'
+                            : 'datasets',
+                          item.url_slug,
+                          item.id
+                        )}
                         data-tour={
                           index === 0 && type === 'dataset'
                             ? 'dataset-card'

diff --git a/app/[locale]/(user)/components/UseCases.tsx b/app/[locale]/(user)/components/UseCases.tsx
@@ -16,6 +16,7 @@ import {
 } from 'opub-ui';
 
 import { GraphQL } from '@/lib/api';
+import { publicHref } from '@/lib/public-link';
 import { cn, formatDate, mediaUrl } from '@/lib/utils';
 import { Icons } from '@/components/icons';
 import { UseCaseListingSkeleton } from '@/components/loading';
@@ -29,6 +30,7 @@ const useCasesListDoc = graphql(`
   ) {
     publishedUseCases(filters: $filters, pagination: $pagination) {
       id
+      urlSlug
       title
       summary
       slug
@@ -143,7 +145,7 @@ const UseCasesListingPage = () => {
                       <Card
                         title={item.title || ''}
                         key={index}
-                        href={`/usecases/${item.id}`}
+                        href={publicHref('usecases', item.urlSlug, item.id)}
                         metadataContent={[
                           {
                             icon: Icons.calendarEvent,

diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/DatasetDetailsPage.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/DatasetDetailsPage.tsx
@@ -13,6 +13,7 @@ import { useAnalytics } from '@/hooks/use-analytics';
 import { useTourTrigger } from '@/hooks/use-tour-trigger';
 import { env } from '@/env';
 import { GraphQL } from '@/lib/api';
+import { datasetLookup } from '@/lib/public-link';
 import { generateJsonLd } from '@/lib/utils';
 import {
   buildDatasetCover,
@@ -25,9 +26,10 @@ import { DatasetCover } from './components/DatasetCover/DatasetCover';
 import { DatasetTabs } from './components/DatasetTabs/DatasetTabs';
 
 const datasetQuery = graphql(`
-  query getDataset($datasetId: UUID!) {
-    getDataset(datasetId: $datasetId) {
+  query getDataset($datasetId: UUID, $publicId: String) {
+    getDataset(datasetId: $datasetId, publicId: $publicId) {
       id
+      urlSlug
       title
       description
       downloadCount
@@ -133,18 +135,22 @@ export default function DatasetDetailsPage({
   useTourTrigger(true, 1500);
   const { trackDataset } = useAnalytics();
 
+  // Load this dataset. Old UUID links and the current urlSlug both resolve.
+  const datasetQueryResult = useQuery(['dataset-cover', datasetId], () =>
+    GraphQL(datasetQuery, {}, datasetLookup(datasetId))
+  );
+  const recordId = datasetQueryResult.data?.getDataset?.id;
+
   // Record one view per dataset, whichever tab the visitor opens.
   useEffect(() => {
-    trackDataset(datasetId);
-  }, [datasetId, trackDataset]);
+    if (recordId) trackDataset(recordId);
+  }, [recordId, trackDataset]);
 
-  // Load this dataset.
-  const datasetQueryResult = useQuery(['dataset-cover', datasetId], () =>
-    GraphQL(datasetQuery, {}, { datasetId })
-  );
-  // Count the charts that belong to this dataset.
-  const chartQueryResult = useQuery(['dataset-charts', datasetId], () =>
-    GraphQL(chartCountQuery, {}, { datasetId })
+  // Count the charts that belong to this dataset. Charts are keyed by the UUID.
+  const chartQueryResult = useQuery(
+    ['dataset-charts', recordId],
+    () => GraphQL(chartCountQuery, {}, { datasetId: recordId as string }),
+    { enabled: Boolean(recordId) }
   );
   // Collect published use cases so the summary can count the ones that include this dataset.
   const useCaseQueryResult = useQuery(['dataset-use-case-ids'], () =>
@@ -157,7 +163,7 @@ export default function DatasetDetailsPage({
 
   const dataset = datasetQueryResult.data?.getDataset;
   // Public address the share actions use.
-  const pageUrl = buildDatasetPageUrl(datasetId);
+  const pageUrl = buildDatasetPageUrl(dataset?.urlSlug || datasetId);
   const jsonLd = generateJsonLd({
     '@context': 'https://schema.org',
     '@type': 'Dataset',

diff --git a/...ale]/(user)/datasets/[datasetIdentifier]/components/DatasetConnected/DatasetConnected.tsx b/...ale]/(user)/datasets/[datasetIdentifier]/components/DatasetConnected/DatasetConnected.tsx
@@ -7,6 +7,7 @@ import { Card, Spinner } from 'opub-ui';
 
 import { Icons } from '@/components/icons';
 import { GraphQLPublic } from '@/lib/api';
+import { publicHref } from '@/lib/public-link';
 import { backendFileUrl, joinNames } from '@/lib/public-entity';
 import { formatDate } from '@/lib/utils';
 import { stripMarkdown } from '@/app/[locale]/(user)/search/components/UnifiedListingComponent';
@@ -17,6 +18,7 @@ const connectedUseCaseQuery = graphql(`
   query connectedUseCaseCard($pk: ID!) {
     useCase(pk: $pk) {
       id
+      urlSlug
       title
       summary
       slug
@@ -91,6 +93,7 @@ export type ConnectedUseCase = {
   id: string;
   title?: string | null;
   summary?: string | null;
+  urlSlug?: string | null;
   slug?: string | null;
   modified?: string | number | null;
   isIndividualUsecase?: boolean | null;
@@ -393,7 +396,7 @@ function UseCaseCard({ item }: { item: ConnectedUseCase }) {
       metadataContent={metadataContent}
       variation="collapsed"
       iconColor="success"
-      href={`/usecases/${item.id}`}
+      href={publicHref('usecases', item.urlSlug, item.id)}
       imageUrl={backendFileUrl(item.logo?.url) || ''}
       leftFooterChips={[
         {

diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/SimilarDatasets/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/SimilarDatasets/index.tsx
@@ -13,6 +13,7 @@ import {
 } from 'opub-ui';
 
 import { GraphQL } from '@/lib/api';
+import { publicHref } from '@/lib/public-link';
 import { cn, mediaUrl } from '@/lib/utils';
 import { Icons } from '@/components/icons';
 import Styles from './similarDatasets.module.scss';
@@ -25,6 +26,7 @@ const similarDatasetQuery = graphql(`
       similarDatasets {
         downloadCount
         id
+        urlSlug
         title
         tags {
           id
@@ -184,7 +186,7 @@ const SimilarDatasets: React.FC = () => {
                             ]}
                             variation={'collapsed'}
                             iconColor="warning"
-                            href={`/datasets/${item.id}`}
+                            href={publicHref('datasets', item.urlSlug, item.id)}
                             withViewButton={false}
                           />
                         </CarouselItem>

diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/dataset-cover.ts b/app/[locale]/(user)/datasets/[datasetIdentifier]/dataset-cover.ts
@@ -4,7 +4,7 @@
  * Also builds the public page address used by the share actions.
  */
 
-import { env } from '@/env';
+import { publicPageUrl } from '@/lib/public-link';
 import {
   backendFileUrl,
   formatShortDate,
@@ -128,9 +128,8 @@ const CHARTS_ANCHOR = '#dataset-visualisations';
 const CONNECTED_USE_CASES = '#dataset-connected-usecases';
 const CONNECTED_COLLABORATIVES = '#dataset-connected-collaboratives';
 
-export function buildDatasetPageUrl(datasetId: string): string {
-  const base = env.NEXT_PUBLIC_PLATFORM_URL.replace(/\/$/, '');
-  return `${base}/datasets/${encodeURIComponent(datasetId)}`;
+export function buildDatasetPageUrl(segment: string): string {
+  return publicPageUrl('datasets', segment);
 }
 
 export function buildDatasetCover(