Next.js

There are a few extra steps to get Legend-Motion working on Next.js.

First, Legend-Motion and its dependencies need to be added to the transpile list.

npm i next-transpile-modules

Then wrap your export in next.config.js with withTM. This is the full config needed to setup Legend-Motion including Linear Gradient and SVG features. You can remove those lines if you don't need them.

const withTM = require('next-transpile-modules')([
    '@legendapp/motion',
    // Only required for MotionLinearGradient:
    'react-native-linear-gradient',
    // Only required for MotionSvg:
    'react-native-svg',
]);

module.exports = withTM({
    webpack(cfg) {
        cfg.resolve.alias = {
            ...(cfg.resolve.alias || {}),
            'react-native$': 'react-native-web',
            // Only required for MotionLinearGradient:
            'react-native-linear-gradient': 'react-native-web-linear-gradient',
        };
        // Only required for MotionSvg:
        cfg.resolve.extensions = [
            '.web.js', '.web.jsx', '.web.ts', '.web.tsx',
            ...cfg.resolve.extensions
        ];

        return cfg;
    },
});

Note: The reason for these changes is that react-native-svg needs .web.js to be added to the resolve extensions, and Linear Gradient requires aliasing react-native-linear-gradient to react-native-web-linear-gradient.