# Next.js SDK Guide (/docs/next-sdk)



Quick Start with CLI (Recommended) [#quick-start-with-cli-recommended]

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

```bash
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`:

```bash
npm run dev
```

> Already have pages set up? Skip to [Manual Setup](#manual-setup) below.

***

Prerequisites [#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 [#manual-setup]

1. Install package [#1-install-package]

```bash
npm install @earlyseo/blog
```

2. Add environment variable [#2-add-environment-variable]

Create or update `.env.local`:

```bash
EARLYSEO_SITE_ID=your-site-id
```

3. Create blog listing page [#3-create-blog-listing-page]

Create `app/blog/page.tsx`:

```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 [#4-create-blog-post-page]

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

```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 [#5-run-your-app]

```bash
npm run dev
```

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

***

Customization [#customization]

Raw HTML mode [#raw-html-mode]

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

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

Custom base path [#custom-base-path]

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

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

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

Internal linking with BackLink [#internal-linking-with-backlink]

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

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

***

How publishing works [#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? [#need-help]

* [SDK Integration Setup](/docs/sdk)
* [SDK Sitemap Guide](/docs/sdk-sitemap)
* [React SDK Guide](/docs/react-sdk) (for Vite, Remix, or SPA)
* [SDK Troubleshooting](/docs/sdk-troubleshooting)
* Email [team@earlyseo.com](mailto:team@earlyseo.com)