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.