使用 getInitialProps 时,userAgent 在 _app.tsx 中未定义?

userAgent is undefined inside _app.tsx while using getInitialProps?

提问人:Sumit Paul 提问时间:2/28/2023 最后编辑:Sumit Paul 更新时间:3/2/2023 访问量:293

问:

我正在获取userAgent,如以下代码行所示:-undefined

const userAgent = context.req?.headers['user-agent'] ?? '';

我正在获得isMobile,如下所示undefined

enter image description here

我想在服务器端检测设备是移动设备还是台式机。

目前我正在将 Next.jsTypescript 一起使用。

这是我的完整源代码:-

MyApp.getInitialProps = wrapper.getInitialPageProps(
  (store) =>
    async (context: any): Promise<any> => {
      const userAgent = context.req?.headers['user-agent'] ?? '';
      const { isMobile } = getSelectorsByUserAgent(userAgent);
      store.dispatch(setDevice(isMobile));
      const initialProps = await App.getInitialProps(context);
      return { ...initialProps, userAgent, isMobile };
    }
);

export default wrapper.withRedux(MyApp);

这是上述代码的简单版本,它还将 userAgent 返回为 undefined

MyApp.getInitialProps = async ({ req }: NextPageContext) => {
  const userAgent = req
    ? req.headers['user-agent'] || ''
    : typeof window !== 'undefined'
    ? window.navigator.userAgent
    : '';
  return { userAgent };
};
TypeScript Redux next.js TypeError 服务器端

评论


答:

0赞 Sumit Paul 3/2/2023 #1

这是工作答案:-

MyApp.getInitialProps = async ({ ctx }: AppContext) => {
  const userAgent = ctx.req?.headers['user-agent'] ?? '';
  const isMobile = NextUserAgent.useUserAgent(userAgent).isMobile;
  return { isMobile };
};