React Confetti in Nextjs

react-confetti-nextjs.md

import { Box, Center, Text } from "@chakra-ui/react";
import { useEffect, useState } from "react";
import ApplicationForm from "../components/application/ApplicationForm";
import Confetti from "react-confetti";

export default function Application() {
  const [dimensions, setDimensions] = useState({
    width: 0,
    height: 0,
  });
  const [isClient, setClient] = useState(false);
  useEffect(() => {
    const { innerWidth: width, innerHeight: height } = window;
    setDimensions({
      width,
      height,
    });
    setClient(true);
  }, []);

  return (
    <>
      <Center>
        {isClient && (
          <Confetti width={dimensions.width} height={dimensions.height} />
        )}
        <Box
          h="87vh"
          w="100vh"
          display="flex"
          alignItems={"center"}
          justifyContent={"center"}
        >
          <Text>Hello World</Text>
        </Box>
      </Center>
    </>
  );
}