In a JSON file, I save data for a bot in total.json.

{ "guilds": 3, "users": 21 }

In my index.tsx, I would like to put this data in the page, so I try this:

import fs from 'fs';

function stats() {
  const botcount = JSON.parse(fs.readFileSync(`../util/total.json`, { encoding: 'utf8' }));
  const userscount = botcount.users;

  console.log(userscount);
  return userscount;
}

In the terminal, the function correctly returned the number (21), but in my page, I found this error:

TypeError: fs__WEBPACK_IMPORTED_MODULE_6___default(...).readFileSync is not a function

In a JSON file, I save data for a bot in total.json.

{ "guilds": 3, "users": 21 }

In my index.tsx, I would like to put this data in the page, so I try this:

import fs from 'fs';

function stats() {
  const botcount = JSON.parse(fs.readFileSync(`../util/total.json`, { encoding: 'utf8' }));
  const userscount = botcount.users;

  console.log(userscount);
  return userscount;
}

In the terminal, the function correctly returned the number (21), but in my page, I found this error:

TypeError: fs__WEBPACK_IMPORTED_MODULE_6___default(...).readFileSync is not a function

• javascript
• next.js

• 2 Of course? The browser has no filesystem, which would fs.readFileSync even do in a browser page context? If your page needs data, use the Fetch API to perform a network request. Your bundle should never contain anything fs related. In this case: your JSON data is a static asset, either bundle it in, make it a hosted static asset (like css, image, etc), or make it API output that you can fetch. – Mike 'Pomax' Kamermans Commented Feb 8, 2022 at 20:09

3 Answers 3

You can only use fs module in Node js NOT in browser. To access JSON data from a file in Nextjs you can use axios or fetch. Here is an example with axios

import axios from 'axios';

  async function stats() {
    var {data} = await axios.get("http://localhost:8888/utils/total.json");//Change this to your url
    const botcount = JSON.parse(data)
    const userscount = botcount.users;

    console.log(userscount);
    return userscount;
  }

As @JaivBhup already mentioned, you can't use fs since it's not browser patible.

A better approach IMO is to use a backend and fetch data from there (axios is a great package for this). If you don't have a backend of some kind, you should consider using the Next.js api routes.

You can use it as if you have been using Node.js!

See the docs or this could also be useful for you.

// File: pages/api/my-json.js

import fs from 'fs'
import path from 'path'

export default (req, res) => {
  // Let's say your json is in /public/assets/my-json.json
  const filePath = path.resolve('./public', 'assets', 'my-json.json');
  const json = fs.readFileSync(filePath);

  res.statusCode = 200
  res.json(json);
}

The important part is path.resolve(...), which instructs vercel to include the scanned path in the serverless lambda. The shown code works to read images (or other files from your fs) both locally and remotely on vercel!

I tweaked it a little bit, so it loads the json file instead of filenames.

you can use

import { promises as fs } from "fs";

and

const botcount = await fs.readFile(../util/total.json, 'utf8' ));

this way