next.js/examples/with-grafbase

Next.js with Grafbase

This example shows to use Grafbase with Next.js. This example features fetching from a local GraphQL backend powered by the Grafbase CLI, and GraphQL Code Generator for making type-safe queries.

Demo

You can see a demo of this online at https://nextjs-rsc-demo.grafbase-vercel.dev.

Deploy to Vercel

Make sure to provide your GRAFBASE_API_URL and GRAFBASE_API_KEY to Vercel as environment variables when deploying.

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-grafbase with-grafbase-app

yarn create next-app --example with-grafbase with-grafbase-app

pnpm create next-app --example with-grafbase with-grafbase-app

To run the example locally you need to:

1. Copy the .env.local.example to .env.local and provide your API URL and API Key: cp .env.local.example .env.local — the defaults will be fine for development mode.

2. Run the Grafbase CLI using npx grafbase@latest dev

3. Populate the backend with some Post entries using a GraphQL mutation:

mutation {
  postCreate(
    input: {
      title: "I love Next.js!"
      slug: "i-love-nextjs"
      comments: [{ create: { message: "me too!" } }]
    }
  ) {
    post {
      id
      slug
    }
  }
}

4. Run the app locally and go to http://localhost:3000 to navigate to each post page! This data is fetched from the local backend.

5. Optionally run npm run codegen to watch for any changes to queries inside of the app and automatically generate types.

Learn more

• Grafbase Quickstart — get started with Grafbase, quickly!
• Create an account — deploy to the edge with Grafbase!
• Next.js Documentation — learn more about Next.js