Grafbase Next.js Plugin

The official Grafbase Next.js Plugin is now available!

This plugin automatically starts the Grafbase CLI at the same time as you run your development Next.js server.

npm install -D grafbase @grafbase/nextjs-plugin

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

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

Next all that's left to do is start your Next.js server as you would normally:

npm run dev

If there is no environment variable or the environment variable is not localhost, the plugin will skip running the CLI.

We'd love to hear your feedback and ideas, so join us on Discord.