From 1f110d5c51e4ea7420fe545a2afcb6d965390cf3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20Hern=C3=A1ndez?= Date: Mon, 18 Aug 2025 00:27:30 +0100 Subject: [PATCH 1/5] Update start script in package.json to use npx serve for production --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 78fcfa9..60e5779 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "scripts": { "dev": "next dev", "build": "next build", - "start": "next start", + "start": "npx serve@latest .next/output", "lint": "next lint" }, "dependencies": { From 5274f2f7c1b4aec8e97489fdbe5c4f56f992ef95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20Hern=C3=A1ndez?= Date: Mon, 18 Aug 2025 11:13:49 +0100 Subject: [PATCH 2/5] Dynamic import of ModalImage component to improve performance in ZoomableImage --- src/components/ui/zoomable-image.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/ui/zoomable-image.jsx b/src/components/ui/zoomable-image.jsx index 9f1c7af..acb1c5b 100644 --- a/src/components/ui/zoomable-image.jsx +++ b/src/components/ui/zoomable-image.jsx @@ -1,9 +1,13 @@ "use client"; import React from "react"; -import ModalImage from "react-modal-image"; +import dynamic from "next/dynamic"; import { FaSearchPlus } from "react-icons/fa"; // Import a zoom icon from react-icons +const ModalImage = dynamic(() => import("react-modal-image"), { + ssr: false, +}); + export default function ZoomableImage({ url }) { return (
From 358fee2d43a2dacd9d433140a02f8e1538da9916 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20Hern=C3=A1ndez?= Date: Mon, 18 Aug 2025 11:25:32 +0100 Subject: [PATCH 3/5] Refactor next.config.mjs and package.json; remove dynamic import for ModalImage in ZoomableImage component --- next.config.mjs | 1 - package.json | 2 +- src/components/ui/zoomable-image.jsx | 6 +----- 3 files changed, 2 insertions(+), 7 deletions(-) diff --git a/next.config.mjs b/next.config.mjs index 5166601..d3c5d3a 100644 --- a/next.config.mjs +++ b/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: { diff --git a/package.json b/package.json index 283d6be..c7688ee 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "scripts": { "dev": "next dev", "build": "next build", - "start": "npx serve@latest .next/output", + "start": "next start", "lint": "next lint" }, "dependencies": { diff --git a/src/components/ui/zoomable-image.jsx b/src/components/ui/zoomable-image.jsx index acb1c5b..9f1c7af 100644 --- a/src/components/ui/zoomable-image.jsx +++ b/src/components/ui/zoomable-image.jsx @@ -1,13 +1,9 @@ "use client"; import React from "react"; -import dynamic from "next/dynamic"; +import ModalImage from "react-modal-image"; import { FaSearchPlus } from "react-icons/fa"; // Import a zoom icon from react-icons -const ModalImage = dynamic(() => import("react-modal-image"), { - ssr: false, -}); - export default function ZoomableImage({ url }) { return (
From c7949b831e7ddb10574ec5853ddaa2e00dc7c73b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20Hern=C3=A1ndez?= Date: Mon, 18 Aug 2025 11:27:22 +0100 Subject: [PATCH 4/5] Remove vercel.json configuration file as part of project restructuring --- vercel.json | 44 -------------------------------------------- 1 file changed, 44 deletions(-) delete mode 100644 vercel.json diff --git a/vercel.json b/vercel.json deleted file mode 100644 index 678d110..0000000 --- a/vercel.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "version": 2, - "builds": [ - { - "src": "package.json", - "use": "@vercel/next" - } - ], - "routes": [ - { - "src": "/(.*)", - "dest": "/$1" - }, - { - "src": "/(.*)\\.(jpg|jpeg|png|gif|ico|svg|css|js|woff|woff2|ttf|eot|txt|xml|pdf|doc|docx|xls|xlsx|ppt|pptx|mp4|webm|wav|mp3|m4a|aac|oga)$", - "headers": { - "cache-control": "public, max-age=31536000, immutable" - }, - "continue": true - }, - { - "src": "/(.*)\\.(json|xml|webmanifest)$", - "headers": { - "cache-control": "public, max-age=3600" - }, - "continue": true - }, - { - "src": "/(.*)\\.(html|htm)$", - "headers": { - "cache-control": "public, max-age=0, must-revalidate" - }, - "continue": true - } - ], - "build": { - "env": { - "NEXT_TELEMETRY_DISABLED": "1" - } - }, - "env": { - "NODE_ENV": "production" - } -} From 3cae0f9c6705a2cee81eea20ca60bd77a11bdb88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20Hern=C3=A1ndez?= Date: Mon, 18 Aug 2025 11:32:15 +0100 Subject: [PATCH 5/5] Implement dynamic import for Lottie Player components to enhance performance and prevent server-side rendering issues in lottie-down-splash, lottie-paint, and lottie-splash files. --- src/components/ui/lottie-down-splash.jsx | 7 ++++++- src/components/ui/lottie-paint.jsx | 7 ++++++- src/components/ui/lottie-splash.jsx | 7 ++++++- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/components/ui/lottie-down-splash.jsx b/src/components/ui/lottie-down-splash.jsx index 1b46d61..1418577 100644 --- a/src/components/ui/lottie-down-splash.jsx +++ b/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() { diff --git a/src/components/ui/lottie-paint.jsx b/src/components/ui/lottie-paint.jsx index ec2c242..cb0067a 100644 --- a/src/components/ui/lottie-paint.jsx +++ b/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() { diff --git a/src/components/ui/lottie-splash.jsx b/src/components/ui/lottie-splash.jsx index 70937fd..64cf140 100644 --- a/src/components/ui/lottie-splash.jsx +++ b/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";