Troubleshooting creating a button to link to the most recent blog using Next.js and Sanity.io API.

export const getServerSideProps = async pageContext => {
    const query = encodeURIComponent('*[_type == "post"][0]');
    const url = `<https://cd0q2c94.api.sanity.io/v1/data/query/production?query=${query}>`;
    const result = await fetch(url).then(res => res.json());

    if (!result.result || !result.result.length) {
        return {
            props: {
                post: [],
            }
        }
    } else {
        return {
            props: {
                post: result.slug,
            }
        }
    }
}

/lib/sanity.js

import {createClient} from 'next-sanity'

const config = {
  dataset: <your-dataset-name>,
  projectId:<your-project-id>,
  apiVersion: '2021-10-21',
  useCdn: process.env.NODE_ENV === 'production'
}

export const sanityClient = createClient(config)

export const PortableText = createPortableTextComponent({
  ...config,
  serializers: {},
})

import { sanityClient } from './lib/sanity.js'

//other code

export const getServerSideProps = async pageContext => {
    const query = '*[_type == "post"][0]';
    const result = sanityClient.fetch(query)

    if (!result.length) {
        return {
            props: {
                post: [],
            }
        }
    } else {
        return {
            props: {
                post: result.slug,
            }
        }
    }
}

import { createClient, createPortableTextComponent } from next-sanity

if (!result.length) {
        return {
            props: {
                post: [],
            }
        }
    }

const Navbar = ({ post }) => {
    console.log(post)
    return ( 
        <nav className={styles.nav}>
            <ul className={styles.navList}>
                    <Link href="/">
                        <li className={styles.navItem}>
                            <a>Home</a>
                        </li>
                    </Link>
                    <Link href="/about">
                        <li className={styles.navItem}>
                            <a>About</a>
                        </li>
                    </Link>
                    <Link href={post}>
                        <li className={styles.navItem}>
                            <a>Blog</a>
                        </li>
                    </Link>
            </ul>
        </nav>
     );
}