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