Использование WOW.js с Next.js | Кодементор • Wonz

Или любую библиотеку, которая использует объект «окно», если уж на то пошло.

Ты знаешь о WOW.js? Это потрясающая библиотека, созданная Мэтт Деллак который служит для анимации вещей при прокрутке (наиболее распространенный случай использования: вы прокручиваете страницу вниз, и какой-то компонент исчезает или перемещается на экран).

Его очень просто использовать: импортируйте библиотеку, добавьте имена классов в разметку, которую хотите анимировать, и инициализируйте WOW в своем коде javascript!.

Проблема в том, что… это не так просто, когда вы выполняете рендеринг на стороне сервера с помощью Next.js. Причина в том, что WOW.js использует объект «окно» вашего браузера для работы, а на первом рендеринге вашей страницы нет объекта «окно»! … потому что это делается на сервере!

Итак, вот как я заработал:

1. Установите «wow.js» через npm

> npm add wow.js

Импортируйте animate.css в компонент Head вашего _document.js или Layout HOC.

import Head from 'next/head'
... 
<Head> 
  <title>My Proyect</title> 
  <link rel="stylesheet" href=" 
</Head>

3. Выполните его и оживите!

По сути, нам нужно, чтобы WOW.js выполнялся только на стороне клиента. Мы можем инициализировать его на HOC ( нет _document.js) или компонент, содержащий анимированную разметку.

const isServer = typeof window === 'undefined'
const WOW = !isServer ? require('wow.js') : null 

export default class MyComponent extends React.Component { 
  componentDidMount() { 
    new WOW().init() 
  } 
  
  render() { 
    return ( 
      <h2 className={"wow fadeInUp"}>I'm animated!</h2> 
    ) 
  }
}

Круто, да?