I am developing a project with Next js. Here, I want to render a component if it is a mobile device. However, if I use the isMobileDevice value in jsx, I get the errors below.
import useTranslation from "next-translate/useTranslation";
import isMobile from "ismobilejs";
import DefaultLayout from "../../components/core/Layouts/Default";
import { MouseIcon, ScrollDownWrapper, ScrollText, SearchBoxWrapper, SliderWrapper, Wrapper } from "./style";
import MainSlider from "../../components/common/MainSlider";
import SearchBox from "../../components/common/SearchBox";
const HomeScreen = () => {
const { t } = useTranslation("home");
const isMobileDevice = isMobile()?.any;
return (
<DefaultLayout>
<Wrapper>
<SearchBoxWrapper>
<SearchBox />
{isMobileDevice && (
<ScrollDownWrapper>
<MouseIcon />
<ScrollText>{t("scrollDown")}</ScrollText>
</ScrollDownWrapper>
)}
</SearchBoxWrapper>
<SliderWrapper>
<MainSlider />
</SliderWrapper>
</Wrapper>
</DefaultLayout>
);
};
export default HomeScreen;https://i.stack.imgur.com/gLiOa.png
I am trying to render the project on the client side using "use client" because isMobijeJs requires the window object but it is not working properly.
Can you provide some assistance?