Getting TypeError "getStaticPaths is not a function" when using framer-motion in Next.js

Question

I'm having an issue with framer-motion. I'm trying to play around with it but I'm met with this error:

Error [TypeError]: getStaticPaths is not a function
    at buildStaticPaths (/Users/x/coding/projects/personal/website/node_modules/next/dist/build/utils.js:699:39)
    at Object.loadStaticPaths (/Users/x/coding/projects/personal/website/node_modules/next/dist/server/dev/static-paths-worker.js:103:46)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  digest: undefined

Here's what I'm trying to do:

import { gif } from "@/public/assets";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import { motion } from "framer-motion";

const Navbar = () => {
  return (
  <div className="w-full shadow-navbarShadow h-20 lg:h-[12vh] sticky top-0 z-50 bg-bodyBgColor px-4">
    <div className="max-w-container h-full mx-auto py-1 font-bodyFont flex items-center justify-between">
      <motion.div initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 0.5}}>
        <Image className="w-40" src={gif} alt="logo" />
      </motion.div>
    </div>
  </div>
  )
}

export default Nav;

I've installed the latest version of framer-motion (10.12.20) and also downgraded to 7.3.2 but to no avail.

Any help with this issue is appreciated. Thanks!

Answer 1

Next js 13 if you use app directory than getStaticProps is not work because you can use cache method and pass force-cache | no-store parameters in fetch API so your page act like static pages