Блог

ОБНОВЛЕНИЕ: Я перефразирую свой вопрос, поскольку он недостаточно ясен. Чего я хочу достичь здесь, так это передать isAmp из getInitialProps компоненту, чтобы определить, будет ли это усилитель или обычный.

Почему я хочу это сделать? Потому что я хочу выполнить некоторые клиентские операции, если страница загружает удаленный элемент; поскольку amp все выполняется на сервере, я не могу использовать перехватчики реакции или перенаправить страницу через 10 секунд. Надеюсь, это объясняет лучше.

У меня есть страница amp, которую я хочу превратить в обычную страницу, когда статус элемента (href =»page / ItemId») удаляется, чтобы я мог использовать клиентскую сторону для перенаправления пользователя через 10 секунд.

Чтобы создать усилитель страницы, мы просто добавляем этот экспорт в начало файла

 export const config = { amp: true };
  

Режим, который меня интересует, — это «гибридный» режим.
Есть ли способ передать значение isAmp через сервер, а затем клиенту, как это делает следующий хук

 const isAmp = useAmp();
  

Я хочу, чтобы значение передавалось прямо в первую строку кода выше:

 export const config = { amp: isAmp };
  

Я прохожу через этот процесс, чтобы заставить работать код на стороне клиента, например перенаправлять страницу на другой URL. Который работает только на страницах, отличных от amp.

Из документа вам не разрешено выполнять динамическую / условную настройку страницы.

это недопустимо:

 const test= somecondition ? true : 'hybrid'

export const config = {
    amp: test
}
  

смотрите здесь:
https://nextjs.org/docs/messages/invalid-page-config

Как сказано в документации, используйте hybrid режим.

 import {useAmp} from 'next/amp'

export const config = {amp: 'hybrid'} // Hybrid mode

function About(props) {
  const isAmp = useAmp()

  return (
    <div>
      <h3>My AMP About Page!</h3>
      {isAmp ? (
        <amp-img
          width="300"
          height="300"
          src="/my-img.jpg"
          alt="a cool image"
          layout="responsive"
        />
      ) : (
        <img width="300" height="300" src="/my-img.jpg" alt="a cool image" />
      )}
    </div>
  )
}

export default About