Articles on: Getting Started

Add a DropInBlog Blog to a Next.js App

DropInBlog’s two Next.js packages and their installer add a complete, server-rendered blog to your app. The setup takes a few minutes, gives each post, author, and category a route in your app, and generates a sitemap and RSS feed in there too.


Before you start: you’ll need a Next.js 15 or 16 project, using either the App Router or the Pages Router, and npm. Older versions of Next.js aren’t supported.

How to Install DropInBlog on Next.js

The setup has four parts: installing the packages, adding your credentials, installing the blog routes, and verifying the connection.

Install the Packages

  1. Open a terminal in your Next.js project folder.
  2. Run this command: npm install @dropinblog/react-nextjs @dropinblog/react-core

Add Your API Key and Blog ID

  1. In your DropInBlog account, go to API Keys.
  2. Click Add API Key to generate one for your blog, and copy it.
  3. Under the API Keys section, look for Blog IDs and copy your blog ID.
  4. In your project’s root folder, create a file named .env.local.
  5. Add these two lines, replacing the placeholder values with the blog ID and API key you copied:
DROPINBLOG_BLOG_ID=your_blog_id_here
DROPINBLOG_API_KEY=your_api_key_here


Install the Blog Routes

  1. Run the installer for your router:
  • App Router: npx dropinblog-nextjs install --router app
  • Pages Router: npx dropinblog-nextjs install --router pages

The installer adds these routes to your app:

  • /blog: the main list of posts
  • /blog/page/\[page]: paginated list of posts
  • /blog/\[slug]: a single post
  • /blog/category/\[slug]: posts in one category
  • /blog/category/\[slug]/page/\[page]: paginated category pages
  • /blog/author/\[slug]: posts by one author
  • /blog/author/\[slug]/page/\[page]: paginated author pages
  • /blog/sitemap.xml: the blog sitemap
  • /blog/feed: the RSS feed for all posts
  • /blog/feed/category/\[slug] and /blog/feed/author/\[slug]: RSS feeds for one category or author

Verify the Connection

  1. Run npm run dev in your terminal to start your Next.js project locally.
  2. Open http://localhost:3000/blog to check that the blog loads.
  3. Deploy your app the way you normally do, and copy your blog’s URL from the live site (for example, your-domain-name/blog).
  4. On the Code & Layout page in DropInBlog, click Verify Integration. If you’re asked for a URL, paste your blog’s URL. You’ll see a message that your blog is live.

Where Your Next.js Blog Lives

Your posts are stored in DropInBlog, and your Next.js app serves the blog pages. The packages fetch each blog post from DropInBlog as ready-made HTML and render it on the server, so once you deploy, the blog is part of your own site at /blog. Before that, you’ll only see it locally at http://localhost:3000/blog. Its main URLs look like this:

  • your-domain-name/blog
  • your-domain-name/blog/blog-post-title

Verifying the Integration

Publish a test post to confirm your content displays properly:

  1. Open the Posts page.
  2. Click Add Blog Post.
  3. Add your content, including at least one image and one link.
  4. Select the Published option under Status and click Save Post.
  5. Click View Post.
  6. Check that the post appears at your-domain-name/blog/blog-post-title, with its text, image, and link in place.

Styling

A DropInBlog-powered blog picks up the design of your Next.js site, so it should fit in without extra styling. You can change the inherited design and add custom CSS from the Code & Layout page of your DropInBlog account:

  • To change the inherited styles, go to Design → Design Customizations.
  • To apply your own CSS, use Custom CSS in the Advanced Options section below Design.

Troubleshooting

If your blog isn’t showing up, check these first:

  • Make sure you installed both required packages. You need both @dropinblog/react-nextjs and @dropinblog/react-core. If you skipped one, run the command again: npm install @dropinblog/react-nextjs @dropinblog/react-core.
  • Check that your blog ID and API key are correct. Compare the values in the .env.local file against the values on the API Keys page of your DropInBlog account.
  • Check that .env.local is in your project’s root folder. If your project uses a src folder, keep .env.local in the root, not inside src. Next.js only loads it from the root.
  • Check that you ran the installation commands from your Next.js project root folder. Open a terminal where package.json lives and run them again.
  • Check that you restarted the dev server after editing .env.local. Stop the server and run npm run dev again.
  • Make sure you used the correct router flag. Check whether the project uses app/ or pages/ and rerun the installer with the matching --router value.
  • If the blog works locally but not on your live site, check your host’s environment variables. .env.local usually isn’t committed to your repository, so your deployed app doesn’t see it. Add DROPINBLOG_BLOG_ID and DROPINBLOG_API_KEY in your hosting provider’s environment variable settings, then redeploy.

If none of this helps, contact DropInBlog support and include a link to your blog page.

Limitations

The blog runs inside your app, with a couple of things to keep in mind:

  • Your app’s main sitemap doesn’t list your blog posts. The installer creates a separate sitemap for the blog. Solved: submit your-domain-name/blog/sitemap.xml to Google Search Console alongside your main sitemap.
  • DropInBlog can’t be used to create an entire Next.js application. DropInBlog provides the blogging layer, while the rest of the application is still built and maintained in Next.js.

Updated on: 07/10/2026