Module not found: Can't resolve 'fs'

You’re importing a Node.js built-in module (fs, path, crypto, etc.) in client-side code. These only work on the server.

Fix 1: Move the code to a Server Component

In App Router, components are Server Components by default:

// ✅ This works — Server Component (no 'use client')
import fs from 'fs';

export default function Page() {
  const data = fs.readFileSync('data.json', 'utf-8');
  return <div>{data}</div>;
}

Fix 2: Move to getServerSideProps (Pages Router)

export async function getServerSideProps() {
  const fs = require('fs');
  const data = fs.readFileSync('data.json', 'utf-8');
  return { props: { data } };
}

Fix 3: Move to an API route

// pages/api/data.ts
import fs from 'fs';

export default function handler(req, res) {
  const data = fs.readFileSync('data.json', 'utf-8');
  res.json(JSON.parse(data));
}

Related resources

• Next.js cheat sheet
• Next.js complete guide
• npm cheat sheet