TypeError: fs.readFileSync is not a function in Next.js

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

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;
  }