Add a blog to your Next.js site

Set it up in five steps

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.

   # 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.

   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.

   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.

   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

Starting fresh? The Next.js blog starter has the blog already wired in. 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.

What you get

• Articles that answer real questions. Mentionwell reads your site, finds what your buyers ask Google and AI assistants, and writes researched posts in your voice.
• Built to get cited. Each post ships with clear answers, FAQs and structured data, so ChatGPT, Claude and Google AI Overviews can quote it.
• On your domain. Posts live at yoursite.com/blog, not on a subdomain you don’t own.
• Proof it’s working. Paid plans check whether AI assistants actually recommend you, not just link you as a source, and track it over time.

Questions

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.

Other guides

Lovable · Bolt · v0 · Cursor · Claude Code · Replit · Windsurf · Base44 · React (Vite) · Any site . Working in an agent? See the MCP servers and the CLI.