1

My getstaticProps:

export async function getStaticProps({ params }) {

  const mainMenuData = await fetch(
    `https://example.com/get/main-menu`
  ).then((res) => res.json());

  return {
    props: {
      mainMenuData,
    },
    revalidate: 60,
  };
}

Using the component:

<Header data={mainMenuData} />

My component:

export default function Header({ data }) {

  return (
    <>

      {data.main_menu}

    </>
  );
}

The data is an object, and I can access it so technically I know it's possible. However when I start mapping through the data I keep getting the error:

Hydration failed because the initial UI does not match what was rendered on the server

I'm new to Next and I'm not sure this method is correct.

Edit: Page component

import Head from "next/head";
import styles from "../styles/Home.module.css";
import Header from "../components/header";

export default function Page({ mainMenuData }) {

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
      <Header data={mainMenuData} />
      </main>
    </div>
  );
}

export async function getStaticProps({ params }) {

  const mainMenuData = await fetch(
    `https://example.com/get/main-menu`
  ).then((res) => res.json());

  return {
    props: {
      mainMenuData,
    },
    revalidate: 60,
  };
}
flinch85
  • 340
  • 2
  • 16
  • Please show the page component where you are using your `Header`. – ivanatias Jun 17 '22 at 17:36
  • 1
    I think the error is due to not wrapping the data you are passing to `Header` in a jsx element. Try using a jsx element inside of `Header` like a `div` or `ul` if it's a list for example and let me know if that solves the issue. – ivanatias Jun 17 '22 at 18:41
  • @ivanatias this doesn't solve it – flinch85 Jun 17 '22 at 20:25
  • I see. You should check [this](https://stackoverflow.com/questions/71706064/react-18-hydration-failed-because-the-initial-ui-does-not-match-what-was-render) thread, this is a very common issue in Nextjs, maybe it can help you. – ivanatias Jun 17 '22 at 20:59
  • @ivanatias you were correct the first time, I had some nested maps and I didn't wrap them correctly, it got confusing, Thanks. – flinch85 Jun 17 '22 at 21:30
  • I'm glad you solved the issue. Should I put the comment as an answer so you can close this question? – ivanatias Jun 17 '22 at 21:45
  • Yes please do that. – flinch85 Jun 17 '22 at 21:48

1 Answers1

2

This error might be happening due to not wrapping the data you are passing to Header properly in a JSX element. Try using a JSX element inside of Header like a div or ul if it's a list for example.

Also, avoid some JSX wrapping patterns such as, for example, a p tag wrapping up a div, section, etc. Next.js will most likely throw a similar error because of this.

Reference thread

ivanatias
  • 3,105
  • 2
  • 14
  • 25