如何使用 NextJS 檢測移動設備

Question

有很多主題和SO問題。 但我沒有找到檢測移動設備的最佳解決方案。

我有兩個組成部分。 第一個組件僅適用於桌面，第二個組件僅適用於手機。

{isMobile? 
(<SecondComponent />) 
: 
(<FirstComponent />)
}

大多數解決方案使用getInitialProps function。但是 Nextjs 說：

Recommended: getStaticProps or getServerSideProps 。

關聯

Answer 1

你使用這樣的東西：

export const isMobileDevice = () => /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

Answer 2

簡單的方法是讓瀏覽器用 matchMedia告訴你：

let isMobile = window.matchMedia("(max-width: 600px)").matches;

Answer 3

我沒試過這個，但這篇文章建議使用req.device 。 所以你可能會做這樣的事情

export async function getServerSideProps(context) {
 
  return {
    props: {
      device: context.req.device,
    },
  }
}

編輯：您需要安裝express-device 。