Next.js guide

How to add a blog to your Next.js site

You do not need to build a blog in your Next.js app: no MDX setup, no CMS to wire up, no pages to design. Create a free blog on Outrank and serve it at yourbrand.com/blog with two rewrite rules in your Next.js config.

Create my free blog

Free with Outrank Blogs. No credit card needed. See what is included

Subfolder

Your blog at yourbrand.com/blog

Next.js rewrites forward every request under /blog to your Outrank blog. Visitors and Google only ever see yourbrand.com/blog.

Step by step

Set up your blog on Next.js

  1. 1Create your free blog: enter your website and pick a template. It is live in about a minute.Start here
  2. 2In Outrank, open Blog → Settings → Domain and choose “Subfolder”. Enter your website address, such as yourbrand.com, keep the path /blog and click Continue. Outrank shows the code for your setup with your blog’s address already filled in.
  3. 3Add the two rewrite rules below to your Next.js config (next.config.ts or next.config.mjs). If it already has a rewrites() function, add these rules to it.
  4. 4Using an older next.config.js with module.exports? Keep module.exports and only add the rewrites() function.
  5. 5Deploy your website, then click Check now in Outrank.
  6. 6Add a “Blog” link to your site’s header or footer that points to /blog.
next.config.ts
const nextConfig = {
  async rewrites() {
    return {
      beforeFiles: [
        { source: '/blog', destination: 'https://o--your-blog-id.outrankblog.com/' },
        { source: '/blog/:path*', destination: 'https://o--your-blog-id.outrankblog.com/:path*' },
      ],
    };
  },
};

export default nextConfig;

Example only. In your dashboard, Outrank shows this code with your blog’s own address filled in.

Tips for Next.js

  • The rules use beforeFiles, so they take priority over your app’s own pages. If you already have a /blog route, move or delete it.
  • Hosting on Vercel? These rules are all you need; no vercel.json is required.

Next.js blog integration docs

Already built your own blog in Next.js? Outrank can publish SEO articles straight into it instead.

Learn more

FAQ

Adding a blog to Next.js: questions

Short answers to what people ask most.

Why put the blog in a subfolder instead of a subdomain?
Search engines treat yourbrand.com/blog as part of your main website, so every post builds the authority of the domain your product pages are on. A subdomain like blog.yourbrand.com works too and is quicker to set up, but it is treated more like a separate site.
Will the blog slow down my Next.js app?
No. The blog is served by Outrank from a global edge network. Your app only forwards requests under /blog, and nothing is added to your bundle.
Does connecting my own domain cost anything?
No. Connecting a subdomain, a subfolder or a separate domain is free on every Outrank Blogs plan, and HTTPS is included.

Start today

Your blog can be live before your coffee gets cold.