This PR affects the `examples/app-dir-mdx` project.
Currently, only an example of importing a `.mdx` file (`message.mdx`) into the `page.tsx` file is shown.
However, a more common example would be using a `.mdx` file as a page, e.g., in a blog scenario.
I added an example for this, enabled the page extension to allow `.mdx` pages, and changed the body's height, which is a cosmetic change for the newly created blog page.
Adds support for rendering MDX as a Server Component.
The main reason a MDX file couldn't be rendered as a Server Component is
that `@mdx-js/react` has a legacy/deprecated context setup in the file.
Because of calling `React.createContext` the MDX file couldn't be a
Server Component.
I've added support for a special file `mdx-components.tsx` (or `.js`) at
the root of the project (can be `src` dir too).
By using mdx-components you don't need a global context provider which
in turn makes MDX compatible to be rendered as a Server Component.
Note: this changes `@next/mdx` to add support for that file so it has to
be landed first before the example works.
<!--
Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Co-authored-by: JJ Kasper <jj@jjsweb.site>
