keploy · amaan-bhati · Mar 31, 2026 · Apr 1, 2026 · Apr 1, 2026 · Apr 1, 2026
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,17 @@
+// Required by Next.js App Router. Every app/ directory MUST have a root layout
+// and it MUST include <html> and <body> — Next.js 14 will not inject them
+// automatically, and the App Router runtime crashes on root path without them
+// (causing a blank screen on localhost:3000/).
+//
+// All real layout (fonts, global CSS, analytics, structured data) continues to
+// live in pages/_app.tsx and pages/_document.tsx, which serve all pages/ routes
+// unchanged. This layout is only reached for routes inside app/ — currently just
+// app/sitemap.xml/route.ts, which is a Route Handler (not a rendered page), so
+// this layout's <body> is never actually visible to users or crawlers.
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -0,0 +1,23 @@
+"use client";
+import { useEffect } from "react";
+
+// Required when app/ directory is present alongside pages/.
+// Without this file, any unmatched App Router path (e.g. localhost:3000/ outside
+// the basePath) shows a blank "__next_error__" screen instead of a proper page.
+//
+// redirect() from next/navigation cannot be used here because not-found boundaries
+// run after the error has already been thrown. A client-side redirect is the
+// correct pattern for this boundary.
+export default function NotFound() {
+  useEffect(() => {
+    // Redirect to the Pages Router 404 page which has the full blog layout.
+    // basePath /blog is not prepended by window.location — use the full path.
+    window.location.replace("/blog/404");
+  }, []);
+
+  return (
+    <div style={{ padding: "2rem", fontFamily: "sans-serif" }}>
+      <p>Page not found — redirecting...</p>
+    </div>
+  );
+}
diff --git a/app/sitemap.xml/route.ts b/app/sitemap.xml/route.ts
@@ -0,0 +1,79 @@
+import { getAllPostsForSitemap } from "../../lib/api-server";
+import {
+  adaptPostsForSitemap,
+  assertFullSitemap,
+  buildAuthorEntries,
+  buildPostEntries,
+  buildTagEntries,
+  dedupeEntries,
+  getLatestModified,
+  getStaticFallbackXml,
+  serializeSitemap,
+  STATIC_ROUTES,
+} from "../../lib/sitemap";
+
+// ISR: Vercel caches this response in its CDN edge cache for 1 hour.
+//
+// After first generation: every request is served from CDN (<10ms, no Lambda invoked).
+// After TTL expires: stale version served immediately, regeneration happens in background.
+// If WordPress is down during regen: Vercel keeps serving the previous good version automatically.
+// Cold-start / first request: mitigated by post-deploy warming via .github/workflows/prewarm-sitemap.yml.
+export const revalidate = 3600;
+
+export async function GET(): Promise<Response> {
+  try {
+    // getAllPostsForSitemap() uses node:https directly (see lib/api-server.ts) to
+    // bypass Next.js App Router's RSC fetch instrumentation, which causes Cloudflare
+    // to return 502 HTML when global fetch() is used in this context.
+    const allPostsResult = await getAllPostsForSitemap();
+    const posts = adaptPostsForSitemap(allPostsResult);
+
+    // Reject partial WordPress responses — ISR will not cache a thrown error,
+    // so Vercel keeps serving the previous good cached version automatically.
+    assertFullSitemap(posts);
+
+    // Static routes get lastmod = newest post modification time,
+    // so listing pages reflect when the freshest underlying content changed.
+    const latestModified = getLatestModified(posts) ?? new Date().toISOString();
+    const staticEntries = STATIC_ROUTES.map((r) => ({
+      ...r,
+      lastModified: latestModified,
+    }));
+
+    const entries = dedupeEntries([
+      ...staticEntries,
+      ...buildPostEntries(posts),
+      ...buildAuthorEntries(posts),
+      ...buildTagEntries(posts),
+    ]);
+
+    const xml = serializeSitemap(entries);
+
+    return new Response(xml, {
+      status: 200,
+      headers: {
+        "Content-Type": "application/xml",
+        // s-maxage: CDN caches for 1h. stale-while-revalidate: serve stale while
+        // regenerating in background. max-age=0: browsers always revalidate with CDN.
+        "Cache-Control": "public, max-age=0, s-maxage=3600, stale-while-revalidate=3600",
+      },
+    });
+  } catch (error) {
+    console.error(
+      "Sitemap generation failed — serving static-routes-only fallback. " +
+        "Verify WORDPRESS_API_URL is reachable and WPGraphQL is responding.",
+      error
+    );
+
+    // ISR does NOT cache non-2xx responses.
+    // no-store prevents any downstream proxy from caching this degraded response,
+    // so crawlers will retry on the next request once WordPress is back.
+    return new Response(getStaticFallbackXml(), {
+      status: 503,
+      headers: {
+        "Content-Type": "application/xml",
+        "Cache-Control": "no-store",
+      },
+    });
+  }
+}
diff --git a/components/AuthorMapping.tsx b/components/AuthorMapping.tsx
@@ -13,8 +13,8 @@ export default function AuthorMapping({
 }) {
   const [currentPage, setCurrentPage] = useState(1);
 
-  const authorData = [];
-  const ppmaAuthorNameArray = [];
+  const authorData: Array<{ publishingAuthor: string; ppmaAuthorName: string; avatarUrl: string; slug: string }> = [];
+  const ppmaAuthorNameArray: string[] = [];
 
   AuthorArray.forEach((item) => {
     const ppmaAuthorName = formatAuthorName(item.ppmaAuthorName);

diff --git a/components/NotFoundPage.tsx b/components/NotFoundPage.tsx
@@ -219,13 +219,13 @@ const NotFoundPage = ({ latestPosts, communityPosts, technologyPosts }: NotFound
           </section>
         ) : (
           <>
-            {latestPosts?.edges?.length > 0 && (
+            {(latestPosts?.edges?.length ?? 0) > 0 && (
               <section className="py-4">
                 <h2 className="bg-gradient-to-r from-orange-200 to-orange-100 bg-[length:100%_20px] bg-no-repeat bg-left-bottom w-max mb-8 text-4xl heading1 md:text-4xl font-bold tracking-tighter leading-tight">
                   Latest from Our Blog
                 </h2>
                 <PostGrid>
-                  {latestPosts.edges.slice(0, 6).map(({ node: post }) => (
+                  {(latestPosts?.edges ?? []).slice(0, 6).map(({ node: post }) => (
                     <PostCard
                       key={post.slug}
                       title={post.title}
@@ -241,13 +241,13 @@ const NotFoundPage = ({ latestPosts, communityPosts, technologyPosts }: NotFound
               </section>
             )}
 
-            {communityPosts?.edges?.length > 0 && (
+            {(communityPosts?.edges?.length ?? 0) > 0 && (
               <section className="py-4">
                 <h2 className="bg-gradient-to-r from-orange-200 to-orange-100 bg-[length:100%_20px] bg-no-repeat bg-left-bottom w-max mb-8 text-4xl heading1 md:text-4xl font-bold tracking-tighter leading-tight">
                   Latest Community Blogs
                 </h2>
                 <PostGrid>
-                  {communityPosts.edges.slice(0, 6).map(({ node: post }) => (
+                  {(communityPosts?.edges ?? []).slice(0, 6).map(({ node: post }) => (
                     <PostCard
                       key={post.slug}
                       title={post.title}
@@ -263,13 +263,13 @@ const NotFoundPage = ({ latestPosts, communityPosts, technologyPosts }: NotFound
               </section>
             )}
 
-            {technologyPosts?.edges?.length > 0 && (
+            {(technologyPosts?.edges?.length ?? 0) > 0 && (
               <section className="py-4">
                 <h2 className="bg-gradient-to-r from-orange-200 to-orange-100 bg-[length:100%_20px] bg-no-repeat bg-left-bottom w-max mb-8 text-4xl heading1 md:text-4xl font-bold tracking-tighter leading-tight">
                   Latest Technology Blogs
                 </h2>
                 <PostGrid>
-                  {technologyPosts.edges.slice(0, 6).map(({ node: post }) => (
+                  {(technologyPosts?.edges ?? []).slice(0, 6).map(({ node: post }) => (
                     <PostCard
                       key={post.slug}
                       title={post.title}

diff --git a/components/TableContents.tsx b/components/TableContents.tsx
@@ -6,7 +6,7 @@ import { sanitizeStringForURL } from "../utils/sanitizeStringForUrl";
 function TocTooltip({ text, children }: { text: string; children: React.ReactNode }) {
   const [show, setShow] = useState(false);
   const [coords, setCoords] = useState({ top: 0, left: 0 });
-  const timeout = useRef<ReturnType<typeof setTimeout>>(null);
+  const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   const handleEnter = () => {
@@ -106,7 +106,7 @@ export default function TOC({ headings, isList, setIsList }) {
     const element = document.getElementById(sanitizedId);
     if (element) {
       window.scrollTo({ top: element.offsetTop - 80, behavior: "smooth" });
-      window.history.replaceState(null, null, `#${sanitizedId}`);
+      window.history.replaceState(null, "", `#${sanitizedId}`);
     }
   };
 

diff --git a/components/more-stories.tsx b/components/more-stories.tsx
@@ -40,7 +40,7 @@ export default function MoreStories({
   const [visibleCount, setVisibleCount] = useState(12);
   const [loading, setLoading] = useState(false);
   const [hasMore, setHasMore] = useState(initialPageInfo?.hasNextPage ?? true);
-  const [error, setError] = useState(null);
+  const [error, setError] = useState<string | null>(null);
   const [endCursor, setEndCursor] = useState(initialPageInfo?.endCursor ?? null);
   const [buffer, setBuffer] = useState<{ node: Post }[]>([]);
   const [searchLoading, setSearchLoading] = useState(false);

diff --git a/components/post-body.tsx b/components/post-body.tsx
@@ -47,9 +47,9 @@ export default function PostBody({
   slug: string | string[] | undefined;
   categories?: Post["categories"];
 }) {
-  const [tocItems, setTocItems] = useState([]);
-  const [copySuccessList, setCopySuccessList] = useState([]);
-  const [headingCopySuccessList, setHeadingCopySuccessList] = useState([]);
+  const [tocItems, setTocItems] = useState<{ id: string; title: string | null; type: string }[]>([]);
+  const [copySuccessList, setCopySuccessList] = useState<boolean[]>([]);
+  const [headingCopySuccessList, setHeadingCopySuccessList] = useState<boolean[]>([]);
   const [isSmallScreen, setIsSmallScreen] = useState(false);
   const [replacedContent, setReplacedContent] = useState(content || "");
   const [isList, setIsList] = useState(false);

diff --git a/lib/api-server.ts b/lib/api-server.ts
@@ -0,0 +1,125 @@
+/**
+ * Server-only API helpers.
+ *
+ * This module uses node:https directly instead of the global fetch() because
+ * Next.js App Router's RSC context wraps fetch() with its own instrumentation
+ * layer. That instrumented fetch sends headers that Cloudflare (in front of
+ * wp.keploy.io) rejects with 502 HTML instead of JSON.
+ *
+ * node:https is a raw TCP connection — no Next.js middleware in the path —
+ * identical to what curl or plain `node -e "fetch()"` sends.
+ *
+ * DO NOT import this file from client components. It uses node:https which
+ * does not exist in the browser. All client-side API calls go through
+ * lib/api.ts which uses the standard fetch() API.
+ */
+import https from "node:https";
+
+function getApiUrl(): string {
+  const url = process.env.WORDPRESS_API_URL || process.env.NEXT_PUBLIC_WORDPRESS_API_URL;
+  if (!url) {
+    throw new Error(
+      "WordPress API URL is not configured. Set WORDPRESS_API_URL or NEXT_PUBLIC_WORDPRESS_API_URL."
+    );
+  }
+  return url;
+}
+
+function fetchGraphQL(query: string, variables: Record<string, unknown> = {}): Promise<any> {
+  const apiUrl = getApiUrl();
+  const url = new URL(apiUrl);
+  const body = JSON.stringify({ query, variables });
+
+  return new Promise((resolve, reject) => {
+    const req = https.request(
+      {
+        hostname: url.hostname,
+        port: url.port || 443,
+        path: url.pathname + url.search,
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Content-Length": Buffer.byteLength(body),
+          "User-Agent": "keploy-blog-sitemap/1.0",
+        },
+      },
+      (res) => {
+        let data = "";
+        res.on("data", (chunk) => (data += chunk));
+        res.on("end", () => {
+          try {
+            const json = JSON.parse(data);
+            if (json.errors) reject(new Error(JSON.stringify(json.errors)));
+            else resolve(json.data);
+          } catch {
+            reject(
+              new Error(
+                `WordPress returned non-JSON (HTTP ${res.statusCode}): ${data.slice(0, 120)}`
+              )
+            );
+          }
+        });
+      }
+    );
+    req.on("error", reject);
+    req.write(body);
+    req.end();
+  });
+}
+
+/**
+ * Fetches all posts with only the fields needed for sitemap generation.
+ * Uses the same cursor-based pagination as getAllPosts() in lib/api.ts but
+ * requests a smaller field set (no title/excerpt/featuredImage) to reduce
+ * payload size across the ~10 pagination pages.
+ */
+export async function getAllPostsForSitemap(): Promise<{ edges: any[] }> {
+  let allEdges: any[] = [];
+  let hasNextPage = true;
+  let endCursor: string | null = null;
+
+  while (hasNextPage) {
+    const data = await fetchGraphQL(
+      `
+      query AllPostsForSitemap($after: String) {
+        posts(first: 50, after: $after, where: { orderby: { field: DATE, order: DESC } }) {
+          edges {
+            node {
+              slug
+              modified
+              ppmaAuthorName
+              categories {
+                edges {
+                  node {
+                    name
+                    slug
+                  }
+                }
+              }
+              tags {
+                edges {
+                  node {
+                    name
+                  }
+                }
+              }
+            }
+          }
+          pageInfo {
+            hasNextPage
+            endCursor
+          }
+        }
+      }
+      `,
+      { after: endCursor }
+    );
+
+    const edges = data?.posts?.edges ?? [];
+    allEdges = [...allEdges, ...edges];
+    hasNextPage = data?.posts?.pageInfo?.hasNextPage ?? false;
+    endCursor = data?.posts?.pageInfo?.endCursor ?? null;
+  }
+
+  return { edges: allEdges };
+}