added nextjs and fixed problems for it

.gitignore

@@ -2,3 +2,5 @@
 /npm-debug.log
 /.idea
 /dist
+/build
+/.next

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -23,6 +23,7 @@
     "marked": "^2.0.0",
     "mobx": "^6.3.10",
     "mobx-react": "^7.2.1",
+    "next": "^12.0.7",
     "node-sass": "^4.14.1",
     "photoswipe": "^4.1.3",
     "raleway-cyrillic": "^4.0.2",
@@ -86,9 +87,9 @@
     "@types/throttle-debounce": "^2.1.0",
     "@types/yup": "^0.29.11",
     "craco-alias": "^2.3.1",
+    "husky": "^7.0.4",
     "lint-staged": "^12.1.6",
-    "prettier": "^1.18.2",
-    "husky": "^7.0.4"
+    "prettier": "^1.18.2"
   },
   "lint-staged": {
     "./**/*.{js,jsx,ts,tsx}": [

src/components/comment/CommentFormFormatButtons/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC, useCallback, useEffect } from "react";
-import { ButtonGroup } from "~/components/input/ButtonGroup";
-import { Button } from "~/components/input/Button";
-import { useFormatWrapper, wrapTextInsideInput } from "~/hooks/dom/useFormatWrapper";
-import styles from "./styles.module.scss";
+import React, { FC, useCallback, useEffect } from 'react';
+import { ButtonGroup } from '~/components/input/ButtonGroup';
+import { Button } from '~/components/input/Button';
+import { useFormatWrapper, wrapTextInsideInput } from '~/hooks/dom/useFormatWrapper';
+import styles from './styles.module.scss';
 
 interface IProps {
   element: HTMLTextAreaElement;
@@ -10,10 +10,12 @@ interface IProps {
 }
 
 const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
-  const wrap = useCallback(
-    (prefix = '', suffix = '') => useFormatWrapper(element, handler, prefix, suffix),
-    [element, handler]
-  );
+  const wrapper = useFormatWrapper(handler);
+
+  const wrap = useCallback((prefix = '', suffix = '') => wrapper(element, prefix, suffix), [
+    element,
+    wrapper,
+  ]);
 
   const wrapBold = useCallback(
     event => {

src/components/containers/Sticky/index.tsx

@@ -1,5 +1,5 @@
-import React, { DetailsHTMLAttributes, FC } from "react";
-import StickyBox from "react-sticky-box/dist/esnext";
+import React, { DetailsHTMLAttributes, FC } from 'react';
+import StickyBox from 'react-sticky-box';
 
 interface IProps extends DetailsHTMLAttributes<HTMLDivElement> {
   offsetTop?: number;

src/containers/node/NodeBottomBlock/index.tsx

@@ -1,20 +1,20 @@
-import React, { FC } from "react";
-import { NodeDeletedBadge } from "~/components/node/NodeDeletedBadge";
-import { Group } from "~/components/containers/Group";
-import { Padder } from "~/components/containers/Padder";
-import { NodeCommentForm } from "~/components/node/NodeCommentForm";
-import { NodeRelatedBlock } from "~/components/node/NodeRelatedBlock";
-import { useNodeBlocks } from "~/hooks/node/useNodeBlocks";
-import { NodeTagsBlock } from "~/components/node/NodeTagsBlock";
-import StickyBox from "react-sticky-box/dist/esnext";
-import styles from "./styles.module.scss";
-import { NodeAuthorBlock } from "~/components/node/NodeAuthorBlock";
-import { useNodeContext } from "~/utils/context/NodeContextProvider";
-import { useCommentContext } from "~/utils/context/CommentContextProvider";
-import { NodeNoComments } from "~/components/node/NodeNoComments";
-import { NodeComments } from "~/containers/node/NodeComments";
-import { useUserContext } from "~/utils/context/UserContextProvider";
-import { useNodeRelatedContext } from "~/utils/context/NodeRelatedContextProvider";
+import React, { FC } from 'react';
+import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
+import { Group } from '~/components/containers/Group';
+import { Padder } from '~/components/containers/Padder';
+import { NodeCommentForm } from '~/components/node/NodeCommentForm';
+import { NodeRelatedBlock } from '~/components/node/NodeRelatedBlock';
+import { useNodeBlocks } from '~/hooks/node/useNodeBlocks';
+import { NodeTagsBlock } from '~/components/node/NodeTagsBlock';
+import StickyBox from 'react-sticky-box';
+import styles from './styles.module.scss';
+import { NodeAuthorBlock } from '~/components/node/NodeAuthorBlock';
+import { useNodeContext } from '~/utils/context/NodeContextProvider';
+import { useCommentContext } from '~/utils/context/CommentContextProvider';
+import { NodeNoComments } from '~/components/node/NodeNoComments';
+import { NodeComments } from '~/containers/node/NodeComments';
+import { useUserContext } from '~/utils/context/UserContextProvider';
+import { useNodeRelatedContext } from '~/utils/context/NodeRelatedContextProvider';
 
 interface IProps {
   commentsOrder: 'ASC' | 'DESC';

src/hooks/dom/useFormatWrapper.ts

@@ -1,18 +1,18 @@
-import { useCallback } from "react";
+import { useCallback } from 'react';
 
 /** wraps text inside textarea with tags */
-export const useFormatWrapper = (
-  target: HTMLTextAreaElement,
-  onChange: (val: string) => void,
-  prefix = '',
-  suffix = ''
-) => {
+export const useFormatWrapper = (onChange: (val: string) => void) => {
   return useCallback(
-    event => {
+    (
+      target: HTMLTextAreaElement,
+
+      prefix = '',
+      suffix = ''
+    ) => event => {
       event.preventDefault();
       wrapTextInsideInput(target, prefix, suffix, onChange);
     },
-    [target, onChange, prefix, suffix]
+    [onChange]
   );
 };
 

src/layouts/BorisLayout/index.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
 import { Container } from '~/containers/main/Container';
-import StickyBox from 'react-sticky-box/dist/esnext';
+import StickyBox from 'react-sticky-box';
 import { BorisComments } from '~/containers/boris/BorisComments';
 import { Card } from '~/components/containers/Card';
 import { SidebarRouter } from '~/containers/main/SidebarRouter';

tsconfig.json

@@ -19,8 +19,9 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
-    "noImplicitAny": false
+    "jsx": "preserve",
+    "noImplicitAny": false,
+    "incremental": true
   },
   "include": [
     "src"