Overview

I am trying to pass on object of data that contains strings and objects to my component

The Problem

When I check the Next.js documentation to pass props, I try to send it in the key value pair format. When I try to use any of my props in my component, they are undefined. Am I de-structuring wrong?

My attempts

This is what I am currently working with. I fetch some data, get the first object in an array of objects and de-structure only the keys I want. Then I set the keys to a park object.

export async function getStaticProps({params}) {
  const URL = 'https://developer.nps.gov/api/v1/'

  // Call API Data for /PARK
  const res = await fetch(
    `${URL}parks?parkCode=${params?.parkCode}&limit=465&api_key=${process.env.API_KEY}`,
    {
      method: 'GET',
      headers: {
        Accept: 'application/json, text/plain, */*',
        'User-Agent': '*',
      },
    }
  )

  const parkData = await res.json()

  if (!parkData) {
    return {notFound: true}
  }

  const park = parkData?.data[0]

//  The park object looks like this:
{
  name: 'A name',
  fullName: 'John Doe',
  parkCode: 'abcd',
  description: 'lorem ipsum',
  designation: 'park',
  imags: [
    {
      url: 'http://...',
      title: 'img1',
    },
    {
      url: 'http://...',
      title: 'img1',
    },
  ],
}


  const {name, description, parkCode, designation, images, fullName} = park

  return {
    props: {
      park: {name, fullName, description, parkCode, designation, images},
    },
    revalidate: 1,
  }
}

In my component, this is how I try to consume it, but I get undefined errors.

export default function Park({park}) {
  console.log(park) // undefined
}