Next.js Discord

Discord Forum

next-intl/plugin with @next/mdx

Unanswered
Blanc de Hotot posted this in #help-forum
Open in Discord
Blanc de HototOP
I'm trying to use the library @next/mdx in a next.js project that uses next-intel library for internationalization (RSC). Both want me to change the next.config.js.

This is how next-intl want me to change it.
const createNextIntlPlugin = require('next-intl/plugin');
 
const withNextIntl = createNextIntlPlugin();
 
/** @type {import('next').NextConfig} */
const nextConfig = {};
 
module.exports = withNextIntl(nextConfig);

This is how @next/MDX want me to change it.
import createMDX from '@next/mdx'
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Configure `pageExtensions` to include markdown and MDX files
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
  // Optionally, add any other Next.js config below
}
 
const withMDX = createMDX({
  // Add markdown plugins here, as desired
})
 
// Merge MDX config with Next.js config
export default withMDX(nextConfig)


No matter how I try I can't get this working. Is it not possible to use these two libraries together? How should I construct this next.config.js? Thanks.

2 Replies

LaPerm
This worked for me:

import createMDX from "@next/mdx";
import createNextIntlPlugin from "next-intl/plugin";
const withNextIntl = createNextIntlPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        serverComponentsExternalPackages: ["sequelize"], // read more https://github.com/vercel/next.js/discussions/50587#discussioncomment-6134092
    },
    pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
};

const withMDX = createMDX({
    // Add markdown plugins here, as desired
});

export default withNextIntl(withMDX(nextConfig));
FWIW, the thing I’m struggling with right now is dynamically loading in an MDX file to a page/component. In an ideal world, I could

import { getLocale } from "next-intl/server";
const locale = getLocale();
import MarkdownContent from `@/content/${locale}/contact-thanks.mdx`;


But you can’t have dynamic imports so…