Framer Motion: Respect user motion prefs

_app.js

import { motion, AnimatePresence } from "framer-motion";
import { fadeDown } from "../utils/animations";
import { MotionConfig } from "framer-motion";

import Layout from "../components/Layout";
import "../styles/globals.css";

function MyApp({ Component, pageProps, router }) {
  return (
    <MotionConfig reducedMotion="user">
      <Layout currentPath={router.route}>
        <AnimatePresence exitBeforeEnter>
          <motion.div
            key={router.route}
            initial="initial"
            animate="animate"
            exit={{ opacity: 0.25 }}
            variants={fadeDown}
          >
            <Component {...pageProps} />
          </motion.div>
        </AnimatePresence>
      </Layout>
    </MotionConfig>
  );
}

export default MyApp;