"How do you use motion in SSR environment with Next.js 14?

[jungsikjeong]

It matches the title. How should I use it? I had to declare 'use client' at the top to use it.. Is there any other way?"

[leoreisdias]

@jungsikjeong, you can achieve it by importing the motion API from import * as motion from "motion/react-client";

This is mentioned on the motion doc's page - https://motion.dev/docs/react-motion-component

It's kind of hidden, but it worked for me inside a React Server Component.

[jungsikjeong]

@jungsikjeong, you can achieve it by importing the motion API from import * as motion from "motion/react-client";

This is mentioned on the motion doc's page - https://motion.dev/docs/react-motion-component

It's kind of hidden, but it worked for me inside a React Server Component.

@leoreisdias : Oh my god.. Are you a god? Thank you so much. You're so kind! Thank you! 😭

[mattgperry]

@leoreisdias Thanks for solving this! Do you think there's some way we could make this more obvious? Maybe it'd be clearer with a specific integration guide like we have for Vue and Framer on https://motion.dev/docs

[jungsikjeong]

@jungsikjeong, you can achieve it by importing the motion API from import * as motion from "motion/react-client";

This is mentioned on the motion doc's page - https://motion.dev/docs/react-motion-component

It's kind of hidden, but it worked for me inside a React Server Component.

@leoreisdias Isn't it a React server component? How should I use it in Next.js's SSR environment? 😢

[leoreisdias]

@leoreisdias Thanks for solving this! Do you think there's some way we could make this more obvious? Maybe it'd be clearer with a specific integration guide like we have for Vue and Framer on https://motion.dev/docs.

@mattgperry A specific integration would be nice, even more considering that it would be possible to add not just these particular details about importing, but also for things like "Do and Don't", for example, the fact that custom motion components originated from motion.create() would need the 'use client' directive to be called. These might be good tips.

For a faster approach, I would suggest just adding this importing detail into the Getting Start, close to the "React 19 / Next 15" section at https://motion.dev/docs/react-quick-start#react-19-next-15. (It was the first spot I've looked for). I think it makes for being related.

[leoreisdias]

@jungsikjeong, you can achieve it by importing the motion API from import * as motion from "motion/react-client"; This is mentioned on the motion doc's page - https://motion.dev/docs/react-motion-component It's kind of hidden, but it worked for me inside a React Server Component.

@leoreisdias Isn't it a React server component? How should I use it in Next.js's SSR environment? 😢

@jungsikjeong It is for the React Server Components approach.

Are you using Page or App Router? This importing pattern will work on the App Router (React Server Components). Idk if it might work the same in Page Router.

[jungsikjeong]

@jungsikjeong, you can achieve it by importing the motion API from import * as motion from "motion/react-client"; This is mentioned on the motion doc's page - https://motion.dev/docs/react-motion-component It's kind of hidden, but it worked for me inside a React Server Component.

@leoreisdias Isn't it a React server component? How should I use it in Next.js's SSR environment? 😢

@jungsikjeong It is for the React Server Components approach.

Are you using Page or App Router? This importing pattern will work on the App Router (React Server Components). Idk if it might work the same in Page Router.

@leoreisdias
Unfortunately, it doesn't seem to work in Next.js App Router's SSR environment. Through research, I found that the best solution appears to be implementing it using a children pattern with a partial 'use client' client component declaration.

Are there any other recommended approaches besides the above method?