From e1fc6c378e48c1c722ca02693977ca609abfbe1a Mon Sep 17 00:00:00 2001
From: Sergey Makhnatkin <makhnatkin@yandex-team.ru>
Date: Fri, 25 Oct 2024 17:44:27 +0300
Subject: [PATCH] docs: added  how-to-add-editor-with-nextjs.md (#446)

---
 docs/how-to-add-editor-with-nextjs.md | 74 +++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 docs/how-to-add-editor-with-nextjs.md

diff --git a/docs/how-to-add-editor-with-nextjs.md b/docs/how-to-add-editor-with-nextjs.md
new file mode 100644
index 00000000..df6b4c86
--- /dev/null
+++ b/docs/how-to-add-editor-with-nextjs.md
@@ -0,0 +1,74 @@
+## Connection and Configuration
+This document provides instructions for configuring Webpack and Turbopack to avoid issues related to the 'fs' module and for connecting the editor on the nextjs client side. 
+
+### Issue with 'fs' Module Not Found
+In order for the `diplodoc/transform` process to function correctly, please add the [webpack resolve-fallbacks](https://webpack.js.org/configuration/resolve/#resolvefallback).
+
+#### Webpack Configuration
+
+Add the following code to your Webpack configuration:
+
+```javascript
+module.exports = {
+  webpack: {
+    configure: (webpackConfig) => {
+      webpackConfig.resolve.fallback = {
+        fs: false,
+        process: false,
+        path: false,
+      };
+      return webpackConfig;
+    },
+  },
+};
+```
+
+#### Turbopack Configuration
+
+If you are using Turbopack, set up the `resolveAlias` as follows:
+
+```
+experimental: {
+turbo: {
+  resolveAlias: {
+   fs: './stubs/fs.js',
+  },
+ },
+},
+```
+
+Code for stubs/fs.js
+
+```
+let fs;
+
+if (typeof window === 'undefined') {
+ fs = require('node:fs');
+} else {
+ fs = {};
+}
+
+module.exports = fs;
+```
+
+### Server-Side Rendering (SSR)
+
+Since the editor uses [ProseMirror](https://prosemirror.net) and [CodeMirror](https://codemirror.net) libraries that depend on working with the DOM on the client side, errors may occur during the build process. Use the following method to load the editor on the client side:
+
+```
+import dynamic from 'next/dynamic';
+...
+const MarkdownEditor = dynamic(
+    () =>
+        import('./MarkdownEditor').then(
+            (mod) => mod.MarkdownEditor,
+        ),
+    {
+        ssr: false,
+    },
+);
+```
+
+
+These configurations will help you correctly connect and work with the editor, preventing errors related to the absence of server modules on the client side.
+