0

I am using the vercel CLI command 'vercel' to deploy my Next Js app to vercel. Currently the deployment fails when I try to return paths from generateStaticParams in a dynamic page with the url /listings/[category]/[...listing]/page.js. It however works when I set the return value to an empty array. Find content of the [...listing]/page.js below:

export const dynamicParams = true; // true | false,

// or Dynamic metadata
export async function generateMetadata({params: { listing: [slug, listingId] },searchParams}, parent) {

  const listing = await getListing(listingId)

 
  return {
    title: listing.attributes.title,
    openGraph: {
      // images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  };
}

export async function generateStaticParams() {
  
    const listingsResp = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/listings?populate=images,amenities.*,amenities.icon,videos.*,property_status.*,currency.*,payment_duration.*,page_views.*,property_owner.*`)

    const listings = await listingsResp.json()

    const paths = listings.data.map(listing=>({
        category: listing.attributes.property_status.data.attributes.slug,
        listing: [listing.attributes.slug, listing.id.toString()]
    }))
   
    return paths
  }

  

export default async function Listing({params: { listing: [slug, listingId] }}){

    const listingData = getListing(listingId)
    const relatedListingData = getRelatedListings(listingId,5)

    const [listing, relatedListings] = await Promise.all([listingData,relatedListingData])

 
    return (
        <div className='container-fluid pb-5'>
          Listing detail
        </div>
          
      )
}

Error message:

- warn Entire page /listingsv2/[category]/[listing] deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /listingsv2/[category]/[listing]
SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:6498:19)
    at successSteps (node:internal/deps/undici/undici:6472:27)
    at node:internal/deps/undici/undici:1145:60
    at node:internal/process/task_queues:140:7
    at AsyncResource.runInAsyncScope (node:async_hooks:204:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:6498:19)
    at successSteps (node:internal/deps/undici/undici:6472:27)
    at node:internal/deps/undici/undici:1145:60
    at node:internal/process/task_queues:140:7
    at AsyncResource.runInAsyncScope (node:async_hooks:204:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:6498:19)
    at successSteps (node:internal/deps/undici/undici:6472:27)
    at node:internal/deps/undici/undici:1145:60
    at node:internal/process/task_queues:140:7
    at AsyncResource.runInAsyncScope (node:async_hooks:204:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:6498:19)
    at successSteps (node:internal/deps/undici/undici:6472:27)
    at node:internal/deps/undici/undici:1145:60
    at node:internal/process/task_queues:140:7
    at AsyncResource.runInAsyncScope (node:async_hooks:204:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

I cant seem to wrap my head around why that is happening. Anyone experiencing or ever experienced this before? How did you solve this. Thanks

Kofi Talent
  • 25
  • 4
  • what kind of error are you getting? – Charles Semaan May 31 '23 at 13:51
  • @CharlesSemaan I just edited my question to include the error message – Kofi Talent May 31 '23 at 14:34
  • Have you made sure that listingsResp is being correctly retrieved? I suggest adding a try catch function to see if there is any error popping up – Charles Semaan May 31 '23 at 14:38
  • I just added try {} catch{} function but same results. No error pops up and listingResponse correctly output all the listings. – Kofi Talent May 31 '23 at 14:49
  • The dynamic route is a CatchAll route in the form: `http://localhost:3000/listings/category/listing-slug/id`, I need both the listing-slug and the id to generate the static params. I however did as you advised but deployment still failed with same error message. I've decided to opt out of the static generation. Thanks for your time. – Kofi Talent May 31 '23 at 15:02

0 Answers0