Merged componentize branch onto main and solve the build errors

next.config.mjs

@@ -1,6 +1,5 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: 'export',
   basePath: process.env.NODE_ENV === "production" ? "" : "",
   assetPrefix: process.env.NODE_ENV === "production" ? "/" : "",
   images: {

package.json

@@ -5,8 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "npx serve@latest out -p 3000",
-    "serve": "npx serve@latest out",
+    "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {

src/components/ui/lottie-down-splash.jsx

@@ -1,7 +1,12 @@
 "use client";
 
 import { useRef, useEffect } from "react";
-import { Player } from "@lottiefiles/react-lottie-player";
+import dynamic from "next/dynamic";
+
+const Player = dynamic(
+  () => import("@lottiefiles/react-lottie-player").then((mod) => mod.Player),
+  { ssr: false }
+);
 import lottieDownSplash from "/public/downward-splash-lottie";
 
 export default function LottieDownSplash() {

src/components/ui/lottie-paint.jsx

@@ -1,7 +1,12 @@
 "use client";
 
 import { useRef, useEffect } from "react";
-import { Player } from "@lottiefiles/react-lottie-player";
+import dynamic from "next/dynamic";
+
+const Player = dynamic(
+  () => import("@lottiefiles/react-lottie-player").then((mod) => mod.Player),
+  { ssr: false }
+);
 import lottiePaint from "/public/paint-lottie";
 
 export default function LottiePaint() {

src/components/ui/lottie-splash.jsx

@@ -1,7 +1,12 @@
 "use client";
 
 import { useRef, useEffect } from "react";
-import { Player } from "@lottiefiles/react-lottie-player";
+import dynamic from "next/dynamic";
+
+const Player = dynamic(
+  () => import("@lottiefiles/react-lottie-player").then((mod) => mod.Player),
+  { ssr: false }
+);
 import lottieSplash from "/public/splash-lottie";
 import pinkSplash from "/public/pink-splash-lottie";
 import purpleSplash from "/public/purple-splash-lottie";