CODEWITHSUNDEEP
next.js
Laurence Fass
Laurence Fass

Reputation: 1942

How can I import next packages into next.config.js without overwriting entire export object?

How can I import next packages into next.config.js without overwriting entire export object?

I keep seeing a repeated pattern of configuring next.js through next.config.js that is not consistent with its (config.js) documentation. It involves assigning a single import to module.exports.

For example, extract from here: https://nextjs.org/docs/advanced-features/using-mdx

Require the package and configure to support top level .mdx pages. The following adds the options object key allowing you to pass in any plugins:

// next.config.js

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
})
module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'md', 'mdx'],
})

The general pattern for next.config.js from https://nextjs.org/docs/api-reference/next.config.js/introduction is to assign config within an object.

const nextConfig = {
  /* config options here */
}

module.exports = nextConfig

My question is how do I configure next.js to use mdx and other configuration if the MDX function in this example overwrites module.exports with a single function?

Upvotes: 1

Views: 1801

Answers (1)

eol
eol

Reputation: 24565

I'm not familiar with next.js but from the looks of it you could just merge the MDX-config with your custom options using the spread syntax:

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
});

const nextConfig = {
  /* config options here */
};

module.exports = { 
  ... withMDX({
     pageExtensions: ['js', 'jsx', 'md', 'mdx'],
  }),
  ... nextConfig
};

Upvotes: 0

Related Questions