title: How to solve TypeError: Cannot read properties of undefined (reading 'map') in Next.js?
body: <p>I am a beginner who wants to build a blog using Notion API, Next.js and Tailwind CSS. I learned the following code from here: <a href="https://egghead.io/lessons/next-js-request-notion-database-data-from-the-api-with-next-js" rel="nofollow noreferrer">https://egghead.io/lessons/next-js-request-notion-database-data-from-the-api-with-next-js</a>.</p>
  <p>The following code works fine in <code>/post/index.js</code>, but I get this error when I put the following code into <code>/components/PostTest.js</code> and import it in <code>/index.js</code>.</p>
  <p>How do I solve this problem?</p>
  <h3>Error information</h3>
  <p><a href="https://i.stack.imgur.com/a6IGs.png" rel="nofollow noreferrer">error screenshot</a></p>
  <pre><code>Server Error
  TypeError: Cannot read properties of undefined (reading 'map')
  
  #line 9
  return posts.map((posts) =&gt; (
  
  </code></pre>
  <h3>Source Code</h3>
  <pre><code>import Head from &quot;next/head&quot;;
  import Link from &quot;next/link&quot;;
  import { Client } from &quot;@notionhq/client&quot;;
  import { useState } from &quot;react&quot;;
  
  export const PostPage = ({ posts }) =&gt; {
    const [post] = useState(null);
  
    return posts.map((posts) =&gt; (
      &lt;div className=&quot;bg-[#F5F5F7] dark:bg-black px-4 py-2 md:py-4&quot;&gt;
        &lt;div className=&quot;bg-[#FFFFFF] dark:bg-[#141414] max-w-sm rounded-xl overflow-hidden shadow-sm container mx-auto&quot;&gt;
          &lt;img
            className=&quot;aspect-[16/9] bg-cover bg-center&quot;
            src={posts.coverImage}
            alt=&quot;Post Banner&quot;
          /&gt;
          &lt;div className=&quot;px-6 py-4&quot;&gt;
            &lt;p className=&quot;text-[12px] md:text-[14px] dark:text-[#888888] leading-5 font-[700] pt-2 uppercase tracking-normal mb-[8px]&quot;&gt;
              {posts.Category}
            &lt;/p&gt;
            &lt;Link href={`/post/${posts.PID}`}&gt;
              &lt;div className=&quot;text-lg md:text-xl text-[#1d1d1f] dark:text-[#F5F5F7] leading-snug font-[700]&quot;&gt;
                  {posts.Title}
              &lt;/div&gt;
            &lt;/Link&gt;
            &lt;p className=&quot;text-[14px] text-[#6e6e73] dark:text-[#888888] leading-5 font-[600] pt-2&quot;&gt;
              {new Date(posts.Date).toLocaleDateString()}
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    ));
  };
  
  export const getStaticProps = async () =&gt; {
    const notion = new Client({
      auth: process.env.NOTION_TOKEN,
    });
  
    // get posts more than 100 pages.
    let results = [];
  
    let data = await notion.databases.query({
      database_id: process.env.NOTION_POST_DATABASE_ID,
      filter: {
        property: &quot;Status&quot;,
        select: {
          equals: &quot;Published&quot;,
        },
      },
      sorts: [
        {
          property: &quot;Date&quot;,
          direction: &quot;descending&quot;,
        },
      ],
    });
  
    results = [...data.results];
  
    while (data.has_more) {
      data = await notion.databases.query({
        database_id: process.env.NOTION_POST_DATABASE_ID,
        filter: {
          property: &quot;Status&quot;,
          select: {
            equals: &quot;Published&quot;,
          },
        },
        start_cursor: data.next_cursor,
      });
  
      results = [...results, ...data.results];
    }
  
    const posts = results.map((post) =&gt; ({
      id: post.id,
      Title: post.properties.Title.title[0].text.content,
      Category: post.properties.Category.select.name,
      category_color: post.properties.Category.select.color,
      Date: post.properties.Date.date.start,
      Tags: post.properties.Tags.multi_select.map((Tags) =&gt; Tags.name),
      Tags_color: post.properties.Tags.multi_select.map((TagsColor) =&gt; TagsColor.color),
      PID: post.properties.PID.rich_text[0].text.content,
      Author: post.properties.Author.people.map((people) =&gt; people.name),
      Author_avatar_url: post.properties.Author.people.map((people) =&gt; people.avatar_url),
      coverImage:
          post.cover.file?.url ||
          post.cover.external?.url,
    }));
  
    return {
      props: {
        posts,
      },
      revalidate: 1,
    };
  };
  
  export default PostPage;
  </code></pre>