Simple navbar in Layout component

Developing with Prismic
1

I'm struggling to understand how to bring in my custom type Navbar into my Layout component using getStaticProps. The documentation on how to do this does not make sense and seems like it needs to be updated. https://prismic.io/docs/technologies/navbars-footers-menus-nextjs

I get an undefined error when I try to use nav.data.navImage.url

import Head from 'next/head';
import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';
import { createClient } from '../prismicio';
import { RichText } from 'prismic-reactjs';
import { SliceZone } from '@prismicio/react';
import { components } from '../slices';


export async function getStaticProps({ previewData }) {

  const client = createClient({ previewData })

 
  const nav = await client.getSingle('navigation')

 console.log(client + "client" )

  return {
    props: { nav }, // Will be passed to the page component as props
  }
}

const name = 'blah';
export const siteTitle = 'blah';

export default function Layout({ children, nav }) {
  return (
    <div className={styles.container}>
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <meta
          name="description"
          content=""
        />
    
        <meta name="og:title" content={siteTitle} />
      
      </Head>
      <header className={styles.header}>
        <nav> 
         <img src={nav.data.navImage.url} alt={nav.data.navImage.alt} /> 
        </nav>
        { console.log(nav)}
      </header>
      <main>{children}</main>
      
    </div>
  );
}
3

Hi @izo, thanks for reaching out.

The tutorial in the documentation is an example of how you can approach creating a menu in your app, but it's not the only way to do it. I can see that you have opted for another alternative where you create the nav in the same place where you call the API. What file hosts this code?

The first thing we would have to check is the structure of your navbar, to see if you are calling the correct fields. In your case nav.data.navImage.alt is calling a static image at the top level of your document, and in the tutorial this is different. menu.data?.menuLinks is called using a .map array function because menuLinks is a field of type Group.