Moti + Next.js

There are 2 quick steps to getting Moti setup in a Next.js app.

Step 1

Add moti to transpile modules.

yarn add next-transpile-modules

Your next.config.js file should look something like this:

const { withExpo } = require('@expo/next-adapter')
const withFonts = require('next-fonts')
const withImages = require('next-images')
const withPlugins = require('next-compose-plugins')

const withTM = require('next-transpile-modules')(['moti']) 
module.exports = withPlugins(
  [withTM, withFonts, withImages, [withExpo, { projectRoot: __dirname }]],
  {
    // ...
  }
)

Step 2

Add the raf polyfill.

yarn add raf

Then add this in pages/_app.js

import 'raf/polyfill' // add this at the top

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

We're going to use requestAnimationFrame with Reanimated web, so that polyfill makes it usable with server-side rendering frameworks.