0

Нужно адаптировать приложение NextJs под мобильные устройства. Как же всё так правильно?

Определять тип устройства в getServerSideProps?

Или делать это через хук useMediaQuery?

8
  • все зависит от того, что ты считаешь мобильным устройством и что конкретно хочешь адаптировать?
    – Grundy
    30 апр в 16:20
  • Ну я имею ввиду если с телефона заходишь то хедер такой отображается, если с компа, то другой 30 апр в 16:34
  • И так другие элементы, менять их порядок ширину и тд 30 апр в 16:35
  • куча способов, все зависит от того что на что должно меняться. Можно вообще без getServerSideProps и useMediaQuery - одними media запросами в css
    – Grundy
    30 апр в 16:44
  • Может я не до конца понимаю 30 апр в 16:45

1 ответ 1

-1

В документации nextjs написано -

getServerSideProps only runs on server-side and never runs on the browser.

Перевод:

getServerSideProps вызывается только на сервере, он не вызывается в браузере.

Возникает такой логичный вопрос. Как вы собираетесь определить тип устройства пользователя на сервере?


Как мне известно вы не сможете это сделать с помощью getServerSideProps, getStaticProps или на другой функции который предоставляет некст из коробки.

У вас остается два решения:

Либо через сторонние npm пакеты, либо через css или его препроцессоры. Я бы сделал через второй вариант потому что не хочу устанавливать лишние зависимости.

5
  • Как вы собираетесь определить тип устройства пользователя на сервере? - точно так же как и на клиенте - по user agent
    – Grundy
    12 мая в 11:24
  • @Grundy ну попробуйте, покажите реализацию.
    – Randall
    12 мая в 12:26
  • реализацию чего? Получения заголовка из запроса или разбора строки user agent?
    – Grundy
    12 мая в 12:58
  • @Grundy реализацию чего? -> что мы сейчас обсуждаем? Мне интересно как вы читаете переписку.
    – Randall
    12 мая в 13:57
  • Задача делится на два шага, получение user-agent, получение типа устройства на основе user-agent. Какой именно шаг тебе непонятен - неизвестно, поэтому и был задан уточняющий вопрос.
    – Grundy
    12 мая в 16:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.