Moving a custom folder to production on Vercel with Next.js

Question

Moving a custom folder to production on Vercel with Next.js

I am currently working on developing a project using the NextJS environment. In this project, I have some JSON files stored in a folder within my root directory, and I am reading the content of these files in my code. Everything works fine on my local machine, but when the project is deployed on the Vercel server, it is unable to read the file because the file does not exist on the server.

Here is the file structure of my project on my local machine:

|--.next
|--components
|--jsonfiles
|--node_modules
|--pages
|--public
|--package.json

(and more)...

However, after deployment, when I try to read the content of the root directory using fs.readdirSync("./"), it only shows the following files and directories:

|--.next
|--___next_launcher.js
|--___vc_bridge.js
|--node_modules
|--package.json

And here is the code I am using to read the file:

const fs = require('fs');
const rawcontent = fs.readSync('./jsonfiles/list.json');
const list = JSON.parse(rawcontent);
...

Do you have any solutions to this issue?

typescript next.js vercel

Answer 1

Answer №1

NextJS utilizes a bit of magic internally for module substitution/enrichment, which allows for some interesting control over readable folders on Vercel. For example, importing path synchronously gives you the power to specify which folders can be accessed on Vercel. It may sound strange, but it's absolutely true!

export async function getStaticProps() {
  const path = await import("path").then(m => m.default) // won't be bundled
  path.resolve("content") // functions, but doesn't actually do anything
  return {props: {}}
}

vs

import "path" // won't be bundled unless used outside of SSR hooks

export async function getStaticProps() {
  path.resolve("content") // functions, but doesn't actually do anything, yet makes "content" accessible to lambdas on Vercel 🤷
  return {props: {}}
}

For more information, check out: https://github.com/vercel/vercel/discussions/7971

Answer 2

NextJS utilizes a bit of magic internally for module substitution/enrichment, which allows for some interesting control over readable folders on Vercel. For example, importing path synchronously gives you the power to specify which folders can be accessed on Vercel. It may sound strange, but it's absolutely true!

export async function getStaticProps() {
  const path = await import("path").then(m => m.default) // won't be bundled
  path.resolve("content") // functions, but doesn't actually do anything
  return {props: {}}
}

vs

import "path" // won't be bundled unless used outside of SSR hooks

export async function getStaticProps() {
  path.resolve("content") // functions, but doesn't actually do anything, yet makes "content" accessible to lambdas on Vercel 🤷
  return {props: {}}
}

For more information, check out: https://github.com/vercel/vercel/discussions/7971

Moving a custom folder to production on Vercel with Next.js

Answer №1

Similar questions

Convert the Angular PrimeNG class into a TreeNode object to avoid the error of trying to access the map property of an

The application is running smoothly in the local environment, however, encountering an issue in the production stage that throws a TypeError: Unable to access the property '

Ensure that the value of a variable in the Ionic/Angular template has been properly initialized

Using TypeScript gives you the ability to specify the type of an object while destructuring it,

Enhance user experience with Angular Material and TypeScript by implementing an auto-complete feature that allows

The type of 'username' cannot be determined without specifying the reference to '@angular/forms/forms' in the node modules

The async pipe is failing to function properly when used with the same observable

Guide on retrieving POST data in sveltekit

Dealing with Endless Loops in React TypeScript: What Happens When State is Set in Multiple Instances of the Same

Error in typescript: The property 'exact' is not found in the type 'IntrinsicAttributes & RouteProps'

Unveiling the method of retrieving a targeted value from JWT in React

"Discovering the referring page URL in Next.js: A Step-by-Step

Exploring the integration of Firebase with Next.js using getServerSideProps

What is the process for recording information using a static method in TypeScript within a class?

My default value is being disregarded by the Angular FormGroup

Improving development speeds with Next.js and TypeScript by addressing slow page build times

Leveraging ngOnChanges to determine the display of an overlay based on input alterations

Retrieve the output of a function in TypeScript

Efficient methods to transfer values or arrays between components in Angular 8 without relying on local storage

Sequencing API Calls: A Guide on Making Sequential API Requests