1

Next js ile proje geliştiriyorum. burada eğer mobile cihaz ise bir component render etmek istiyorum. ama bu isMobileDevice değerini jsx içerisinde kullanırsam aşadıdaki hataları alıyorum.

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;

enter image description here

I want to render the project on client side using "use client" because isMobijeJs needs window object but it doesn't work.

Can you help me?

1 Answer 1

0

you can use react-device-detect package. which is also fairly easy to use and has great options like spesific view elemets which addresses your issue. I've tested this on Next 13.2 and can confirm that it works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.