是否可以在 Next.js 中拥有仅限移动设备的页面？

Question

我正在为我的 Next.js 应用构建页面，并且有一个页面只是移动设计的一部分。我想知道如何只向在移动设备上导航到它的人提供这个页面——然后在桌面上，如果他们请求这个页面默认为主页或错误？

/pages
   index.js
   mobile-only.js

Answer 1

您可以尝试解析 useragent 中的 getServerSideProps 标头并相应地重定向。

在那里你可以找到你可以使用的正则表达式：Detecting a mobile browser

getServerSideProps 函数示例：

export const getServerSideProps = async ({ req }) => {
  // You need to make this function `parseUA` by yourself 
  const isMobile = parseUA(req.headers['user-agent'])

  if (!isMobile) {
    return {
      redirect: {
        destination: '/some/other/page',
        permanent: false
      }
    }
  }

  // Your regular logic for mobile page here 

  return {
    props: {
      data: {
        // ...
      }
    },
  };
};