Next.js条件渲染Navbar遇fs模块未找到错误求助

你遇到的fs模块找不到错误，核心原因是根布局RootLayout默认是服务器组件，但你给它加上了"use client"指令，强制将其转为客户端组件。而@kinde-oss/kinde-auth-nextjs依赖中包含只能在Node.js环境运行的代码（比如fs模块），客户端浏览器环境不存在fs，因此触发编译错误。

同时你的代码存在重复渲染问题：两次调用<Navigation />，且重复渲染了children，需要一并修正。

核心思路是：保留RootLayout的服务器组件特性，将路径判断的逻辑抽离到单独的客户端组件中，避免把整个根布局转为客户端组件。

步骤1：创建条件渲染导航组件 #

新建app/components/ConditionalNavigation.tsx，专门处理导航栏的显示逻辑：

"use client";

import { usePathname } from "next/navigation";
import Navigation from "./Navigation";

export default function ConditionalNavigation() {
  const pathname = usePathname();
  
  // 仅在非/dashboard页面显示导航栏
  if (pathname === "/dashboard") {
    return null;
  }
  
  return <Navigation />;
}

步骤2：修改根布局RootLayout.tsx #

移除"use client"指令，替换为上面创建的条件渲染组件，并修复重复渲染问题：

import "./globals.css";
import type { Metadata } from "next";
import { Rubik } from "next/font/google";
import styles from "./layout.module.css";
import ConditionalNavigation from "@/components/ConditionalNavigation";
import Sidebar from "@/components/Sidebar";

const rubik = Rubik({
  subsets: ["latin"],
  display: "swap",
  weight: ["300", "400", "500", "600", "700", "800", "900"],
});

export const metadata: Metadata = {
  title: "Finnect",
  description: "Seamless transactions for everyone",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={rubik.className}>
      <body className={styles.container}>
        <ConditionalNavigation />
        <main>
          <Sidebar />
          {children}
        </main>
      </body>
    </html>
  );
}

• 保留根布局的服务器组件特性，既能利用Next.js的服务器端渲染优化，又避免了将依赖服务器端API的库（如kinde-auth-nextjs）强制在客户端运行，彻底解决fs模块找不到的问题。
• 仅将路径判断的最小逻辑封装为客户端组件，符合Next.js的组件拆分最佳实践。

内容的提问来源于stack exchange，提问作者Sanmi Akinwunmi