Repository: next.js
Issue: Using `next/link` in dynamically imported MDX files throws an error
Labels: Navigation,Markdown (MDX)

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
  Platform: linux
  Arch: x64
  Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
Binaries:
  Node: 16.17.0
  npm: 8.15.0
  Yarn: 1.22.19
  pnpm: 7.1.0
Relevant packages:
  next: 13.4.5-canary.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 4.9.5
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), MDX (@next/mdx)

### Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/reverent-borg-dwgi4z?file=%2Fpackage.json%3A7%2C10

### To Reproduce

## Setup
- Create a dynamic route with its page: `[slug]/page.tsx`
- In the `[slug]` path, add two MDX files: `one.mdx` and `two.mdx`
	- Make sure to add a link in the `two.mdx` file, but not in `one.mdx`. Please refer to the corresponding files in the [linked Sandbox reproduction](https://codesandbox.io/p/sandbox/reverent-borg-dwgi4z?file=%2Fpackage.json%3A7%2C10) for an example.
- Add the following contents to `[slug]/page.tsx` to **dynamically** import the MDX files:
	```tsx
	import { promises as fs } from "fs";
	import path from "path";
	
	import { Suspense } from "react";
	
	export const dynamicParams = false;
	
	export async function generateStaticParams() {
	  const MDX_PAGES_DIR = path.resolve(process.cwd(), "app", "[slug]");
	  const files = (await fs.readdir(MDX_PAGES_DIR)).filter((file) =>
	    file.endsWith(".mdx")
	  );
	
	  const params = files.map((fileName) => {
	    const pageName = fileName.replace(/\.mdx?$/, "");
	    return {
	      slug: pageName,
	    };
	  });
	
	  return params;
	}
	
	type PageParamsType = {
	  params: {
	    slug: string;
	  };
	};
	
	export default async function MDXContentPage({
	  params: { slug },
	}: PageParamsType) {
	  const { default: MDXContent } = await import(`./${slug}.mdx`);
	
	  return (
	    <Suspense fallback={<p>Loading...</p>}>
	      <MDXContent />
	    </Suspense>
	  );
	}
	```
- In the `app/` directory, add a new route `three` with two files inside: `three.mdx` and `page.tsx`
	- Also add a link in the `three.mdx` file, to showcase that statically importing the file works as intended
- Add the following contents to `three/page.tsx` to **statically** import the `three.mdx` file:
	```tsx
	import Three from "./three.mdx";
	
	/** Add your relevant code here for the issue to reproduce */
	export default function Home() {
	  return <Three />;
	}
	```
- To provide our custom MDX components, follow [instructions from docs](https://nextjs.org/docs/app/building-your-application/configuring/mdx#getting-started) and add a `mdx-components.tsx` file in the root directory, with the following contents:
	```tsx
	import type { MDXComponents } from "mdx/types";
	import Link from "next/link";
	
	// This file allows you to provide custom React components
	// to be used in MDX files. You can import and use any
	// React component you want, including components from
	// other libraries.
	
	// This file is required to use MDX in `app` directory.
	export function useMDXComponents(components: MDXComponents): MDXComponents {
	  return {
	    // Allows customizing built-in components, e.g. to add styling.
	    // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
	    a: ({ children, href, ...props }) => (
	      <Link href={href} {...props}>
	        {children}
	      </Link>
	    ),
	    ...components,
	  };
	}
	```
- Optionally, add the experimental `mdxRs: true` flag to `next.config.js`. This is optional since the bug exists even without the experimental Rust-based MDX compiler.
	```js
	/** @type {import("next").NextConfig} */
	const nextConfig = {
	  reactStrictMode: true,
	  experimental: {
	    appDir: true,
	    mdxRs: true,
	  },
	};
	
	const withMDX = require("@next/mdx")();
	module.exports = withMDX(nextConfig);
	```

## Reproduction
Either in the [linked Sandbox](https://codesandbox.io/p/sandbox/reverent-borg-dwgi4z?file=%2Fpackage.json%3A7%2C10) or after setting up the reproduction as described above, head over to the following pages to experience the respective behaviours:
- `/one` — works intended, because there is no `next/link` being custom used for links.
- `/two` — because uses a _dynamically_ imported MDX file, it throws an error:
	```
	Error: Cannot read properties of null (reading 'useContext')
	```
- `/three` — again, works as intended, since the MDX file is being _statically_ imported.

### Describe the Bug

- In a dynamic route, if we try to import MDX files to render content based on the `slug`, it throws an error when the MDX file has a `next/link` element being used to substitute the links in a `mdx-components.tsx` file.
- This behaviour is also extended to any other (custom) elements being used which also use React Context, like `react-icons`.
- This behaviour is **not** exhibited when the MDX file is statically imported.

### Expected Behavior

`next/link` when being used in dynamically imported MDX files should run without failure. This also extends to other client components using Context, like `react-icons` which use Context.

### Which browser are you using? (if relevant)

Arc Version 0.105.3 (39135)

### How are you deploying your application? (if relevant)

Vercel