ظهور خطأ window is not defined في احدى صفحات nextjs

مرحبا لدي صفحة تحتوي على form للاضافة وعند زيارتها يظهر لي الخطأ window is not defined لكنه لا يشير لشيء معين يسبب المشكلة وهذا هو مكون الصفحة 

import React, { useState } from 'react';
import {
  Flex,
  Box,
  FormControl,
  FormLabel,
  Input,
  Textarea,
  Stack,
  Button,
  Heading,
  FormErrorMessage,
  useColorModeValue,
  useToast,
} from '@chakra-ui/react';
import axios from 'axios';
import { useForm } from 'react-hook-form';
import { useRouter } from 'next/router';

import {Editor} from "react-draft-wysiwyg"
import { EditorState, convertToRaw } from 'draft-js';

import draftToHtml from 'draftjs-to-html';
// import htmlToDraft from 'html-to-draftjs';
import 'node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

export default function EditorConvertToHTML() {
  const router = useRouter();
  const toast = useToast();
  const [state, setState] = useState({
    editorState: EditorState.createEmpty(),
  });

  const onEditorStateChange = (editorState) => {
    setState({
      editorState,
    });
  };

  const {
    handleSubmit,
    register,
    formState: { errors, isSubmitting },
  } = useForm();

  async function onSubmit(values, e) {
    e.preventDefault();
    console.log({
      ...values,
      content: draftToHtml(convertToRaw(state.editorState.getCurrentContent())),
    });

    try {
      const res = await axios.post(`${process.env.NEXT_PUBLIC_API}/article/add`, {
        ...values,
        content: draftToHtml(convertToRaw(state.editorState.getCurrentContent())),
      });

      router.push('/');
    } catch (error) {
      console.log(error);
      toast({
        title: 'فشل في عملية الارسال',
        status: 'error',
        duration: 9000,
        // isClosable: true,
      });
    }
  }

  //title
  //description
  //content
  //imageUrl

  return (
    <Box>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Box p="4" w="50%" mb="8" bg="white">
          <FormControl id="email" isInvalid={errors.title}>
            <FormLabel>العنوان</FormLabel>
            <Input
              {...register('title', {
                required: 'هذا مطلوب',
              })}
            />
            <FormErrorMessage>{errors.title && errors.title.message}</FormErrorMessage>
          </FormControl>
          <FormControl id="email" isInvalid={errors.description}>
            <FormLabel>وصف</FormLabel>
            <Textarea
              {...register('description', {
                required: 'هذا مطلوب',
              })}
            />
            <FormErrorMessage>{errors.description && errors.description.message}</FormErrorMessage>
          </FormControl>
          <FormControl id="email" isInvalid={errors.imageUrl}>
            <FormLabel>الصورة</FormLabel>
            <Input
              {...register('imageUrl', {
                required: 'هذا مطلوب',
              })}
            />
            <FormErrorMessage>{errors.imageUrl && errors.imageUrl.message}</FormErrorMessage>
          </FormControl>
        </Box>
        <Box shadow="md" dir="ltr" w="50%" mb="8" bg="white">
          <Editor
            editorState={state.editorState}
            wrapperClassName="demo-wrapper"
            editorClassName="demo-editor"
            onEditorStateChange={onEditorStateChange}
          />
        </Box>
        <Box w="50%" bg="white">
          <Textarea
            disabled
            value={draftToHtml(convertToRaw(state.editorState.getCurrentContent()))}
          />
        </Box>
        <Button
         
          type="submit"
          isLoading={isSubmitting}
          isDisabled={isSubmitting}
          bg={'blue.400'}
          color={'white'}
          _hover={{
            bg: 'blue.500',
          }}
        >
          سجل الدخول
        </Button>
      </form>
    </Box>
  );
}