fix: Resolve dev server warnings and errors (#453)

- Removes `pageExtensions` from `next.config.mjs`. Explicitly defining this key caused spurious "Duplicate page detected" warnings during development. Relying on the Nextra default resolves the issue.

- Addresses a `useLayoutEffect` warning during SSR caused by the `AskCookbook` component. Attempts to use `next/dynamic` directly in `_app.mdx` led to MDX parsing errors.

- Introduces `ClientOnlyAskCookbook.tsx`, a wrapper component that dynamically imports `AskCookbook` with `ssr: false` to ensure client-side rendering.

- Updates `_app.mdx` to use the `ClientOnlyAskCookbook` wrapper and removes leftover comments from previous troubleshooting steps.

Author: CruzMolina

next.config.mjs

@@ -1,39 +1,36 @@
-import nextra from 'nextra'
-import path from 'path'
-import remarkCodeImport from 'remark-code-import'
-import { fileURLToPath } from 'url'
+import nextra from "nextra";
+import path from "path";
+import remarkCodeImport from "remark-code-import";
+import { fileURLToPath } from "url";
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const withNextra = nextra({
-  theme: 'nextra-theme-docs',
-  themeConfig: './theme.config.tsx',
+  theme: "nextra-theme-docs",
+  themeConfig: "./theme.config.tsx",
   defaultShowCopyCode: true,
   mdxOptions: {
-    remarkPlugins: [
-      remarkCodeImport,
-    ]
-  }
-})
+    remarkPlugins: [remarkCodeImport],
+  },
+});
 
 const config = withNextra({
   eslint: {
     ignoreDuringBuilds: true,
   },
   images: {
-    unoptimized: true
+    unoptimized: true,
   },
   webpack: (config) => {
     config.resolve.alias = {
       ...config.resolve.alias,
-      '@': path.join(__dirname, 'src'),
-    }
-    return config
+      "@": path.join(__dirname, "src"),
+    };
+    return config;
   },
-  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
   experimental: {
     mdxRs: true,
   },
-})
+});
 
-export default config
+export default config;

src/components/ClientOnlyAskCookbook.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import dynamic from "next/dynamic";
+
+// Dynamically import the original AskCookbook component with SSR disabled
+const AskCookbookDynamic = dynamic(
+  () => import("./AskCookbook").then((mod) => mod.AskCookbook),
+  {
+    ssr: false,
+  }
+);
+
+// This wrapper component simply renders the dynamically imported one
+const ClientOnlyAskCookbook: React.FC = () => {
+  return <AskCookbookDynamic />;
+};
+
+export default ClientOnlyAskCookbook;

src/pages/_app.mdx

@@ -1,7 +1,7 @@
 import { ThemeProvider } from "next-themes";
 import Script from "next/script";
 import { inter, plus_jakarta_sans } from "../fonts";
-import { AskCookbook } from "../components/AskCookbook";
+import ClientOnlyAskCookbook from "../components/ClientOnlyAskCookbook";
 import "../globals.css";
 
 export default function App({ Component, pageProps }) {
@@ -39,7 +39,7 @@ export default function App({ Component, pageProps }) {
           <Component {...pageProps} />
         </div>
       </div>
-      <AskCookbook />
+      <ClientOnlyAskCookbook />
     </ThemeProvider>
   );
 }