how to add ckeditor from source to nextjs - next.js

Question

i want to add ckeditor 5 to nextjs from source.
but i am facing many errors.
Global CSS cannot be imported from within node_modules.
can someone help me add custom ckeditor 5 to my nextjs project.
i dont know how to configure next.config.js.
the problem is why i want to add from source ekditor to my project becuase i want to some new custom plugins to upload image from unsplash.
when i click on unsplash icon new pop page should be appear where user can search image and when use click on than image it add that image to ckeditor.
to use custom ckeditor plugins i am using custom ckeditor 5 from source.
// The editor creator to use.
import ClassicEditorBase from "#ckeditor/ckeditor5-editor-classic/src/classiceditor";
import Essentials from "#ckeditor/ckeditor5-essentials/src/essentials";
// import UploadAdapter from '#ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from "#ckeditor/ckeditor5-autoformat/src/autoformat";
import Bold from "#ckeditor/ckeditor5-basic-styles/src/bold";
import Italic from "#ckeditor/ckeditor5-basic-styles/src/italic";
import BlockQuote from "#ckeditor/ckeditor5-block-quote/src/blockquote";
import React, { useEffect, useState } from "react";
import CKEditor from "#ckeditor/ckeditor5-react";
const Editor = ({ data }) => {
const [isLayoutReady, setIsLayoutReady] = useState(false);
useEffect(() => {
setIsLayoutReady(true);
}, []);
return (
<div>
{isLayoutReady ? (
<CKEditor
data={data}
onInit={(editor) => {
console.log("Editor is ready", editor);
}}
onChange={(event, editor) => {
console.log("Change", { event, editor });
}}
onBlur={(event, editor) => {
console.log("Blur.", { event, editor });
}}
onFocus={(event, editor) => {
console.log("Focus.", { event, editor });
}}
config={{
plugins: [
// InsertImage,
Unsplash,
Essentials,
// UploadAdapter,
Autoformat,
Bold,
Italic,
BlockQuote,
// FindAndReplace,
Heading,
Image,
ImageResize,
ImageInsert,
ImageCaption,
ImageStyle,
ImageToolbar,
],
toolbar: [
// "insertImage",
"undo",
"redo",
"removeformat",
"heading",
"bold",
"italic",
"link",
"underline",
"|",
"blockquote",
"bulletedList",
],
placeholder: "Click here to start typing",
}}
editor={ClassicEditor}
/>
) : null}
</div>
);
};
export default Editor;