# Add a blog to your Next.js site

> Add a blog to your Next.js App Router site with the mentionwell Reader SDK: two routes, three env vars, and researched articles on your own /blog.

To add a blog to a Next.js App Router site, install the mentionwell Reader SDK, add three env vars, and create app/blog/page.tsx and app/blog/[slug]/page.tsx. The pages are server components that read published articles from the Mentionwell Reader API, so your key never reaches the browser.

## Setup

1. **Create your site in Mentionwell.** Sign up in the dashboard, or from the terminal: login opens your browser and stores a token, and onboard reads your site, plans articles and starts the first one. New accounts get a 14-day trial with one real article, no card.

   ```
   npx mentionwell-cli login
   npx mentionwell-cli onboard yoursite.com
   ```

2. **Install the SDK and add your keys.** Install the Reader SDK, then copy the env vars from Connect → “Set it up yourself” into .env.local and your host's dashboard. Keep MENTIONWELL_API_KEY server-side: never prefix it with NEXT_PUBLIC_. Or run npx mentionwell-cli init in the repo: it detects Next.js, syncs these env vars, writes the revalidation route and verifies delivery.

   `.env.local`

   ```
   # npm install mentionwell
   MENTIONWELL_API_URL=https://app.mentionwell.com
   MENTIONWELL_SITE_SLUG=your-site-slug
   MENTIONWELL_API_KEY=your-reader-key
   ```

3. **Add a server-only reader.** One small module holds the config and the two calls your pages need.

   `lib/mentionwell.ts`

   ```
   import { getBlogPostViaApi, getBlogPostsViaApi } from "mentionwell/api";
   
   const config = {
     apiUrl: process.env.MENTIONWELL_API_URL!,
     siteSlug: process.env.MENTIONWELL_SITE_SLUG!,
     apiKey: process.env.MENTIONWELL_API_KEY!,
   };
   
   export const listPosts = () => getBlogPostsViaApi(config, 1, 24);
   export const getPost = (slug: string) => getBlogPostViaApi(config, slug);
   ```

4. **Add the /blog index.** A server component that lists published posts and refreshes every five minutes.

   `app/blog/page.tsx`

   ```
   import Link from "next/link";
   import { listPosts } from "@/lib/mentionwell";
   
   export const revalidate = 300;
   
   export default async function BlogIndex() {
     const { posts } = await listPosts();
     return (
       <main>
         <h1>Blog</h1>
         {posts.map((post) => (
           <article key={post.slug}>
             <Link href={`/blog/${post.slug}`}>{post.title}</Link>
             <p>{post.excerpt}</p>
           </article>
         ))}
       </main>
     );
   }
   ```

5. **Add the article page.** prepareArticleHtml strips duplicate chrome from the article HTML, and mentionwell/styles styles the tables, callouts, FAQ and citations inside .wb-article-host.

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

   ```
   import { notFound } from "next/navigation";
   import { prepareArticleHtml } from "mentionwell/html-utils";
   import "mentionwell/styles";
   import { getPost } from "@/lib/mentionwell";
   
   export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
     const post = await getPost((await params).slug);
     if (!post) notFound();
     return (
       <article>
         <h1>{post.title}</h1>
         <div
           className="wb-article-host"
           dangerouslySetInnerHTML={{ __html: prepareArticleHtml(post.html) }}
         />
       </article>
     );
   }
   ```

## Start from a template

[Next.js blog starter](https://github.com/ziplyne-agency/mentionwell-nextjs-starter): Next.js App Router, TypeScript and Tailwind with /blog, /blog/[slug], sitemap, robots, llms.txt and a signed revalidation webhook. Deploy to Vercel or Netlify in one click.

## Good to know

- Using the Pages Router? The same SDK calls work from getStaticProps; the recipe is in the docs at /docs/frameworks/nextjs-pages.
- Posts appear within the revalidate window. For instant publishing, npx mentionwell-cli init adds a signed revalidation route that Mentionwell calls on publish.
- Metadata, sitemaps, styling and the sticky table of contents are covered in the full Next.js guide at /docs/frameworks/nextjs.

## FAQ

### Does this work with the Next.js App Router?

Yes. The blog pages are server components that call the mentionwell Reader SDK at request or revalidation time. The API key stays on the server, and the HTML Google and AI crawlers fetch already contains the article.

### Can my coding agent write this for me?

Yes. Paste the setup prompt from the Connect screen into Cursor, Claude Code or Windsurf with the repo open, or run `npx mentionwell-cli init`. Both produce the same routes as the code on this page.

### Do I need a CMS?

No. Mentionwell stores and serves the articles. Your site only needs a /blog page that reads them, and your AI builder writes that page for you from the setup prompt.

### What does it cost to try?

Nothing. Every new account gets a 14-day trial with one real article written for your site (it starts as soon as setup finishes), plus a few AI visibility checks. No card. After 14 days you stay on the Free plan, which still writes 1 article a month. Builder is $24/month ($19/month billed yearly) for 5 articles, a weekly AI search check, and the CLI and MCP for your coding agent. Starter is $79/month for 15 articles.

Start free: https://app.mentionwell.com/sign-up
MCP servers and CLI: https://mentionwell.com/mcp
Canonical URL: https://mentionwell.com/builders/nextjs