Using ContentBuilder.js in a Next.js 14 Project
In this tutorial, we'll demonstrate how to integrate ContentBuilder.js into a Next.js application, starting from the initial setup of a Next.js project to the installation and implementation of ContentBuilder.js.
Setting Up Your Next.js Project
Let's begin by setting up your Next.js environment. Open your terminal and run the command below. Replace 'next-contentbuilder' with your desired project name.
npx create-next-app@latest next-contentbuilder
Follow the prompts to configure your Next.js project; in this example, we choose the default configuration.
Once your project is created, navigate to your new project directory and start the development server.
cd next-contentbuilder
npm run dev
Visit http://localhost:3000 in your browser to ensure everything is set up correctly.
Open your Next.js project folder in your preferred code editor (e.g., Visual Studio Code).
Installing ContentBuilder.js
With your Next.js project ready, it's time to integrate ContentBuilder.js. Within your project directory, run the following command to install ContentBuilder.js via npm:
npm i @innovastudio/contentbuilder
Next, download the ContentBuilder.js ZIP package from your user area, extract it, and copy the following files and folders into your project's public directory. This step ensures that all required assets are readily accessible in your Next.js project:
- public/assets/
- public/contentbuilder/
- public/uploads/
- public/assets.html
For optimal compatibility, always use the latest assets from the ContentBuilder.js package.
Implementation
Initially, clean up any unnecessary styles in app/globals.css and retain only the essentials:
@tailwind base; @tailwind components; @tailwind utilities;
Create a new folder named 'edit', and within it, a file named page.js. Initially, let this file be a placeholder:
export default function Edit() {
return (
<>
</>
)
}
This setup allows you to navigate to http://localhost:3000/edit in your browser, presenting an empty page ready for ContentBuilder.js implementation.
Replace the code in app/edit/page.js with the following to integrate ContentBuilder.js:
'use client'
import { useEffect } from 'react';
import ContentBuilder from '@innovastudio/contentbuilder';
import '@innovastudio/contentbuilder/public/contentbuilder/contentbuilder.css';
let builder;
function App() {
useEffect(() => {
builder = new ContentBuilder({
container: '.container',
snippetModal: true,
snippetModalLeft: true,
});
// Load snippet file
builder.loadSnippets('assets/minimalist-blocks/content.js');
// Load sample content
builder.loadHtml(`
<div class="row">
<div class="column full">
<h1 class="leading-none font-medium size-64">Hi There..</h1>
</div>
</div>
`);
return () => {
// cleanup
builder.destroy();
builder = null;
};
}, []);
return (
<>
<div className="container" style={{
maxWidth: '800px',
margin: '250px auto',
width: '100%',
padding: '0 20px' }}>
</div>
</>
)
}
export default App
To display your content built with ContentBuilder, you will need to include the necessary CSS. Add the CSS to your app/layout.js file:
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<link rel="stylesheet" href="/assets/minimalist-blocks/content.css" />
</head>
<body className={inter.className}>{children}</body>
</html>
);
}
With this step, we apply content.css to the content.
Open http://localhost:3000/edit. ContentBuilder.js is now fully integrated into your Next.js project.
Now, you're ready to use ContentBuilder.js in your Next.js project!
Additional Functionality
For more functionalities such as saving content, uploading image files, or enabling AI-Assistant, server-side handling is required. You can explore the example implementation provided in the user's download area. Additionally, refer to the ContentBuilder.js documentation for further guidance.