“Module not found: Can’t resolve ‘fs’” in Next.js: Why It Happens and How to Fix It

Node.js's `fs` (file system) module interacts with physical hard drives. For obvious security and architectural reasons, **web browsers cannot access local file systems**. In Next.js App Router: - **Server Components (default):** Run only on the server. You can freely import `fs`, `path`, and server libraries. - **Client Components (`'use client'`):** Are bundled by Webpack and sent to the browser. If you import `fs` into a component marked with `'use client'`, Webpack fails with: ```bash ./src/components/MyComponent.tsx Module not found: Can't resolve 'fs' ```

### Fix 1: Keep 'fs' in a Server Component Remove `'use client'` if your component does not use React hooks (`useState`, `useEffect`) or click listeners: ```tsx // app/blog/[slug]/page.tsx (Server Component by default) import fs from "fs"; import path from "path"; export default function BlogPostPage() { const content = fs.readFileSync(path.join(process.cwd(), "content.txt"), "utf-8"); return ; } ``` ### Fix 2: Move File Logic to a Route Handler If your client component needs file data, create a Server Route Handler: ```typescript // app/api/file/route.ts import { NextResponse } from "next/server"; import fs from "fs"; export async function GET() { const data = fs.readFileSync("my-file.json", "utf-8"); return NextResponse.json(JSON.parse(data)); } ``` And fetch it from your client component with `fetch('/api/file')`.