Integrating into NextJS
Chai Studio allows you to export your UI as HTML, React. You can use this HTML to integrate it into your NextJS project. However, it is possible to render your pages inside your NextJS project with some additional configuration. Let's take a look at how to do it.
Step 1: Configure Tailwind CSS config
Follow the guide to update your tailwind config to use Chai Studio.
Step 2: Configure the .chai files in tailwind config
Chai Studio saves your blocks in a .chai file. Next step is to add the *.chai files inside your tailwind config. Also, you need to add a custom extractor function to extract classes from the chai files.
// tailwind.config.ts
module.exports = {
//... your config
safelist: ["absolute", "inset-0", "w-full", "h-full"],
content: {
// Change content config from array to files and extractor function
files: [
//... your {jsx,tsx,mdx, html} files
"./app/**/*.chai",
],
extract: {
chai: (content) => {
return (
content.replace(/#styles:/g, "").match(/[A-Za-z0-9-_:/\[\]]+/g) || []
);
},
}
}
}Step 3: Defining the loader for *.chai files
*.chai files are not supported by default by NextJS. You need to define a loader for them so that NextJS can process them and make them available to your pages via import.
// next.config.js
module.exports = {
webpack: (config) => {
config.module.rules.push({
test: /\.chai$/,
use: 'raw-loader',
});
return config;
},
}Step 4: Importing the blocks in your pages
You can now import the blocks in your pages and use the <RenderChaiBlocks /> component to render the blocks.
import { RenderChaiBlocks, convertToBlocks } from "@chaibuilder/sdk/render";
import headerChai from "@/views/header.chai";
import homeChai from "@/views/home.chai";
import footerChai from "@/views/footer.chai";
export default async function Page () {
return <>
<RenderChaiBlocks blocks={convertToBlocks(headerChai)} />
<RenderChaiBlocks blocks={convertToBlocks(homeChai)} />
<RenderChaiBlocks blocks={convertToBlocks(footerChai)} />
</>
}