Next.js Blog Integration

Publish Outrank articles on your own Next.js site with cached static rendering

How Next.js Blog Integration Works

The Next.js Blog integration gives your own Next.js site a private API key for reading published Outrank articles server-side. Install the outrank-next-js-blog package, copy the starter app/blog folder into your App Router project, and the starter renders cached article lists, article pages, tag pages, and a blog sitemap.

Keep OUTRANK_BLOG_API_KEY server-side only. Do not expose it with a NEXT_PUBLIC_ prefix.

Prerequisites

Node.js installed locally
A deployed or local Next.js App Router project
A Next.js Blog API key from your Outrank integration settings

Setup Instructions

Step 1: Create Integration & Copy API Key

Go to Integrations in your Outrank dashboard
Select Next.js Blog
Create the integration
Copy the API key from the success modal

Step 2: Install the API Client

The starter uses the outrank-next-js-blog package to read articles from your integration.

npm install outrank-next-js-blog

Step 3: Copy the Blog Folder

Copy the entire starter app/blog folder into your Next.js App Router project. It includes the blog routes, article template, tag pages, sitemap, local components, types, constants, formatting helpers, pagination, and article content styles.

View starter repository

Step 4: Configure Environment Variables

Create a .env.local file and add this single server-side environment variable.

OUTRANK_BLOG_API_KEY=your_api_key

Step 5: Run the Blog

npm install
npm run dev

Open /blog on your site to view your published Outrank articles.

Routes Included

/blog - paginated article listing
/blog/[slug] - server-rendered article page with metadata
/blog/tag/[slug] - tag-filtered article listing
/blog/sitemap.xml - dynamic blog sitemap

Editing the Blog Design

The starter keeps all blog screens and support files under app/blog. You can customize the list page, article template, tag page, typography, local components, and content styles without changing the Outrank npm client.

Cache & Update Timing

The starter uses Next.js caching for article lists, article pages, tag pages, and the blog sitemap. In production, cached blog data revalidates once per day. In development, the cache revalidates almost immediately so local testing stays fast.

Published article responses from Outrank are cached for up to 24 hours for fast server-side reads
Publishing through Outrank clears the Outrank API cache immediately
Your Next.js site still uses its own daily cache, so visible site updates can take up to one day
Redeploy the site or add your own on-demand revalidation if you need updates to appear sooner

What Gets Synced

Title and slug
Meta description
Article HTML and Markdown
Featured image URL
Tags and reading time
Created and updated timestamps

Sitemap Configuration for SEO

The starter includes a dedicated /blog/sitemap.xml. Submit this sitemap in Google Search Console, or merge it into your existing sitemap if your main website already generates one.

Open Google Search Console
Select Sitemaps from the menu
Enter blog/sitemap.xml
Submit the sitemap

AI Coding Agent Notes

If you ask an AI coding tool to add this to an existing Next.js site, tell it to keep all Outrank API calls inside Server Components, route handlers, or server utilities. The API key should only be read from OUTRANK_BLOG_API_KEY.

Use BlogClient from the outrank-next-js-blog package
Render article HTML with dangerouslySetInnerHTML
Use static or ISR rendering by default for cached article content
Use revalidate only if you want cached incremental regeneration
Do not add the API key to client components or browser-visible JavaScript