> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://docs.dropinblog.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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
3. In your DropInBlog account, go to **API Keys**.
4. Click **Add API Key** to generate one for your blog, and copy it.
5. Under the **API Keys** section, look for **Blog IDs** and copy your blog ID.
6. In your project’s root folder, create a file named `.env.local`.
7. 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
8. 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
9. Run npm run dev in your terminal to start your Next.js project locally.
10. Open `http://localhost:3000/blog` to check that the blog loads.
11. Deploy your app the way you normally do, and copy your blog’s URL from the live site (for example, `your-domain-name/blog`).
12. 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.