nextjs get server side props example

product.js

const Product = (props) => {
    return <div>
     { props.data.map(p => <div key={p.id}>{p.name}</div>) }
    </div>
}

export const getServerSideProps = async (context) => {
    const {name} = context.query
    //you can fetch data from your api like this
    // const res = await 
    // fetch(`api.yourcms.com/product?keyword=${name}`);
    return {
      props: {data: [{name: 'Banana', id: 1},
                     {name: 'Potato', id: 2}]
      }
    }
}