Next.js

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

First, add Legend-Motion and its dependencies to transpilePackages in next.config.js (Next.js 13 or newer). This config uses webpack and includes Linear Gradient and SVG features. You can remove those lines if you don't need them. On Next.js 16 or newer, use next dev --webpack and next build --webpack for this config.

module.exports = {
  transpilePackages: [
    "@legendapp/motion",
    // Only required for MotionLinearGradient:
    "react-native-linear-gradient",
    // Only required for MotionSvg:
    "react-native-svg",
  ],
  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.

Animations do not run during server rendering when requestAnimationFrame is unavailable.