Next Upgrade to v15

app/[slug]/page.tsx

@@ -5,11 +5,18 @@ import { Blog, Header, TableOfContents } from "@/components";
 import { Container, Article } from "@/components/Layouts/";
 
 /* API */
-import { useAllPostLinks, usePost } from "@/utils";
+import { getAllPostLinks, getPost } from "@/utils";
 
-const Page = ({ params }: { params: { slug: string } }) => {
-  const post = usePost(params.slug);
-  const postLinks = useAllPostLinks();
+export async function generateStaticParams() {
+  return getAllPostLinks().map((post) => ({
+    slug: post.slug,
+  }));
+}
+
+const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
+  const slug = (await params).slug;
+  const post = getPost(slug);
+  const postLinks = getAllPostLinks();
 
   if (!post) {
     return null;

app/page.tsx

@@ -1,4 +1,4 @@
-import { useAllPostLinks, useAllServices } from "@/utils";
+import { getAllPostLinks, useAllServices } from "@/utils";
 
 import Content from "@/content/home.mdx";
 import Service from "@/content/services.mdx";
@@ -17,7 +17,7 @@ export const metadata: Metadata = {
 
 const Page = () => {
   const services = useAllServices();
-  const posts = useAllPostLinks();
+  const posts = getAllPostLinks();
   return (
     <>
       <Header title="James Amner" subtitle="Senior PHP Developer">

components/Layouts/__snapshots__/Article.stories.tsx.snap

@@ -7,7 +7,6 @@ exports[`Layout/Article Default smoke-test 1`] = `
       <div class="basis-1/3">
         <div class>
           <img alt
-               fetchpriority="high"
                width="500"
                height="500"
                decoding="async"
@@ -60,7 +59,6 @@ exports[`Layout/Article NoChildren smoke-test 1`] = `
       <div class="basis-1/3">
         <div class>
           <img alt
-               fetchpriority="high"
                width="500"
                height="500"
                decoding="async"
@@ -168,7 +166,6 @@ exports[`Layout/Article Offset smoke-test 1`] = `
       <div class="basis-1/3">
         <div class="-mt-10 md:-mt-20 h-full">
           <img alt
-               fetchpriority="high"
                width="500"
                height="500"
                decoding="async"

mdx-components.tsx

@@ -31,7 +31,7 @@ const makeSlug = (value: ReactNode | ReactNode[]): string => {
         )
           return node;
 
-        if (typeof node === "object" && node !== null && "props" in node) {
+        if (isNodeWithChildren(node)) {
           return makeSlug(node.props.children);
         }
 
@@ -41,6 +41,25 @@ const makeSlug = (value: ReactNode | ReactNode[]): string => {
   );
 };
 
+const isNodeWithChildren = (
+  value: unknown,
+): value is { props: { children: string | number | boolean | Array<any> } } => {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "props" in value &&
+    value.props !== null &&
+    typeof value.props === "object" &&
+    "children" in value.props &&
+    value.props.children !== null &&
+    typeof value.props.children !== "undefined" &&
+    (typeof value.props.children === "string" ||
+      typeof value.props.children === "number" ||
+      typeof value.props.children === "boolean" ||
+      Array.isArray(value.props.children))
+  );
+};
+
 export const components = {
   a: (
     props: DetailedHTMLProps<

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.