Add Example to Next.js Repo

[daneden]

Hi there! I recently moved from next-mdx-enhanced to next-mdx-remote and saw a huge gain in build performance. Thanks for this work!

I wanted to contribute an example for this repo into the Next.js repo, and opened a pull request here: vercel/next.js#16613

Please feel free to let me know if you have feedback on the proposed example.

[jescalan]

I'm so glad! Just left some feedback on the PR, but really it looks great. Figuring out how to wire this stuff up correctly isn't trivial, and your example is very clean and well-organized. Thank you for the contribution!

[daneden]

vercel/next.js#16613 was merged this morning! Closing this issue 🥳 thanks for your feedback @jescalan!

[deadcoder0904]

@daneden @jescalan Would love if it included an image example.

I've been trying to add images but can't seem to figure it out.

The image doesn't load & gives the url /blog/img.jpg as my .mdx file is in /blog/ folder.

My setup is the same as the example in Next.js repo 👍

Would love any pointers?

Edit: I also tried using a custom component Image that uses img underneath & passed it to hydrate but it didn't work out. Also, tried using MDXProvider but didn't work either. And I cannot use import anyways :(

[brianespinosa]

@deadcoder0904 I believe this is because Nextjs out of the box does not have an image loader for consuming images by import, which does not have anything to do with the MDX files.

If you want to use an image in MDX, it would have to be placed in the /public folder and referenced based on its base path. Otherwise Nextjs would need to be configured with a loader to handle images in this way.

[jescalan]

Exactly correct @brianespinosa - thanks for the quick response here!

[deadcoder0904]

@brianespinosa I have all my images inside individual posts like posts/blog/**/* & posts/tutorials/**/* & would like to keep it there (co-located with the posts).

Based on your response, I tried next-optimized-images@canary but still don't know how to configure the path, which is my main problem.

Can you point me in the right direction as Google isn't helping out much? If you know any example project, then it might do as well :)

[jescalan]

next-mdx-remote treats your markdown content as data, and it does not pass through webpack at all, so I don't think this is realistic, unfortunately

[dpyzo0o]

@jescalan Hi, I understand that this lib is designed to treat markdown content as data which means we cannot process the markdown content using webpack loaders. My question is, does that mean this lib is not going to work with this Image Optimization RFC?

[brianespinosa]

@dpyzo0o for image optimization, typical <img/> markup is not enough. This also requires defining a srcset parameter with the responsive images. Defining those images and their CDN or local path would require the Markdown to pass through Webpack, which is not something that happens.

In theory if you knew what those output paths were going to be, you could hard code them on images yourself... which would probably be a lot of work. Another possibility would be if there is a Remark plugin that did this. It would not be part of the Nextjs image optimization tooling, but it would essentially allow you to implement your own for the Markdown files.

Incidentally... I just saw this package that was published as an alpha release just this month that looks like it is going in the right direction. https://www.npmjs.com/package/@fec/remark-responsive-images

[jescalan]

Correct - since the files do not pass through webpack they will require an alternate solution here with regard to image optimization.

[dpyzo0o]

@brianespinosa @jescalan Thanks for reply. Remark plugin seems to be the right way to do it. I was searching something equivalent to gatsby-remark-images but with no luck.