How to get directory listing in Next.js on Netlify

Viewed 592

I have a problem to get a directory listing in Next.js on Netlify. It works well on localhost, but when I deploy the site to Netlify I get this error:

{
"errorType": "Runtime.UnhandledPromiseRejection",
"errorMessage": "Error: ENOENT: no such file or directory, scandir '/opt/build/repo/storage/videos/'",
"trace": [
"Runtime.UnhandledPromiseRejection: Error: ENOENT: no such file or directory, scandir '/opt/build/repo/storage/videos/'",
"    at process.<anonymous> (/var/runtime/index.js:35:15)",
"    at process.emit (events.js:314:20)",
"    at processPromiseRejections (internal/process/promises.js:209:33)",
"    at processTicksAndRejections (internal/process/task_queues.js:98:32)"
]
}

This is my next.config.js:

module.exports = {
    serverRuntimeConfig: {
        PROJECT_ROOT: __dirname
    },
    target: 'experimental-serverless-trace'
};

This is my pages/index.js:

import fs from 'fs';
import path from 'path';
import { project_root } from '@config/app';

...

export async function getServerSideProps() {
    const videosPath = path.join(project_root, './storage/videos/');

    fs.readdirSync(videosPath).forEach(video => {
        // Do stuff with a path...
    });

    ...
}

And this is config/app.js:

import getConfig from 'next/config';

const { serverRuntimeConfig } = getConfig();

export const project_root = serverRuntimeConfig.PROJECT_ROOT;

I'm new to both Next.js and Netlify, so I'm not sure what is the problem. I see that path /opt/build/repo/storage/videos/ which is readdirSync reading is invalid and probably should be like var/runtime/storage/videos/, but I don't know how to fix it and make it work on both Netlify and localhost.

PS: Yes, I do have files in the storage/videos folder as well as on git, and on Netlify I installed these plugins for the project: enter image description here

0 Answers
Related