接下来 13+ 检查移动设备

Question

Next js ile proje geliştiriyorum。 burada eğer mobile CIhaz ise bir 组件渲染 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;

我想使用“使用客户端”在客户端渲染项目，因为 isMobijeJs 需要窗口对象，但它不起作用。

你能帮我吗？

Answer 1

您可以使用 react-device-detect 包。它也相当易于使用，并且有很好的选项，例如可以解决您的问题的特定视图元素。我已经在 Next 13.2 上对此进行了测试，并且可以确认它有效。

Answer 2

“react-device-detect”在页面刷新时确实出现错误。

使用此处描述的“getServerSideProps”。

如何使用 Next.js 检测 React SSR App 上的设备？