NextJs 应用程序错误，同时创建 Api Routes import * as fs from 'node:fs/promises'； SyntaxError: 不能在模块外使用 import 语句

Question

I want it to read the json in utf format and display in terminal

import * as fs from 'node:fs';

export default function handler(req, res) {
  fs.readFile("/blogdata/how-to-learnjavascript.json","utf-8",(err,data)=>{console.log(data)})
    res.status(200).json({ name: 'John Doe' })
  }

Answer 1

If You want to use fs module in Next.js .You can only do FS-related operations while on the server, within getStaticProps or getServerSideProps

---

Here You Have simple example how to use fs and path module with getStaticProps :

index.js (home page)

import fs from "fs";
import path from "path";

export default function Home({ data }) {
  const persons = data.persons;
  return (
    <div style={{ padding: 30 }}>
      <h1>Example Next.js & Node.js FS module</h1>
      <div>
        {persons.map((person) => (
          <div
            key={person.id}
            style={{ padding: 20, borderBottom: "1px solid #ccc" }}
          >
            <h2>{person.name}</h2>
            <p>{person.email}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export async function getStaticProps(context) {
  const dataFilePath = path.join(process.cwd(), "data.json");
  const fileContents = fs.readFileSync(dataFilePath, "utf8");

  const data = JSON.parse(fileContents);
  console.log(data);

  return { props: { data } };
}

---

data.json

{
    "persons": [
        {
            "id": 1,
            "name": "dolores",
            "email": "dolores@gmail.com"
        },
        {
            "id": 2,
            "name": "ed",
            "email": "ed@yahoo.com"
        },
        {
            "id": 3,
            "name": "james",
            "email": "james007@yahoo.com"
        },
        {
            "id": 4,
            "name": "joda",
            "email": "joda-jedi@gmail.com"
        }
    ]
}

---

Output( server side ) folder and file structure :

---

Output browser :

Tested with "next": "12.1.6"