Next.js

The Next.js integration lets RankYak publish articles to an app you built with Next.js. A Next.js app has no CMS for RankYak to log in to, so your coding agent creates the receiving end instead: RankYak provides a setup prompt, the agent adds a blog and a webhook to your codebase, and from then on every new article is delivered to your app, live or as a draft for your review.

Connecting

The connection takes four steps: one in RankYak, two in your codebase and your hosting provider, and one back in RankYak.

1. Go to Settings, then Integrations, click Connect next to Next.js, and click Continue. RankYak creates the connection with a secret and opens the connection settings, which show the setup prompt.
2. Click Copy prompt and paste the prompt into the coding agent you use on your Next.js codebase, for example Cursor, Claude Code, or v0. The prompt makes the agent create an articles table in the database your app uses, a Route Handler at /api/rankyak-webhook that checks the secret and stores each article, and the pages /blog and /blog/[slug]. The prompt carries the secret, and the agent stores it in .env.local for you.
3. Add the same secret to the environment variables of your hosting provider as RANKYAK_WEBHOOK_SECRET, for example under the project settings in Vercel, so the deployed app reads it. Click Copy secret in RankYak to copy the value. Then deploy the app.
4. Back in RankYak, paste the URL of the webhook on your production deployment into Webhook URL and click Save. RankYak sends a test request to the URL, and when your app answers, the connection shows as connected. Publishing starts with the next scheduled article.

You should paste the URL of the production deployment, which ends in .vercel.app on Vercel unless you use a custom domain. A preview deployment and a local development server are not reachable from RankYak. Of course, you may reopen the setup prompt and the secret at any time by clicking Edit settings next to the connection.

If the test request fails, RankYak keeps the URL and tells you why under the field. Typically, an unreachable endpoint means the app is not deployed yet or a preview URL was pasted, and a rejected secret means the variable on your hosting provider does not match the secret in RankYak. Correct it, redeploy if needed, then click Save again.

What your app receives

Each article arrives at your webhook as JSON: the title, the body as HTML and as Markdown, the excerpt, the meta title and description, the URL slug, the header image URL, and the relevant dates. The body holds no title of its own, so your pages render the title as the heading. The article object matches the payload described on the webhooks page, wrapped in an event name and a status. The secret travels in a request header, so only RankYak writes to your blog.

Your app answers with the address of the new article page, and RankYak shows that address as the live link on the article. If your app answers with something else, you may enter a Blog URL in the connection settings, and RankYak builds the link from that URL and the slug. You may also report the address through the article's actions menu or the API.

The Next.js connection is separate from the webhook in the Developer zone. You should not point both at the same endpoint, since your app would then receive every article twice.

Publishing as drafts

If you would like to review each article before it goes live, enable Publish articles as draft in the connection settings. Each article then arrives with the status draft, your app stores it without showing it, and you decide in your app when it goes live, for example by changing its status in the table. A draft has no address yet, so RankYak leaves the live link empty until you report it.

Updating articles

When an article is refreshed or rewritten in RankYak, it is delivered again with the event article.updated. Your app replaces the stored article by its id, so the page keeps its address and no duplicate appears. However, if you change the slug of an article in RankYak, the app stores the new slug and the old address no longer resolves, so you should add a redirect in your app when an address has already been shared.

Search engines

The prompt asks your agent to build the blog pages as server components with their metadata set through generateMetadata, so the title, the description, and the content arrive in the HTML. If your blog pages render statically, the webhook revalidates them after each delivery, so a new article appears without a new deploy. You should check that the article pages are served with their content in the HTML, so search engines read them without running JavaScript.

When something fails

If your app answers with an error or cannot be reached, the article stays unpublished in RankYak. The article page shows the message your endpoint returned, and the owner of the organization receives an email with the same message. Fix the endpoint in your codebase, redeploy the app, then publish the article again from its page.

Disconnecting

To stop publishing to your Next.js app, go to Settings, then Integrations, and click Disconnect next to the connection. Publishing stops immediately; articles already on your app are not affected. Connecting again creates a new secret, so you should update RANKYAK_WEBHOOK_SECRET in .env.local and on your hosting provider before the first article is delivered.