Entonces, uso la última versión de next js ^11.1.2. De acuerdo con la documentación, el uso de códigos del lado del servidor (nodo js) dentro de la función getStaticProps() está bien, ya que elimina la importación 'fs' de la compilación del lado del cliente.
Pero en mi caso no funciona.
El siguiente código es lo que hice...
import fs from "fs/promises"; import path from "path"; function HomePage(props) { return ( <ul> {props.products.map((el) => ( <li key={el.id}>{el.title}</li> ))} </ul> ); } export async function getStaticProps() { try { let data = await fs.readFileSync( path.join(process.cwd(), "data", "dummy-backend.json") ); console.log(data); data = JSON.parse(data); return { props: { products: data.products, }, }; } catch (err) { console.log(err); return { props: { products: [], error: "Error in fetching data", }, }; } } export default HomePage;Imagen del error mostrado en el terminal
Y estoy en el entorno de desarrollo.
Usar
import { promises as fs } from 'fs';En vez de
import fs from "fs/promises";y cambie fs.readFileSync a fs.readFile.