Next.js Discord

Discord Forum

[Need Help] For fetching static files from the server in App directory.

Answered
Porcelaine posted this in #help-forum
Open in Discord
Avatar
PorcelaineOP
I have some static templates In the codebase in same root folder app is, I want to fetch those folders, read the file convert it into string and send it to a component.

 
export default function Home() {
  const rootDirectory = __dirname;
  console.log(rootDirectory);
  const data = readFile(rootDirectory + "/questions/Tab1", (err, data) => {
    if (err) {
      console.log(err);
    }
    console.log(data);
  });
  return (
    <div>
      <CodeEditor data={"asa"} />
    </div>
  );
}


I am not sure if we can do this but let me know if there is a way we can do that.
Answered by joulev
yes you can use fs normally, i used it for example here https://github.com/joulev/nextjs-discord-common-questions/blob/main/app/get-content.ts
View full answer

23 Replies

Avatar
Yi Lon Ma
is there any error?
Avatar
PorcelaineOP
Yes. Its not found. As while compiling it won't take the questions folder. That is pretty standard what i want to know is if there is anyway i can do it.
The way happened in MDX blogs. Where you have static blogs and each blogs are rendered by nextjs.
Avatar
joulev
yes you can use fs normally, i used it for example here https://github.com/joulev/nextjs-discord-common-questions/blob/main/app/get-content.ts
Answer
Avatar
PorcelaineOP
Thankyou very much it helped me a lot 😄
Avatar
PorcelaineOP
@joulev It's not working in the production, getting [ 'Template', 'metaInfo.json', 'question.mdx' ]
[ 'Template', 'metaInfo.json', 'question.mdx' ]
Error: ENOENT: no such file or directory, scandir '/var/task/questions/Tab1/template'
at readdirSync (node:fs:1452:3)
at Home (/var/task/.next/server/app/practice/[slug]/page.js:266:70)
at S (/var/task/.next/server/chunks/354.js:8127:13)
at eb (/var/task/.next/server/chunks/354.js:8242:21)
at Array.toJSON (/var/task/.next/server/chunks/354.js:8046:20)
at stringify (<anonymous>)
at pb (/var/task/.next/server/chunks/354.js:8453:9)
at mb (/var/task/.next/server/chunks/354.js:8352:29)
at Timeout._onTimeout (/var/task/.next/server/chunks/354.js:8177:16)
at listOnTimeout (node:internal/timers:569:17) {
errno: -2,
syscall: 'scandir',
code: 'ENOENT',
path: '/var/task/questions/Tab1/template'
}
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
digest: '269450326'
}

this issue
I guess once i push it to production I can't use the files which are not in build?
Avatar
joulev
On vercel and many platforms, this only works during build time, since those platforms don’t preserve the files after build
Avatar
PorcelaineOP
What can be a possible solution for this?
Avatar
joulev
If you want to access the files at any time, you cannot use fs for those platforms; instead configure webpack so that import content from "./path/to/file.ext" works
The import statement works automatically for json files if you use typescript; if you use markdown then mdx-js or next/mdx or similar do provide loaders for you
For other file types you may need to use asset/source https://webpack.js.org/guides/asset-modules/
Avatar
PorcelaineOP
so should i add all the files I want to use inside the build file itself?
Avatar
joulev
wait a min i'll give you an example
https://github.com/joulev/debug/commit/81742e634d29d99eeaa9395a9786f7f4ba628ed4
configure webpack (and optionally typescript, if you use typescript), then you can simply import content from "./file" at any time, even when you render the page dynamically where fs is not available on vercel
Avatar
PorcelaineOP
This might now work for me,
I want to have a QuestionFolder inside that all the folders need to be treated a slugs, now each folder inside them have template folder. In that folder i want to read get the file content and render them to frontend,
Avatar
joulev
i don't understand this message
Avatar
PorcelaineOP
https://github.com/theashishmaurya/jscodelabs/tree/feature/Files-from-Question-directory
Here is my repository
Please have a look
This works fine in local but not on Vercel may be I have to tweak something, but i don't know
Avatar
joulev
no, i still don't understand... though if you want to read the static content of any files then this works everywhere and at any time (not just during build), because webpack will treat the files like regular js variables and bundle them
Avatar
PorcelaineOP
Okay, let me try it, Thanks for the help