End-to-End Example: Next.js Blog

This walkthrough shows a complete implementation using JSONPress and the Next.js App Router.

1. Create Content

In JSONPress, create a blog post and add a few blocks. Make sure to Publish it.

2. Environment Setup

Store your API key in .env.local:

NEXT_PUBLIC_JSONPRESS_API_KEY=your_generated_apiKey

3. Build the Page

Create app/blog/[slug]/page.tsx. This page uses the JsonPressBlog client component to render content.

"use client";

import { JsonPressBlog } from "jsonpress-block-renderer";
import "jsonpress-block-renderer/style";

export default function Page({ params }: { params: { slug: string } }) {
  return (
    <article className="max-w-4xl mx-auto py-12">
      <JsonPressBlog
        apiKey={process.env.NEXT_PUBLIC_JSONPRESS_API_KEY as string}
        slug={params.slug}
        template="Professional"
      />
    </article>
  );
}

4. Run your application

Start your development server and navigate to your blog page.

npm run dev

---

Why use JsonPressBlog?

• Automatic Fetching: No need to write manual fetch calls or useEffect hooks.
• Built-in Styles: Just import the CSS and everything looks premium instantly.
• Template Support: Easily switch from Professional to Modern or Minimal with one prop.