Writing/reading from the Vercel file system

Is it best practice to read and write to the file system in a Next.js app? I have a project (Pages router) in which I have a src/data folder that I am saving json files from an external API at build time through a script I created. I can successfully save data in the specified folder but I can’t seem to retrieve it in a component.

THE SCRIPT FILE: site/scripts/generate-icons.js

var fs = require('fs');
const { createClient } = require('@sanity/client');

const client = createClient({
	projectId: '********',
	apiVersion: '2021-03-25',
	dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
	useCdn: false,
});

console.log('script  - Fetching Game Icons');

client
	.fetch(
		'*[_type == "gameInformation" && disabled != true ]'
	)
	.then((res) => {
		console.log('script  - Successfully Collected Game Icons');
		let data = JSON.stringify(res);
		fs.writeFileSync('data/icons.json', data);
	})
	.then(() => console.log('script  - Finished Saving Game Icons'))
	.catch((err) => {
		console.error('error  - Unable To Save Game Icons', err);
		throw err;
	});

THIS IS HOW I AM IMPORTING THE CREATED FILE IN MY COMPONENT:
import iconsJson from 'data/icons.json';

AND FINALLY THE ERROR IN THE BUILDS:

Thanks for waiting, @dean1994. It sounds like the file location might be different when deployed. If you go to the deployment details on your dashboard and open the Source tab, that will let you compare the source fie structure with the deployment structure.

Here are a couple of guides that go into more detail about using additional files:

Please give that a try and let me know how it goes!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.