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. Article data becomes instantly available
3. Your Next.js app fetches the data at request time via @earlyseo/blog
4. Articles include SEO metadata, Open Graph tags, and structured data automatically

Need help?

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