[Need Help] For fetching static files from the server in App directory.
Answered
Porcelaine posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
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.
I am not sure if we can do this but let me know if there is a way we can do that.
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
23 Replies
![Avatar](https://cdn.discordapp.com/guilds/752553802359505017/users/510480545160101898/avatars/d79065c9729b5a6a29940dc491a6f34e.webp?size=256)
Yi Lon Ma
is there any error?
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
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](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
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](https://cdn.discordapp.com/embed/avatars/1.png)
PorcelaineOP
Thankyou very much it helped me a lot 😄
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
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
[ '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](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
On vercel and many platforms, this only works during build time, since those platforms don’t preserve the files after build
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
PorcelaineOP
What can be a possible solution for this?
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
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"
worksThe 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](https://cdn.discordapp.com/embed/avatars/1.png)
PorcelaineOP
so should i add all the files I want to use inside the build file itself?
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
wait a min i'll give you an example
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](https://cdn.discordapp.com/embed/avatars/1.png)
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,
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](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
i don't understand this message
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
PorcelaineOP
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](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
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](https://cdn.discordapp.com/embed/avatars/1.png)
PorcelaineOP
Okay, let me try it, Thanks for the help