Next.js (Pages Router)

How to use PMKIN with Next.js (Pages Router)

This guide walks you through integrating PMKIN with your Next.js application using the Pages Router approach.

Installation and Setup

Start by adding the necessary packages to your Next.js project:

npm install pmkin react-markdown

Set up your PMKIN API key as an environment variable. Create a .env.local file in your project root:

PMKIN_API_KEY=your_api_key_here

Creating the PMKIN Client

Create a new file lib/pmkin.ts:

import { PmkinClient } from 'pmkin'

if (!process.env.PMKIN_API_KEY) {
  throw new Error('PMKIN_API_KEYis not set')
}

export const pmkin = new PmkinClient({
  token: process.env.PMKIN_API_KEY
})

Listing Documents

Create a new file pages/blog/index.tsx:

import Link from 'next/link'

import { pmkin } from '@/lib/pmkin'

export async function getStaticProps() {
  const documents = await pmkin.listDocuments()

  return {
    props: {
      documents
    },
    revalidate: 60 // Revalidate every 60 seconds
  }
}

export default function BlogList({ documents }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      {documents.map((doc) => (
        <article key={doc.id}>
          <h2><Link href={`/blog/${doc.slug}`}>{doc.title}</Link></h2>
        </article>
      ))}
    </div>
  )
}

Rendering the Document

Create a new file pages/blog/[slug].tsx:

import Head from "next/head"
import ReactMarkdown from "react-markdown"

import { pmkin } from '@/lib/pmkin'

export async function getStaticPaths() {
  // Implement this function to return a list of all possible slug values
  // You might need to fetch all documents and extract their slugs
  return {
    paths: [],
    fallback: "blocking"
  }
}

export async function getStaticProps({ params }: { params: { slug: string } }) {
  const document = pmkin.findDocumentBySlug(decodeURIComponent(params.slug))

  return {
    props: {
      document
    },
    revalidate: 60 // Revalidate every 60 seconds
  }
}

export default function BlogPost({ document }) {
  return (
    <>
      <Head>
        <title>{document.metaTitle}</title>
        <meta name="description" content={document.metaDescription} />
      </Head>
      <article>
        <h1>{document.title}</h1>
        <ReactMarkdown>{document.markdown}</ReactMarkdown>
      </article>
    </>
  )
}

This setup provides a solid foundation for integrating PMKIN with your Next.js application using the Pages Router. Using PMKIN's API, you can expand on this by adding pagination, categories, or search functionality.