I'm referring to plugins to extend my app, such as API routes or the user interface. <@&1089670008898080870>
#Plugins
thorn vine
somber treeBOT
Hi @thorn vine. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
In Next.js, there are a few different types of "plugins" you can use to extend your app:
1. Babel Plugins
You can extend Next.js's default Babel configuration by adding a .babelrc file at the root of your project. This must include the next/babel preset:
{
"presets": ["next/babel"],
"plugins": ["@babel/plugin-proposal-do-expressions"]
}
You can also configure plugins with custom options via the next/babel preset. [Babel config]
2. SWC Plugins (Experimental)
Next.js supports experimental SWC plugins written in WebAssembly to customize the transformation behavior:
// next.config.js
module.exports = {
experimental: {
swcPlugins: [
[
'plugin',
{
...pluginOptions,
},
],
],
},
}
3. MDX Plugins (remark/rehype)
If you're using MDX, you can add remark and rehype plugins to transform content:
// next.config.mjs
import remarkGfm from 'remark-gfm'
import createMDX from '@next/mdx'
const withMDX = createMDX({
options: {
remarkPlugins: [remarkGfm],
rehypePlugins: [],
},
})
export default withMDX(nextConfig)
4. API Routes
For extending your app with backend functionality, Next.js has built-in support for API Routes (Pages Router) or Route Handlers (App Router), which let you create public HTTP endpoints:
// pages/api/hello.ts (Pages Router)
import type { NextApiRequest, NextApiResponse } from 'next'
export default function handler(req: NextApiRequest, res: NextApiResponse) {
res.status(200).json({ message: 'Hello from Next.js!' })
}