Use the Next.js Blog integration when you want Alef articles to publish on your own site without exposing the API key in browser code.
AAlef Product·5 min read
01
Create the integration in Alef
Open Settings, go to Integrations, and select Next.js Blog. Create the integration, then copy the API key from the success dialog before closing it.
Save the key in your deployment environment as BLOG_API_KEY or the server-only name your blog client expects. Do not prefix it with NEXT_PUBLIC_ because that would ship the secret to the browser.
02
Install the blog client in your Next.js app
Copy the Alef blog client and blog routes into your App Router project, or adapt the same server-side pattern in your existing blog. The important boundary is that article requests run only in Server Components, route handlers, or server utilities.
Point the client at your Alef API root, pass the API key as a Bearer token, and render the returned article HTML only inside the server-rendered article page.
03
Publish the SEO routes
Expose a blog index, an article route such as /blog/[slug], and a sitemap entry for published articles. If your articles use remote featured images, allow those image hosts in next.config.js or use an image renderer that matches your setup.
Cache article lists and article pages so visitors get fast pages while Alef remains the source of published content. Redeploy or add on-demand revalidation if your team needs updates to appear immediately.
Use this checklist
Create a Next.js Blog integration from the Alef Integrations screen.
Store the generated key in a server-only environment variable.
Fetch articles from Server Components, route handlers, or server utilities only.
Add blog index, article, and sitemap routes to the public site.
Confirm article images are allowed by your Next.js image configuration.
The takeaway
The integration is safe when the key never reaches client-side JavaScript and every public article page is rendered from server-side reads.
Turn this article into a visibility plan
Use Alef to audit your site, find content gaps, and create briefs your team can ship.
Learn how to optimize content for AI search engines in 10 steps — answer-first writing, schema, entity clarity, and authority signals that earn ChatGPT and Perplexity citations.
AI answer engine optimization gets your brand cited by ChatGPT, Perplexity, Gemini, and Copilot. Learn how answer engines rank sources and which businesses need AEO most.
What should answer engine optimization tools track? AI answer presence, brand mentions, competitor gaps, and unified SEO+AEO analytics. Here's the checklist.
