How to connect Prismic with next.js project using graphql

Hello everyone,

I am very new to using Prismic and graphql . So please be nice to me :slight_smile:
I wanted to start a prismic project just to get to know how it all works. Therefore I started with just a title element with a uid in Prismic and tried connecting this to the next.js file via graphql.

I know that I get the data of the title I want from prismic but I can not display it in the localhost. It always gives me server errors, saying that something is undefined.

I used the following code. I am very sure that it is obvious for experts what I am doing wrong but I am triing to connect the content since 5 days and i don´t know what to try anymore.

I would very much aprechiate any help.
Thanks in advance.

import Head from 'next/head'
import React from "react"
import {Link, RichText, Date} from 'prismic-reactjs';
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import {
} from "@apollo/client";
import { PrismicLink } from "apollo-link-prismic";

const client = new ApolloClient({
link: PrismicLink({
uri: "",
cache: new InMemoryCache()
var test = "";
export const document= client.query({
query: gql query{ documentation(lang: "*", uid: "prismic") { title } }
}).then(response => {
test = response;
}).catch(error => {

function linkResolver(doc) {

// Define the url depending on the document type
if (doc.type === 'page') {
    return '/page/' + doc.uid;
} else if (doc.type === 'blog_post') {
    return '/blog/' + doc.uid;

// Default to homepage
return '/';


export default function Home() {
return (

My test

  <main className={styles.main}>
      <span>{[0].text }</span>


Hello @marlen.bentner

Welcome to the Prismic community and thanks for reaching out to us.

What are you getting in response when you console it? Can you paste it here?


  1. {data: {…}, loading: false, networkStatus: 7}

  2. data:

1. documentation:

  1. title: Array(1)

    1. 0: {type: 'heading1', text: 'Connection works!', spans: Array(0)}
    2. length: 1
    3. [[Prototype]]: Array(0)

  2. __typename: "Documentation"
  3. [[Prototype]]: Object

2. [[Prototype]]: Object
  1. loading: false
  2. networkStatus: 7
  3. [[Prototype]]: Object

Hello @marlen.bentner

When using Next.js for templating data, we use the RicheText helpers' function to render Rich text fields. You need to pass the field name like this:

{RichText.render(, linkResolver)}

Please find more detail in this article: Templating Content in Next.js. - Prismic

Let me know if you have any questions.