denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: move ShaderGradientBackground dynamic import into client wrapper
All checks were successful
Gitea CI / test-build (push) Successful in 12m8s
Details
Production Deployment (Zero Downtime) / deploy-production (push) Successful in 14m37s
Details

Browse Source 
next/dynamic with ssr:false is not allowed in Server Components.
Follows existing BackgroundBlobsClient pattern.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
denshooter
2026-03-02 01:03:51 +01:00
parent 8b440dd60b
commit ef72f5fc58
2 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/components/ShaderGradientBackgroundClient.tsx Normal file
View File

@@ -0,0 +1,16 @@
"use client";
import React, { useEffect, useState } from "react";
import ShaderGradientBackground from "./ShaderGradientBackground";
export default function ShaderGradientBackgroundClient() {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) return null;
return <ShaderGradientBackground />;
}

9
app/layout.tsx
View File

@@ -2,16 +2,11 @@ import "./globals.css";
import { Metadata } from "next"; import { Metadata } from "next";
import { Inter, Playfair_Display } from "next/font/google"; import { Inter, Playfair_Display } from "next/font/google";
import React from "react"; import React from "react";
import dynamic from "next/dynamic";
import ClientProviders from "./components/ClientProviders"; import ClientProviders from "./components/ClientProviders";
import ShaderGradientBackgroundClient from "./components/ShaderGradientBackgroundClient";
import { cookies } from "next/headers"; import { cookies } from "next/headers";
import { getBaseUrl } from "@/lib/seo"; import { getBaseUrl } from "@/lib/seo";
const ShaderGradientBackground = dynamic(
() => import("./components/ShaderGradientBackground"),
{ ssr: false, loading: () => null }
);
const inter = Inter({ const inter = Inter({
variable: "--font-inter", variable: "--font-inter",
subsets: ["latin"], subsets: ["latin"],
@@ -41,7 +36,7 @@ export default async function RootLayout({
</head> </head>
<body className={`${inter.variable} ${playfair.variable}`} suppressHydrationWarning> <body className={`${inter.variable} ${playfair.variable}`} suppressHydrationWarning>
<div className="grain-overlay" aria-hidden="true" /> <div className="grain-overlay" aria-hidden="true" />
<ShaderGradientBackground /> <ShaderGradientBackgroundClient />
<ClientProviders>{children}</ClientProviders> <ClientProviders>{children}</ClientProviders>
</body> </body>
</html> </html>