Next.js Plugin

Automatically run Grafbase locally using the CLI when Next.js starts the development server.

This plugin is intended to be used locally when building Next.js applications.

The plugin requires you wrap your next.config.js config using the withGrafbase function that automatically detects if you're using a local Grafbase API URL.

You can install the Grafbase Next.js Plugin directly from NPM:

npm install -D grafbase @grafbase/nextjs-plugin

Inside next.config.js import withGrafbase and pass it any Next.js config:

/** @type {import('next').NextConfig} */

const { withGrafbase } = require('@grafbase/nextjs-plugin')

const nextConfig = () =>
  withGrafbase({
    reactStrictMode: true,
    swcMinify: true
  })

module.exports = nextConfig

Make sure to set the .env variable GRAFBASE_API_URL or NEXT_PUBLIC_GRAFBASE_API_URL that points to localhost:

GRAFBASE_API_URL=http://localhost:4000/graphql
# OR
# NEXT_PUBLIC_GRAFBASE_API_URL=http://localhost:4000/graphql

You can then run the Next.js server as you would normally and the plugin will take care of running the CLI:

npm run dev

• This plugin is intended to work locally. The plugin will not do anything in a production context.
• If there is no environment variable or the environment variable is not localhost, the plugin will skip running the CLI.

The Grafbase Next.js Plugin is open source and maintained by Grafbase. Join us on Discord to discuss any bugs or improvements.