getStaticPaths is not a function NextUI/NextJS

Question

When attempting to use any NextUI components I am running into Type Error: getStaticPaths is not a function, this error ONLY appears when trying to use a NextUI component (Such as Buttons or Chips etc.)

This is the second time I have ran into this error, however the first fix I applied when the error first arrived is not working on fixing this error now with a separate component.

I have searched high and low but there is little answers online that directly relate to NextUI for this use case.

The correction that I did prior that worked with a seperate component was changing the start of the file from -

export default function Dashboardhome() {
}

to

const Dashboardhome = () => {

 code here
}

export default Dashboardhome;

however that solution is not mitigating the current same error.

This error again happens ONLY when using a NextUI component.

Dashboardhome.tsx (problem file)

                            <h2 className="font-[500] text-3xl">{dataResponse.map(profile = profile.scname)}</h2>
                            <div className="flex flex-row gap-3">
                                <Chip color="warning">CB Staff</Chip>
                                <Chip color="success">Premium</Chip>
                            </div>
                            <h2 className="font-[500] text-1xl">{dataResponse.map(profile => profile.bio)}</h2>    
                        </div>

I have also attempted moving the chips to be in their own component file and then importing them to the Dashboardhome.tsx

Cbstaff.tsx

const Cbstaff = () => {
  return (
    <div>
        <Chip color='warning'>CB Staff</Chip>
    </div>
  )
}

export default Cbstaff;

Premium.tsx

const Premiumchip = () => {
  return (
    <div>
        <Chip color='success'>Premium</Chip>
    </div>
  )
}

export default Premiumchip;

Dashboardhome.tsx (Problem File)

                        <div className="flex flex-col gap-3">
                            <h2 className="font-[500] text-3xl">{dataResponse.map(profile => profile.scname)}</h2>
                            <div className="flex flex-row gap-3">
                                <Cbstaff />
                                <Premiumchip />
                            </div>
                            <h2 className="font-[500] text-1xl">{dataResponse.map(profile => profile.bio)}</h2>    
                        </div>

Which also has not fixed the error.

The goal is to have both the chips display, I find it weird that when I was having this issue with buttons in a seperate file as mentioned the first solution worked but the same solution is failing to work in a different folder.

Answer 1

getStaticPathsonly exists in the old page router system, but it seems to me that you are using the app router system, thats the reason why it didnt work

take a look at the official documentation about the app and page router system: https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths