NextJS: "TypeError: Cannot read property 'toLowerCase' of undefined"

Question

While usign the getStaticPaths() and getStaticProps() I am getting the error NextJS: "TypeError: Cannot read property 'toLowerCase' of undefined"

Answer 1

The problem was in getStaticPaths() I was directly returning an array of strings as paths:

Wrong Code

export const getStaticPaths = async () => {    
 ...

    return {
      paths: ['product1','product2','product3'], //WRONG
      fallback: 'blocking'
    }
}

The solution was to return the paths array in a diffent structure:

Correct Code

export const getStaticPaths = async () => {    
 ...

    return {
      paths: [
          {'params': {myPageSlug: 'product1'}},
          {'params': {myPageSlug: 'product2'}},
          {'params': {myPageSlug: 'product3'}},
      ], //OK
      fallback: 'blocking'
    }
}

myPageSlug is the slug used when naming the page file, example: pages/[myPageSlug].tsx

Answer 2

Somewhere in your file you might be using .toLowerCase() method and the conversion is not happening because the value is either undefined or not a string.

You can use something like Optional chaining (?.) operator to avoid this error.

You can learn more about optional chaining operator here