Articles on: Advanced Customization

Integrating DropInBlog into a Next.js application

DropInBlog Next.js Integration provides a simple component for embedding DropInBlog functionality into Next.js applications. The integration allows developers to quickly add a fully-featured blog system to their projects without building a custom CMS.


GitHub Repository: https://github.com/DropInBlog/next


Installation

npm install @dropinblog/nextjs
# or
yarn add @dropinblog/nextjs
# or
pnpm add @dropinblog/nextjs


Usage

  1. Import the component in your blog page:


import DibBlock from '@dropinblog/nextjs';


  1. Add the component to your blog page:


export default function BlogPage() {
  return (
	<div>
	  <DibBlock
		blogUrl="/blog"
		blogId="your-dropinblog-id"
	  />
	</div>
  );
}


API Reference

DibBlock Props


Prop

Type

Required

Description

blogUrl

string

✅

The base URL path where your blog is mounted (e.g., /blog)

blogId

string

✅

Your DropInBlog ID from your DropInBlog dashboard


Updated on: 26/06/2025