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.
Start by adding the necessary packages to your Next.js project:
npm install pmkin react-markdownSet up your PMKIN API key as an environment variable. Create a .env.local file in your project root:
PMKIN_API_KEY=your_api_key_hereCreate 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
})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>
)
}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.