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. Outrank also hosts live demo versions of every starter template at https://outrank.so/blog-templates.

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

Live Template Demos

Preview every available template before copying code into your app. These demo routes run inside the Outrank production app under /blog-templates/[template] and share one server-side OUTRANK_BLOG_API_KEY for the demo content.

You do not need a separate API key for each visual template. Use one Next.js Blog API key for the product whose articles should appear in the blog.

Prerequisites

Node.js installed locally
A deployed or local Next.js App Router project
Tailwind CSS configured in the target app, because the starter blog templates use Tailwind utility classes
Remote image hosts allowed in next.config.js if you use the starter's next/image article images
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 outrank-next-js-blog ^0.1.2 to read articles from your integration.

npm install outrank-next-js-blog@^0.1.2

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. If you choose a different visual template from the starter repository, copy that template's blog folder into your app as app/blog instead.

The starter assumes Tailwind CSS is already enabled. If your app does not use Tailwind, copy the markup and replace the utility classes with your own CSS before launching the blog.

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: Allow Remote Article Images

The starter renders featured images with next/image. Add the domains you use for Outrank article images to your app's next.config.js file, or replace the starter image component with a standard img tag.

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'your-image-host.com',
      },
    ],
  },
};

Step 6: 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

Article list, tag, and sitemap requests return summary fields. The full article HTML and Markdown are loaded only when the starter renders an individual article page.

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