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',
  '@motify/core',
  '@motify/components',
  // '@motify/interactions' // uncomment if you use these
  // you can add other modules that need traspiling here
])

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.