implement notFound handling for missing APIs in ProviderPage and ApiPage; update next.config for redirects based on legacy slugs

Author: tondeee

app/apis/[providerSlug]/[serviceSlug]/page.tsx

@@ -3,9 +3,10 @@ import Link from "next/link";
 import Image from "next/image";
 import { marked } from "marked";
 import { Metadata, ResolvingMetadata } from "next";
+import { notFound } from "next/navigation";
 import DescriptionSection from "../../../../components/DescriptionSection";
 import list from "../../../../list.json";
-import { Badge } from "@/components/ui/badge";
+
 import JsonTreeContainer, { JsonTree } from "@/components/JsonTree";
 import ApiButtons from "@/components/ApiButtons";
 import VisitCounter from "@/components/VisitCounter";
@@ -154,13 +155,7 @@ export async function generateMetadata(
   const isProduction = process.env.NEXT_PUBLIC_SITE_ENV === "production";
 
   if (!api) {
-    return {
-      title: "API Not Found",
-      description: "The requested API was not found in the directory.",
-      alternates: {
-        canonical: `${siteUrl}/apis/${providerSlug}/${serviceSlug}`,
-      },
-    };
+    notFound();
   }
 
   const title = `${api.info.title} API`;
@@ -213,17 +208,7 @@ export default async function ApiPage({
   const api = getData(providerSlug, serviceSlug);
 
   if (!api) {
-    return (
-      <div className="container mx-auto p-6 max-w-4xl">
-        <Link
-          href="/"
-          className="text-[#388c9a] hover:underline mb-4 inline-block"
-        >
-          ← Back to APIs
-        </Link>
-        <div>API not found</div>
-      </div>
-    );
+    notFound();
   }
 
   return (

app/apis/[providerSlug]/page.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Link from "next/link";
+import { notFound } from "next/navigation";
 import list from "../../../list.json";
 import { generateSimpleMetadata } from "@/sanity/lib/metadata";
 
@@ -108,6 +109,10 @@ export default async function ProviderPage({
   const { providerSlug } = await params;
   const apis = getProviderApis(providerSlug);
 
+  if (apis.length === 0) {
+    notFound();
+  }
+
   const services = apis.filter((api) => api.serviceName);
   if (services.length > 0) {
     const providerName = apis[0]?.providerName || providerSlug;

next.config.ts

@@ -1,6 +1,6 @@
 import { withSentryConfig } from "@sentry/nextjs";
 import type { NextConfig } from "next";
-
+import list from "./list.json";
 const nextConfig: NextConfig = {
   output: "standalone",
   basePath: "",
@@ -31,36 +31,69 @@ const nextConfig: NextConfig = {
 
     return config;
   },
-};
+  async redirects() {
+    const redirectList = [];
 
-export default withSentryConfig(nextConfig, {
-  // For all available options, see:
-  // https://www.npmjs.com/package/@sentry/webpack-plugin#options
+    const normalizeSlug = (text: string, preserveDots = false) => {
+      return text
+        .toLowerCase()
+        .replace(preserveDots ? /[^a-z0-9.]+/g : /[^a-z0-9]+/g, "-")
+        .replace(/-+/g, "-")
+        .replace(/^-+|-+$/g, "");
+    };
 
-  org: "apisguru",
-  project: "apis-guru",
+    const normalizeServiceSlug = (service: string) => {
+      return service
+        .toLowerCase()
+        .replace(/[\(\)]/g, "")
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/-+/g, "-")
+        .replace(/^-+|-+$/g, "");
+    };
 
-  // Only print logs for uploading source maps in CI
-  silent: !process.env.CI,
+    for (const key in list) {
+      if (!Object.prototype.hasOwnProperty.call(list, key)) continue;
 
-  // For all available options, see:
-  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+      const [provider, service] = key.split(":");
+      if (!provider) {
+        console.warn(`Invalid key format: ${key}`);
+        continue;
+      }
 
-  // Upload a larger set of source maps for prettier stack traces (increases build time)
-  widenClientFileUpload: true,
+      const legacyFullSlug = normalizeSlug(key);
+      const currentProviderSlug = normalizeSlug(provider, true);
+      const legacyProviderSlug = normalizeSlug(provider.replace(/\./g, "-"));
 
-  // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-  // This can increase your server load as well as your hosting bill.
-  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-  // side errors will fail.
-  // tunnelRoute: "/monitoring",
+      const destination = service
+        ? `/apis/${encodeURIComponent(currentProviderSlug)}/${encodeURIComponent(normalizeServiceSlug(service))}`
+        : `/apis/${encodeURIComponent(currentProviderSlug)}`;
 
-  // Automatically tree-shake Sentry logger statements to reduce bundle size
-  disableLogger: true,
+      if (legacyFullSlug !== currentProviderSlug) {
+        redirectList.push({
+          source: `/apis/${encodeURIComponent(legacyFullSlug)}`,
+          destination,
+          permanent: true,
+        });
+      }
+
+      if (legacyProviderSlug !== currentProviderSlug) {
+        redirectList.push({
+          source: `/apis/${encodeURIComponent(legacyProviderSlug)}`,
+          destination: `/apis/${encodeURIComponent(currentProviderSlug)}`,
+          permanent: true,
+        });
+      }
+    }
 
-  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
-  // See the following for more information:
-  // https://docs.sentry.io/product/crons/
-  // https://vercel.com/docs/cron-jobs
+    return redirectList;
+  },
+};
+
+export default withSentryConfig(nextConfig, {
+  org: "apisguru",
+  project: "apis-guru",
+  silent: !process.env.CI,
+  widenClientFileUpload: true,
+  disableLogger: true,
   automaticVercelMonitors: true,
 });