Using ContentBox.js in a Next.js 14 Project
This guide will show you the steps to integrate ContentBox.js into a Next.js peoject, from setting up a fresh Next.js project to installing and setting up ContentBox.js.
Setting Up Your Next.js Project
Let's begin by setting up your Next.js project. Open your terminal and run the command below. Replace 'next-contenbox' a project name of your choice.
npx create-next-app@latest next-contenbox
Complete the setup prompts for your Next.js project; in this example, we choose the default configuration.
After your project is set up, navigate into your project folder and start the development server.
cd next-contenbox
npm run dev
Check out http://localhost:3000 in your web browser to confirm everything is correctly set up.
Open your Next.js project directory in your code editor of choice (for example, Visual Studio Code).
Installing ContentBox.js
Now that your Next.js project is up and running, it’s time to integrate ContentBox.js. Inside your project directory, run the command below to install ContentBox.js using npm:
npm i @innovastudio/contenbox
Then, download the ContentBox.js ZIP package from your user area, unzip it, and copy the subsequent files and folders into your project's public directory:
- public/assets/
- public/box/
- public/contentbox/
- public/contentbox/
- public/uploads/
- public/blank.html
- public/assets.html
- public/preview.html
To ensure smooth compatibility with the latest version of ContentBox installed via NPM, it's advised to use the latest asset files from the ContentBox.js package.
Implementation
Begin by eliminating any unnecessary styles in app/globals.css, keeping only what's essential:
@tailwind base; @tailwind components; @tailwind utilities;
Create a new 'edit' folder and inside it, a file named page.js:
export default function Edit() {
return (
<>
</>
)
}
This setup lets you go to http://localhost:3000/edit in your web browser, opening up a blank page ready for the ContentBox.js implementation.
Update the code in app/edit/page.js as follows to integrate ContentBox.js:
'use client'
import { useEffect } from 'react';
import ContentBox from '@innovastudio/contentbox';
import '@innovastudio/contentbox/public/contentbox/contentbox.css';
import '@innovastudio/contentbuilder/public/contentbuilder/contentbuilder.css';
let builder;
export default function Edit() {
useEffect(() => {
builder = new ContentBox({
// Basic Settings
canvas: true, // Enable the new canvas mode
controlPanel: true, // Enable the new control panel
iframeSrc: 'blank.html', // Enable resizable content area
// Template Sets
templates: [
{
url: 'assets/templates-simple/templates.js',
path: 'assets/templates-simple/',
pathReplace: [],
numbering: true,
showNumberOnHover: true,
},
{
url: 'assets/templates-quick/templates.js',
path: 'assets/templates-quick/',
pathReplace: [],
numbering: true,
showNumberOnHover: true,
},
{
url: 'assets/templates-animated/templates.js',
path: 'assets/templates-animated/',
pathReplace: [],
numbering: true,
showNumberOnHover: true,
},
],
slider: 'glide', // Enable slider
navbar: true, // Enable navbar
});
// Load sample content
let html = `<div class="is-section is-section-100 is-box type-system-ui">
<div class="is-overlay"></div>
<div class="is-container v2 size-18 leading-14 is-content-900">
<div class="row">
<div class="column">
<h1 class="leading-11 size-88">We design. We develop. We get it done — nicely.</h1>
</div>
</div>
</div>
</div>`;
let mainCss = '';
let sectionCss = '';
builder.loadHtml(html); // Load html
builder.loadStyles(mainCss, sectionCss); // Load styles
return () => {
// cleanup
builder.destroy();
builder = null;
};
}, []);
return (
<>
</>
)
}
Navigate to http://localhost:3000/edit. ContentBox.js is now fully incorporated into your Next.js application.
You're all set to explore the capabilities of ContentBox.js within your Next.js application!
Next Steps
This example provides a basic guide to implementing ContentBox in your Next.js project as a starting point, allowing you to quickly get it running. For additional features like loading content from the server (e.g., using fetch) and saving content, you will need to set up API routes (endpoints) in Next.js. These are part of your Next.js application's scope. For more information, please check the Next.js documentation.
You can also download our comprehensive example from the user area. This includes functionalities such as loading and saving content to the server, and enabling advanced options in ContentBox, like the AI Assistant.
ContentBox.js documentation
Should you require further information or assistance, please refer to the ContentBox.js documentation:
https://demo.innovastudio.com/docs/ContentBox.pdf