Introduction

Ready to supercharge your website with some awesome content? You're in the right place! Let's dive into how you can use PMKIN's GraphQL API to bring your blog posts to life in your Next.js app.

About PMKIN

PMKIN is your new best friend when it comes to content management. It's a headless CMS that gives you a great writing experience and plays nicely with your existing website. No more wrestling with clunky interfaces or complicated setups!

The GraphQL API

Our GraphQL API is the secret sauce that makes PMKIN so flexible and powerful. You can find it at:

https://content.pmkin.io/graphql

To keep your content safe, we use Bearer token authentication. Don't worry. It's super simple to set up! Create an API key for your project, and you're ready. (Psst! Check out our Authentication guide for more details.)

Integrating PMKIN with Next.js

Let's walk through the process of using PMKIN with your Next.js app to list and display blog posts.

Step 1: Install dependencies

Start by installing the necessary packages:

npm install @apollo/client graphql react-markdown

Step 2: Set up Apollo Client

Create a new file called apollo-client.js in your project root:

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client'
import { setContext } from '@apollo/client/link/context'


const httpLink = createHttpLink({
  uri: 'https://content.pmkin.io/graphql',
})


const authLink = setContext((_, { headers }) => {
  const token = process.env.PMKIN_API_KEY
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    },
  }
})


const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
})


export default client

Add your PMKIN API key to your .env.local file:

PMKIN_API_KEY=your_api_key_here

Step 3: Fetch and display blog posts

Create a new file called pages/blog.js to list your blog posts:

import { gql } from '@apollo/client'
import Link from 'next/link'


import client from '../apollo-client'


export default function Blog({ posts }) {
  return (
    <div>
      <h1>Our Blog</h1>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>
            <Link href={`/blog/${post.slug}`}>
              <a>{post.title}</a>
            </Link>
          </h2>
          <p>{post.metaDescription}</p>
        </div>
      ))}
    </div>
  )
}


export async function getStaticProps() {
  const { data } = await client.query({
    query: gql`
      query GetBlogPosts {
        documents(includeDrafts: false) {
          id
          title
          slug
          metaDescription
        }
      }
    `,
  })


  return {
    props: {
      posts: data.documents,
    },
  }
}

Step 4: Create a dynamic page for individual blog posts

Create a file for individual blog posts at pages/blog/[slug].js:

import { gql } from '@apollo/client'


import client from '../../apollo-client'


export default function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </article>
  )
}


export async function getStaticPaths() {
  const { data } = await client.query({
    query: gql`
      query GetBlogSlugs {
        documents(includeDrafts: false) {
          slug
        }
      }
    `,
  })


  const paths = data.documents.map((post) => ({
    params: { slug: post.slug },
  }))


  return { paths, fallback: false }
}


export async function getStaticProps({ params }) {
  const { data } = await client.query({
    query: gql`
      query GetBlogPost($slug: String!) {
        documentBySlug(slug: $slug) {
          id
          title
          html
        }
      }
    `,
    variables: { slug: params.slug },
  });


  return {
    props: {
      post: data.documentBySlug,
    },
  };
}

This setup fetches the markdown content from the API and renders it on the server using react-markdown.

What's Next?

To further explore PMKIN's capabilities and integrate it with different frameworks and languages, check out these resources:

• Data Model - Understand how your content is structured
• How to use PMKIN with Next.js
• How to use PMKIN with Remix
• How to use PMKIN with TypeScript
• How to use PMKIN with Python

These guides will help you leverage PMKIN's full potential across various development environments.