NextJs how to solve Objects are not valid as a React child (found: object with keys {children}) issue

Question

I'm building a nextjs-application and I crossed an issue with getStaticPaths. Inside the pages-folder, I have a file called [slug].tsx which contains this code:

import { Image } from "react-datocms";
import { request } from "../lib/datocms";
import { GetStaticProps, GetStaticPaths } from "next";

export default function Page({ pageData }) {
  return (
    <div>
      <h1>{pageData.title}</h1>
    </div>
  );
}

const PATHS_QUERY = `
  query MyQuery {
    allPages {
      slug
    }
  }
`;

 export const getStaticPaths: GetStaticPaths = async (context) => {
   const slugQuery = await request({
     query: PATHS_QUERY,
     preview: context.preview,
   });

   let paths = [];
   slugQuery.allPages.map((path) => paths.push(`/${path.slug}`));

   return {
     paths,
     fallback: false,
   };
 };

 const PAGE_QUERY = `
   query MyQuery($slug: String) {
      page(filter: {slug: {eq: $slug}}) {
       title
       slug
       id
      }
    }
 `;

 export const getStaticProps: GetStaticProps = async ({ params }) => {
  const page = {
    query: PAGE_QUERY,
    variables: { slug: params.slug },
  };

  return {
    props: {
      pageData: page,
    }
  };
};

This gives me the error: Objects are not valid as a React child (found: object with keys {children}). If you meant to render a collection of children, use an array instead.

I have no clue what this means, so can anyone help me out?

****** UPDATE ******

I suspect my Navbar could have something to do with this. In my components folfer, I have a nav folder with a Navbar.tsx-file which looks like this:

const Navbar = ({ topNav }) => {
  const menu_items = topNav.menuItems[0];
  return (
      <nav>
         {menu_items.topNavigationItems.map((navitem, idx) => (
            <div key={navitem.text}>
              <NavItem {...navitem} />
            </div>
          ))}
      </nav>
   )
 }

 export default Navbar;

the NavItem looks like this:

const NavItem = ({ text, path, active }) => {
  return (
    <Link href={path.slug}>
     <a>
      {text}
     </a>
    </Link>
  );
};

export default NavItem;

Answer 1

The way you are building your paths array inside getStaticPaths is not quite right according to the new standards. You have to "push" an object with a key of params, which then contains an object with your slug.

Rewriting your getStaticPaths function would result in the following.

export const getStaticPaths: GetStaticPaths = async (context) => {
    const slugQuery = await request({
        query: PATHS_QUERY,
        preview: context.preview,
    });
    const paths = slugQuery.allPages.map(path => {params: {slug: path.slug} });
    return {
      paths,
      fallback: false,
    };
};

You can read more about the getStaticPaths function in the official documentation.

EDIT: To be more specific on the error you're getting, you are trying to render an object as a JSX element, thus generating an error. Try and find the source of that error and fix it this way.