Usage with Turbopack

To use Turbopack , simple append the --turbopack flag to your development command:

package.json

"scripts": {
-  "dev": "next dev"
+  "dev": "next dev --turbopack"
}

Note

Without --turbopack flag Next.js under the hood uses Webpack , written in JavaScript.

Only Serializable Options Are Supported

For this moment only JSON serializable values can be passed in nextra function. This mean that with Turbopack enabled you can’t pass custom remarkPlugins, rehypePlugins or recmaPlugins since they are functions.

The following options could be passed only without Turbopack or only while building your app with next build (since Turbopack isn’t support next build for now and Webpack is used instead).

next.config.js

import nextra from 'nextra'
 
const withNextra = nextra({
  mdxOptions: {
    remarkPlugins: [myRemarkPlugin],
    rehypePlugins: [myRehypePlugin],
    recmaPlugins: [myRecmaPlugin]
  }
})

If you try to pass them, you’ll get an error from Turbopack:

Error: loader nextra/loader for match "./{src/app,app}/**/page.{md,mdx}" does not have serializable options.
Ensure that options passed are plain JavaScript objects and values.