Dynamic Import Workaround

[icy ember]

I wanted to use dynamic imports in nextjs to grab my mdx files depending on my url.

For example if I was at http://somewebsite.com/blog/name-of-article, then I would want to import the file inside of public/blogs/name-of-article/index.mdx. Here's the issue, nextjs doesn't support dynamic imports, so how would I be able to import grab my desired file?

[brave chasm]

Hi @icy ember. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

[icy ember]

Here's what I had in mind before I found out dynamic imports weren't a thing:

const Blog = import(`public/blog/${filename}/index.mdx`);

return (
  <Blog />
);

[brave chasm]

---

Next.js does support dynamic imports, but there are some issues when using them with MDX files or certain components like next/image or next/link.

For example, when trying to dynamically import an MDX file and use next/image within it, you might encounter an error. This is because the next/image component requires client-side hooks, which might not be available when the MDX file is dynamically imported (source (https://github.com/vercel/next.js/issues/48176)).

Similarly, using next/link in dynamically imported MDX files can also throw an error. This is because next/link and other components that use React Context might not work as expected when they are used in dynamically imported MDX files (source (https://github.com/vercel/next.js/issues/50471)).

Here's an example of how you might dynamically import an MDX file in Next.js:

import dynamic from "next/dynamic";
import {useParams} from "next/navigation";

export default function BlogPost() { 
     const params = useParams();

     const MDXBlogPost = dynamic(() => import(
        `@/app/blog/${params.slug}/post.mdx`
     ), {
        ssr: true,
     });

     return (
        <MDXBlogPost />
     );
}

In this example, MDXBlogPost is a dynamically imported component that corresponds to the MDX file at the path specified by the slug URL parameter.

However, as mentioned above, you might encounter issues when using certain components within the dynamically imported MDX file. If you're encountering such issues, you might need to find workarounds or alternatives to dynamic imports. For example, you might need to use static imports instead, or use regular HTML tags instead of certain Next.js components.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@icy ember kapa.ai is still learning and improving, please let us know how it did by reacting below

[icy ember]

export default async function Article({
    params,
}: {
    params: { article: string };
}) {
    const BlogArticle = import(`public/blog/${article}/index.mdx`);

    return (
        <div className="flex justify-center min-h-screen">
            <div className="m-3 prose prose-invert max-w-3xl">
                <BlogArticle />
            </div>
        </div>
    );
}