fix: fixed hydration errors

package-lock.json

@@ -21,7 +21,7 @@
         "framer-motion": "^10.17.12",
         "lucide-react": "^0.306.0",
         "nanoid": "^5.0.4",
-        "next": "^14.0.4",
+        "next": "^14.1.0",
         "notion-client": "^6.16.0",
         "notion-types": "^6.16.0",
         "notion-utils": "^6.16.0",
@@ -817,8 +817,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.0.4",
+      "version": "14.1.0",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.0.tgz",
+      "integrity": "sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw=="
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "14.0.4",
@@ -848,11 +849,12 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.0.4",
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.0.tgz",
+      "integrity": "sha512-nUDn7TOGcIeyQni6lZHfzNoo9S0euXnu0jhsbMOmMJUBfgsnESdjN97kM7cBqQxZa8L/bM9om/S5/1dzCrW6wQ==",
       "cpu": [
         "arm64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -862,9 +864,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.0.4",
+      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.0.tgz",
-      "integrity": "sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw==",
+      "integrity": "sha512-1jgudN5haWxiAl3O1ljUS2GfupPmcftu2RYJqZiMJmmbBT5M1XDffjUtRUzP4W3cBHsrvkfOFdQ71hAreNQP6g==",
       "cpu": [
         "x64"
       ],
@@ -877,9 +879,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.0.4",
+      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.0.tgz",
-      "integrity": "sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==",
+      "integrity": "sha512-RHo7Tcj+jllXUbK7xk2NyIDod3YcCPDZxj1WLIYxd709BQ7WuRYl3OWUNG+WUfqeQBds6kvZYlc42NJJTNi4tQ==",
       "cpu": [
         "arm64"
       ],
@@ -892,9 +894,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.0.4",
+      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.0.tgz",
-      "integrity": "sha512-8QftwPEW37XxXoAwsn+nXlodKWHfpMaSvt81W43Wh8dv0gkheD+30ezWMcFGHLI71KiWmHK5PSQbTQGUiidvLQ==",
+      "integrity": "sha512-v6kP8sHYxjO8RwHmWMJSq7VZP2nYCkRVQ0qolh2l6xroe9QjbgV8siTbduED4u0hlk0+tjS6/Tuy4n5XCp+l6g==",
       "cpu": [
         "arm64"
       ],
@@ -907,9 +909,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.0.4",
+      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.0.tgz",
-      "integrity": "sha512-/s/Pme3VKfZAfISlYVq2hzFS8AcAIOTnoKupc/j4WlvF6GQ0VouS2Q2KEgPuO1eMBwakWPB1aYFIA4VNVh667A==",
+      "integrity": "sha512-zJ2pnoFYB1F4vmEVlb/eSe+VH679zT1VdXlZKX+pE66grOgjmKJHKacf82g/sWE4MQ4Rk2FMBCRnX+l6/TVYzQ==",
       "cpu": [
         "x64"
       ],
@@ -922,9 +924,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.0.4",
+      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.0.tgz",
-      "integrity": "sha512-m8z/6Fyal4L9Bnlxde5g2Mfa1Z7dasMQyhEhskDATpqr+Y0mjOBZcXQ7G5U+vgL22cI4T7MfvgtrM2jdopqWaw==",
+      "integrity": "sha512-rbaIYFt2X9YZBSbH/CwGAjbBG2/MrACCVu2X0+kSykHzHnYH5FjHxwXLkcoJ10cX0aWCEynpu+rP76x0914atg==",
       "cpu": [
         "x64"
       ],
@@ -937,9 +939,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.0.4",
+      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.0.tgz",
-      "integrity": "sha512-7Wv4PRiWIAWbm5XrGz3D8HUkCVDMMz9igffZG4NB1p4u1KoItwx9qjATHz88kwCEal/HXmbShucaslXCQXUM5w==",
+      "integrity": "sha512-o1N5TsYc8f/HpGt39OUQpQ9AKIGApd3QLueu7hXk//2xq5Z9OxmV6sQfNp8C7qYmiOlHYODOGqNNa0e9jvchGQ==",
       "cpu": [
         "arm64"
       ],
@@ -952,9 +954,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.0.4",
+      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.0.tgz",
-      "integrity": "sha512-zLeNEAPULsl0phfGb4kdzF/cAVIfaC7hY+kt0/d+y9mzcZHsMS3hAS829WbJ31DkSlVKQeHEjZHIdhN+Pg7Gyg==",
+      "integrity": "sha512-XXIuB1DBRCFwNO6EEzCTMHT5pauwaSj4SWs7CYnME57eaReAKBXCnkUE80p/pAZcewm7hs+vGvNqDPacEXHVkw==",
       "cpu": [
         "ia32"
       ],
@@ -967,9 +969,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.0.4",
+      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.0.tgz",
-      "integrity": "sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A==",
+      "integrity": "sha512-9WEbVRRAqJ3YFVqEZIxUqkiO8l1nool1LmNxygr5HWF8AcSYsEpneUDhmjUVJEzO2A04+oPtZdombzzPPkTtgg==",
       "cpu": [
         "x64"
       ],
@@ -2171,9 +2173,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001576",
+      "version": "1.0.30001588",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001588.tgz",
-      "integrity": "sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==",
+      "integrity": "sha512-+hVY9jE44uKLkH0SrUTqxjxqNTOWHsbnQDIKjwkZ3lNTzUUVdBLBGXtj/q5Mp5u98r3droaZAewQuEDzjQdZlQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -3674,7 +3676,8 @@
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "peer": true
     },
     "node_modules/globals": {
       "version": "13.24.0",
@@ -5782,18 +5785,17 @@
       "peer": true
     },
     "node_modules/next": {
-      "version": "14.0.4",
+      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.1.0.tgz",
-      "integrity": "sha512-qbwypnM7327SadwFtxXnQdGiKpkuhaRLE2uq62/nRul9cj9KhQ5LhHmlziTNqUidZotw/Q1I9OjirBROdUJNgA==",
+      "integrity": "sha512-wlzrsbfeSU48YQBjZhDzOwhWhGsy+uQycR8bHAOt1LY1bn3zZEcDyHQOEoN3aWzQ8LHCAJ1nqrWCc9XF2+O45Q==",
       "dependencies": {
-        "@next/env": "14.0.4",
+        "@next/env": "14.1.0",
         "@swc/helpers": "0.5.2",
         "busboy": "1.6.0",
-        "caniuse-lite": "^1.0.30001406",
+        "caniuse-lite": "^1.0.30001579",
         "graceful-fs": "^4.2.11",
         "postcss": "8.4.31",
-        "styled-jsx": "5.1.1",
+        "styled-jsx": "5.1.1"
-        "watchpack": "2.4.0"
       },
       "bin": {
         "next": "dist/bin/next"
@@ -5802,15 +5804,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.0.4",
+        "@next/swc-darwin-arm64": "14.1.0",
-        "@next/swc-darwin-x64": "14.0.4",
+        "@next/swc-darwin-x64": "14.1.0",
-        "@next/swc-linux-arm64-gnu": "14.0.4",
+        "@next/swc-linux-arm64-gnu": "14.1.0",
-        "@next/swc-linux-arm64-musl": "14.0.4",
+        "@next/swc-linux-arm64-musl": "14.1.0",
-        "@next/swc-linux-x64-gnu": "14.0.4",
+        "@next/swc-linux-x64-gnu": "14.1.0",
-        "@next/swc-linux-x64-musl": "14.0.4",
+        "@next/swc-linux-x64-musl": "14.1.0",
-        "@next/swc-win32-arm64-msvc": "14.0.4",
+        "@next/swc-win32-arm64-msvc": "14.1.0",
-        "@next/swc-win32-ia32-msvc": "14.0.4",
+        "@next/swc-win32-ia32-msvc": "14.1.0",
-        "@next/swc-win32-x64-msvc": "14.0.4"
+        "@next/swc-win32-x64-msvc": "14.1.0"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -8182,6 +8184,7 @@
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
       "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "peer": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"

package.json

@@ -22,7 +22,7 @@
     "framer-motion": "^10.17.12",
     "lucide-react": "^0.306.0",
     "nanoid": "^5.0.4",
-    "next": "^14.0.4",
+    "next": "^14.1.0",
     "notion-client": "^6.16.0",
     "notion-types": "^6.16.0",
     "notion-utils": "^6.16.0",

src/app/(home)/page.tsx

@@ -4,7 +4,6 @@ import { StyledNotion } from "@/components/notion/styled";
 import { ExternalLink, Sparkle } from "lucide-react";
 import { Footer } from "./Footer";
 import { Connect } from "./Connect";
-import { motion } from "framer-motion";
 
 export default function Page() {
   return (

src/app/(home)/story/page.tsx

@@ -1,4 +1,3 @@
-import { NRenderer } from "@/components/notion/renderer";
 import { NotionAPI } from "notion-client";
 import Image from "next/image";
 import { getPageImageUrls, getPageTitle } from "notion-utils";
@@ -12,6 +11,9 @@ import { Footer } from "../Footer";
 import { Connect } from "../Connect";
 import { Home } from "lucide-react";
 import Link from "next/link";
+import dynamic from "next/dynamic";
+
+import { NRenderer } from "@/components/notion/renderer";
 
 export default async function Story({
   searchParams,
@@ -46,6 +48,7 @@ export default async function Story({
         height={300}
         src={images[0]}
         alt={title}
+        priority
         className="w-full h-48 object-cover opacity-70 backdrop-saturate-200 backdrop-contrast-200 -z-50"
       />
       <div className="container py-12 max-w-2xl">

src/components/notion/renderer.tsx

@@ -5,9 +5,16 @@ import dynamic from "next/dynamic";
 import { NotionRenderer } from "react-notion-x";
 import { motion } from "framer-motion";
 import { cn } from "@/lib/utils";
+import Link from "next/link";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { Loader2 } from "lucide-react";
 
-const Code = dynamic(() =>
+const Code = dynamic(
-  import("react-notion-x/build/third-party/code").then((m) => m.Code),
+  () => import("react-notion-x/build/third-party/code").then((m) => m.Code),
+  {
+    ssr: false,
+  },
 );
 const Collection = dynamic(() =>
   import("react-notion-x/build/third-party/collection").then(
@@ -34,12 +41,37 @@ export function NRenderer({
   className?: string;
   fullPage?: boolean;
 }) {
+  const [render, setRender] = useState(false);
+
+  useEffect(() => {
+    setRender(true);
+  }, []);
+
+  if (!render) {
     return (
       <motion.div
-      // blur and fade in and animate height to auto
         initial={{ opacity: 0, filter: "blur(10px)" }}
         animate={{ opacity: 1, filter: "blur(0px)" }}
+        className="h-[80vh] flex items-center flex-col justify-center"
+      >
+        <div className="pb-36">
+          <div className="flex items-center gap-1">
+            <h2 className="text-foreground">./raj</h2>
+            <Loader2 size={12} className="animate-spin" />
+          </div>
+          <p className="italic text-xs text-muted-foreground">executing...</p>
+        </div>
+      </motion.div>
+    );
+  }
+
+  if (render)
+    return (
+      <motion.div
+        initial={{ opacity: 0, filter: "blur(10px)", height: "0px" }}
+        animate={{ opacity: 1, filter: "blur(0px)", height: "auto" }}
         className={cn("", className)}
+        suppressHydrationWarning
       >
         <NotionRenderer
           components={{
@@ -47,6 +79,10 @@ export function NRenderer({
             Collection,
             Equation,
             Modal,
+            nextLink: Link,
+            Link: Link,
+            Image: Image,
+            nextImage: Image,
           }}
           mapPageUrl={(pageId) => `/story?id=${pageId}`}
           fullPage={fullPage}