Next.js SDK Guide

Quick Start with CLI (Recommended)

The fastest way to add an EarlySEO blog to your Next.js project is the CLI scaffold:

npx @earlyseo/blog init

This will:

1. Detect your Next.js App Router project
2. Ask for your Site ID (from Dashboard → Integrations → SDK)
3. Create app/blog/page.tsx and app/blog/[slug]/page.tsx
4. Set EARLYSEO_SITE_ID in .env.local

After running the CLI, start your dev server and visit /blog:

npm run dev

Already have pages set up? Skip to Manual Setup below.

Prerequisites

• Next.js 13+ with App Router (app/ or src/app/)
• SDK integration enabled in EarlySEO (Dashboard → Integrations → SDK)
• Site ID from the SDK integration card
• At least one published article

Manual Setup

1. Install package

npm install @earlyseo/blog

2. Add environment variable

Create or update .env.local:

EARLYSEO_SITE_ID=your-site-id

3. Create blog listing page

Create app/blog/page.tsx:

import { createBlogListPage, createBlogListMetadata } from "@earlyseo/blog/next";

const siteId = process.env.EARLYSEO_SITE_ID!;

export default createBlogListPage({
  siteId,
  title: "Blog",
});

export const generateMetadata = createBlogListMetadata({
  title: "Blog",
  description: "Read our latest articles",
});

4. Create blog post page

Create app/blog/[slug]/page.tsx:

import { createBlogPostPage, createBlogPostMetadata } from "@earlyseo/blog/next";

const siteId = process.env.EARLYSEO_SITE_ID!;

export default createBlogPostPage({ siteId });

export const generateMetadata = createBlogPostMetadata({
  siteId,
});

5. Run your app

npm run dev

Visit /blog to see your article list and /blog/<article-slug> for individual articles.

Customization

Raw HTML mode

By default, articles render with EarlySEO's built-in styles. To use your own CSS instead:

export default createBlogPostPage({
  siteId,
  htmlMode: "raw",
});

Custom base path

Change the blog URL prefix from /blog to any path:

export default createBlogListPage({
  siteId,
  basePath: "/resources",
});

Links inside the list page will automatically point to /resources/<slug>.

Internal linking with BackLink

EarlySEO supports automatic internal linking between articles. Add the BackLink component to resolve cross-article links:

import { BackLink } from "@earlyseo/blog/next";

How publishing works

1. Write and publish an article in the EarlySEO dashboard
2. EarlySEO writes JSON files to global CDN (media.earlyseo.com)
3. Your Next.js app fetches the JSON at request time via @earlyseo/blog
4. Articles include SEO metadata, Open Graph tags, and structured data automatically

Need help?

• SDK Integration Setup
• React SDK Guide (for Vite, Remix, or SPA)
• SDK Troubleshooting
• Email team@earlyseo.com