Repository: next.js
Issue: Pages opted into dynamic rendering don't have access to production filesystem (EONOENT)
Labels: bug,Navigation,Pages Router

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:58 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6020
    Binaries:
      Node: 20.1.0
      npm: 9.6.4
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.19
      eslint-config-next: 13.4.7
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3
    Next.js Config:
      output: N/A
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

App Router, Data fetching (gS(S)P, getInitialProps), Routing (next/router, next/navigation, next/link)

### Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/romantic-ptolemy-qlvdz4?file=%2Fnext.config.js%3A1%2C1

### To Reproduce

## ✅ Working Code
This version of the code does not use "searchParams".

```js
export default async function Page({
  params,
}) {
  const category = await getArticle(params.category);

  if (!category) {
    notFound();
  }

  // configure the default search settings
  const relatedData = await externalLibraryFetch();

  return (
    <main>
        <Suspense fallback={"Loading..."}>
            <RelatedItems data={relatedData} />
        </Suspense>
     </main>
  );
}
```

## ❌ NOT WORKING Code
This version of the code uses searchParams. When searchParams is used, [Next.js 13 opts the page into dynamic rendering.](https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional)

```js
export default async function Page({
  params,
  searchParams,
}) {
  const category = await getArticle(params.category);

  if (!category) {
    notFound();
  }

  // configure the default search settings
  const relatedData = await externalLibraryFetch({...searchParams});

  return (
    <main>
        <Suspense fallback={"Loading..."}>
            <RelatedItems data={relatedData} />
        </Suspense>
     </main>
  );
}
```

(Apologies I'm not familiar with code sandbox and had a hard time reproducing there)

### Describe the Bug

When deploying a Next.js 13 (with app dir) on Vercel, I'm seeing the following error:

```
Error: ENOENT: no such file or directory, scandir '/var/task/src/app/data/markdown'
    at Object.readdirSync (node:fs:1527:3)
    at readAllFiles (/var/task/.next/server/chunks/1833.js:41:41)
    at readAllFiles.next (<anonymous>)
    at /var/task/.next/server/chunks/1833.js:64:16
    at /var/task/.next/server/chunks/9755.js:11502:23
    at getArticle (/var/task/.next/server/chunks/1833.js:93:28)
    at VacationRentalCategoryPage (/var/task/.next/server/app/(vacation-rentals)/vacation-rentals/[category]/page.js:492:112)
    at preloadComponent (/var/task/node_modules/next/dist/server/app-render/preload-component.js:23:22)
    at /var/task/node_modules/next/dist/server/app-render/app-render.js:615:101
    at async createComponentTree (/var/task/node_modules/next/dist/server/app-render/app-render.js:615:29) {
  errno: -2,
  syscall: 'scandir',
  code: 'ENOENT',
  path: '/var/task/src/app/data/markdown'
}
```

This error only occurs on pages which have been opted into dynamic rendering by Next.js.

The problematic code retrieves a list of markdown files from the filesystem using the "fs" module. Here is the implementation of the code

```js
import fs from 'fs';
import path from 'path';

export function* readAllFiles(dir: string): Generator<string> {
  const files = fs.readdirSync(dir, { withFileTypes: true });

  for (const file of files) {
    if (file.isDirectory()) {
      yield* readAllFiles(path.join(dir, file.name));
    } else {
      yield path.join(dir, file.name);
    }
  }
}
```

```js
export const getArticles = cache(async () => {
  const articles = [];

  const articleDirectory = path.resolve(process.cwd(), 'src/app/data/markdown');

  for (const file of readAllFiles(articleDirectory)) {
    if (path.extname(file) === '.mdx') {
      const source = await fs.readFile(file, 'utf8');
      const { content, data } = matter(source);

      articles.push({
        content,
        slug: path.parse(file).name,
        file,
      });
    }
  }

  return articles;
});

export async function getArticle(slug) {
  const articles = await getArticles();
  return articles.find(article => article.slug === slug);
}
```

✅ In development, these files are available on both statically rendered and dynamically rendered pages.
✅ In production (Vercel), on statically rendered pages, these files are available.
❌ In production (Vercel), on pages which have been opted into dynamic rendering, these files are unavailable.

It seems like the issue may be similar to https://github.com/vercel/next.js/discussions/16117 and [this stackoverflow post](https://stackoverflow.com/questions/76696417/vercel-error-no-such-file-or-directory-open-var-task-node-modules-shiki-theme).

From what I can gather, the markdown files are not being bundled into the server environment, and are not accessible at runtime.

### Expected Behavior

/var/task/src/app/data/markdown should be an accessible directory in Vercel production.

On routes which have not been opted into dynamic rendering, this directory is accessible. and the readAllFiles() function can retrieve its contents.

In routes which are dynamically rendered, this directory is inaccessible.

The expected behavior is that it is accessible in both situations.

### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

Vercel