Replies: 5 comments 7 replies
-
|
I came here to mention that I've been chasing after the same thing. I have a folder of MDX files in a /posts subdirectory. I'd like for Another angle that I tried was using the next dynamic import. Dynamic imports work a treat when you have completely static paths to render. Things worked fine if I wanted to use While googling around I uncovered this thread that mentions some of the issues inherent to webpack and dynamic imports. The linked comment in particular suggests building out a map of imports, to create a With that structure, you can pass the slug from the props and dynamically load the mdx. It works, but it's not ideal. I'll note that EVEN trying to have a simpler input map that I then loop over and build up (like Anyways... this might not help your case, but I've been all over the map and figured I'd share some of my attempts (in the hopes that one of us gets there in the end). |
Beta Was this translation helpful? Give feedback.
-
|
At the end opted for the simplest approach, although requires a tiny bit of boilerplate, seems to go well with the design of MDX itself, where you can load React components. This also give me the benefit that I was looking for, where it'll load only the JS needed to render the posts without affecting the other sections of web. I opted for creating a wrapper component in React that will load all the dependencies needed for any MDX file, in my case looks something like: import React from "react";
import CodeBlock from "../codeBlock";
import { MDXProvider } from "@mdx-js/react";
const components = {
code: CodeBlock,
};
export default ({ children }) => {
return (
<MDXProvider components={components}>
<div className="section-wrapper">
<div className="container-fluid section-title">{children}</div>
</div>
</MDXProvider>
);
};And then to use it, I only wrap my markdown with the wrapper like so: export const meta = {
author: "Andrew Lisowski",
authorLink: "https://github.intuit.com/alisowski",
avatar: "https://avatars2.githubusercontent.com/u/1192452?s=400&v=4",
publishDate: "2018-05-10T12:00:00Z",
title: "First Post",
};
import MdxWrapper from "../../components/layout/mdx-wrapper.tsx";
<MdxWrapper>
# Some content
```json
{
"prop": "value"
}
\```
```js
import React from "react";
import Example from "./place";
export default () => <Example />;
\```
</MdxWrapper>Finally to load those mdx files, I just use the normal routing from Next. Hope that helps! |
Beta Was this translation helpful? Give feedback.
-
|
@jemjam Did you try using Example of use: https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-gcms-lcz-sty/src/utils/i18n/i18nextLocize.ts#L353 |
Beta Was this translation helpful? Give feedback.
-
|
Did anyone here ever come up with a better approach? I'm running into the same problem, and would love to hear about alternative solutions. Especially ones that take advantage of |
Beta Was this translation helpful? Give feedback.
-
|
@jemjam I've been doing something similar and realized that the |
Beta Was this translation helpful? Give feedback.
-
|
Came across this page when trying to do something similar with exported I'm setting
Edit: a few hours later, I was able to import I'm not sure if I can get the content and metadata at once. |
Beta Was this translation helpful? Give feedback.
-
|
you can give nextjs-mdx-extended / next-mdx-enhanced a try, I believe it can support frontmatter |
Beta Was this translation helpful? Give feedback.
-
|
I'm trying to do something similar at #13843, managed to do it with static paths, want to make it work with content from a CMS now. Related:
|
Beta Was this translation helpful? Give feedback.
-
|
I managed to get this working with the code below. The tricky part was the line: const meta: FrontMatter = (await import(`pages/blog/${filename}.mdx`)).frontMatter;It didn't work when I had: const meta: FrontMatter = (await import(path)).frontMatter;Even though they both resolved to the same string. Full code: import fg from "fast-glob";
import { IEntry } from "fast-glob/out/types/entries";
import { GetStaticProps } from "next";
export default function BlogIndexPage({ blogPosts }) { ... } // etc
export const getStaticProps: GetStaticProps<Props> = async () => {
const blogPosts = await Promise.all(
(await fg("pages/blog/*.mdx", { stats: true })).map(
async (file: IEntry) => {
const { path, mtimeMs, birthtimeMs } = file;
const filename = path.match(/blog\/(.*)+\.mdx/)[1];
// this line is very brittle. NextJS doin' some funky magic
const meta: FrontMatter = (await import(`pages/blog/${filename}.mdx`)).frontMatter;
return {
url: `/blog/${filename}`,
createdMs: birthtimeMs,
editedMs: mtimeMs,
...meta,
};
}
)
);
return {
props: {
blogPosts,
},
};
};(using next@10.0.4) |
Beta Was this translation helpful? Give feedback.
-
|
Rather than Next.js doin' some funky magic 🕺, I think the reason the directory we're importing from needs to be a hard-coded string to avoid webpack looking at all directories. That's why we can use: await import(`pages/blog/${fileName}`)but not await import(directoryAndFileName)or await import(join(process.cwd(), "pages", "blog", fileName)) |
Beta Was this translation helpful? Give feedback.
-
|
I have successfully managed to import mdx files as components dynamically using the dynamic import feature of Next.js /pages/posts/[id].js /lib/posts.js
|
Beta Was this translation helpful? Give feedback.
-
|
For anyone wandering around trying to understand why ssr is not working with this (after removing ssr: false): it would not, #32242 |
Beta Was this translation helpful? Give feedback.
-
Hi,
I'm new to NextJs and although I find it extremely easy to use, you did an amazing work. I'm struggling with something a bit more advanced, maybe you can offer some guidance.
I'm basically trying to create a website, with a blog section that allows me to load dynamically mdx files to have markdown with React components in it, but when I try to build the solution it fails saying that cannot find any file on the path, it looks like is trying to search for .tsx, .jsx files but not .mdx
I've tested displaing MDX files by itself without importing them and they work fine, but I would like to load them dynamically so that I can keep the bundle light for the rest of the pages and only load MdxProvider and the rest of the JS needed to process the blog content when I'm displaying this content.
This is what I've tried so far with no success:
The idea is that the PostPage /blog/[slug].tsx component will receive a parameter by url and then try to load the relevant .mdx component.
This is the error I'm getting on build time:
Any help will be greatly appreciated :-)
Beta Was this translation helpful? Give feedback.
All reactions