# Next.js

Next.js — Legend Motion documentation.

Source: https://legend.so/motion/v2/resources/next-js/

Legend Motion v2 documentation. Current documentation version.

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

First, add Legend-Motion and its dependencies to [`transpilePackages`](https://nextjs.org/docs/app/api-reference/config/next-config-js/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.

```js
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.

[View Markdown](https://legend.so/motion/v2/resources/next-js.md)[Report a documentation correction](https://github.com/LegendApp/legend-docs/issues/new?title=Docs%3A+Next.js&body=Page%3A+https%3A%2F%2Flegend.so%2Fmotion%2Fv2%2Fresources%2Fnext-js%0A%0AWhat+is+incorrect+or+missing%3F%0A%0AExpected+behavior+or+supporting+source%3A%0A)