Next.js

Using Fuse with Next.js

Fuse ships with first-class support for Next.js. If you run create-fuse-app in a Next.js project it will automatically:

1. Add the Next.js plugin to your next.config.js
2. Create a /api/fuse API route

You do not have to manually run fuse dev or fuse build as the Next.js plugin does this for you automatically.

Setting up Fuse with Next.js manually

Add the Next.js plugin to your next.config.js

const { nextFusePlugin } = require('fuse/next/plugin')
 
/** @type {import('next').NextConfig} */
const nextConfig = nextFusePlugin()({
  // Your Next.js config here
})
 
module.exports = nextConfig

Create the /api/fuse API route

This API route will serve as the entrypoint to the GraphQL API that Fuse creates. If you are using Next.js’s app router, add a file at app/api/fuse/route.ts and copy the below code to it:

import { createAPIRouteHandler } from 'fuse/next'
 
const handler = createAPIRouteHandler()
 
export const GET = handler
export const POST = handler

That’s it! Fuse will now serve a GraphQL API at /api/fuse.