The data platform that powers your Next.js application

Build and scale your Next.js application backed by your own GraphQL API.

Next.js Logo

Why Grafbase?

Grafbase accelerates backend development by providing a GraphQL API at the edge.
Making changes to your API is as easy as opening a pull request with schema changes.
All changes are available at their own deployment API endpoint for use in development.

Accelerate Next.js development
with Grafbase

Collaborate

Build your own database with Grafbase right inside your projects source code.

Optimize

Grafbase monitors and detects changes to your GraphQL API, schema, and usage giving you real-time insights into how you can build the best Next.js applications.

Scale

Grafbase automatically scales as your Next.js application grows.

Testimonials

?
Lee Robinson@leeerob

I'll be chatting with @fbjork about @grafbase and creating instant serverless GraphQL backends tomorrow at 10am PT. Get notified when we go live → https://youtu.be/JMizhu3ut-M

?
Ben 🏳️‍🌈@nurodev

Damn, trying out the @grafbase beta & it's super slick! Feels like what @planetscaledata is doing for databases, @Grafbase is going for #GraphQL 🔥

?
Roy Barber@roybarberuk

This looks awesome! @nextjs + @grafbase on @vercel will be 🔥🔥🔥

Grafbase + Next.js

Next.js gives you all the tools you need to build production scale applications. Whether you need to fetch data on the server, at build time when creating a static export, or caching on demand, Next.js has you covered.

Fetch data on the client from your Grafbase project using a GraphQL client like urql.

import { gql, useQuery } from "urql";

const GetTodos = gql`
  query TodoLists {
    todoListCollection {
      edges {
        node {
          title
          todos {
            title
            complete
        }
      }
    }
  }
`

const Home = () => {
  const [{ data, fetching }] = useQuery({ query: GetTodos });

  return (
    // ...
  )
}
Fetch data on the client from your Grafbase project using a GraphQL client like urql.

import { gql, useQuery } from "urql";

const GetTodos = gql`
  query TodoLists {
    todoListCollection {
      edges {
        node {
          title
          todos {
            title
            complete
        }
      }
    }
  }
`

const Home = () => {
  const [{ data, fetching }] = useQuery({ query: GetTodos });

  return (
    // ...
  )
}

Start building with Next.js

We’ve made it super easy to get started integrating Grafbase with Next.js.

Grafbase Concepts

Learn the concepts of Grafbase and how to define your own custom data structure for use within your Next.js application.

The Guide

Learn how to integrate the Grafbase GraphQL API with Next.js in a few simple steps.

Next.js Starter

Want to see what it looks like in a project already hooked up?

Get Started

Get early access to the Grafbase beta.