clientonly component created

public/.htaccess

@@ -10,6 +10,11 @@
     Options +FollowSymLinks
     Options -MultiViews
 
+    # Force trailing slash for directory-like URLs (helps with DirectoryIndex)
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
+    RewriteRule (.*)$ /$1/ [R=301,L]
+
     # 1. Custom 404 handling
     ErrorDocument 404 /404.html
 

src/app/about-antalya-restaurant/page.tsx

@@ -1,5 +1,6 @@
 import { Metadata } from "next";
 import AboutContent from "./AboutContent";
+import ClientOnly from "@/components/ClientOnly";
 
 export const metadata: Metadata = {
     title: "About Antalya Restaurant | Authentic Turkish Dining",
@@ -7,5 +8,9 @@ export const metadata: Metadata = {
 };
 
 export default function AboutPage() {
-    return <AboutContent />;
+    return (
+        <ClientOnly>
+            <AboutContent />
+        </ClientOnly>
+    );
 }

src/components/ClientOnly.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { useEffect, useState } from "react";
+
+export default function ClientOnly({ children }: { children: React.ReactNode }) {
+    const [hasMounted, setHasMounted] = useState(false);
+
+    useEffect(() => {
+        setHasMounted(true);
+    }, []);
+
+    if (!hasMounted) {
+        return null; // Return null on server and initial client render
+    }
+
+    return <>{children}</>;
+}