ContextQMD
Back to Next Js

Next.js with Grafbase

examples/with-grafbase/README.md

16.2.52.4 KB
Original Source

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:

bash
npx create-next-app --example with-grafbase with-grafbase-app
bash
yarn create next-app --example with-grafbase with-grafbase-app
bash
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:

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

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

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

Learn more