（React.js）mapがundefinedになります

Question

現在JAMstackなブログを作るために
Next.js + microCMS + NetlifyでJAMstackな世界に入門する
上記の記事を参考にしながら進めています。

micro cmsを使い、fetchで記事をとって記事データなどを集めてきています。

ここでご質問なのですが、
buildをする際に、

> Build error occurred
TypeError: Cannot read property 'map' of undefined
    at getStaticPaths (/Users/cawauchi/Desktop/blog/.next/server/pages/blogs/[id].js:156:32)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async buildStaticPaths (/Users/cawauchi/Desktop/blog/node_modules/next/dist/build/utils.js:17:80)
    at async Object.isPageStatic (/Users/cawauchi/Desktop/blog/node_modules/next/dist/build/utils.js:24:549) {
  type: 'TypeError'
}

といったエラーが起きてしまいます。

ちなみにnpm run devの場合だとエラーが起きず、意図したページが表示されます。

at getStaticPaths (/Users/cawauchi/Desktop/blog/.next/server/pages/blogs/[id].js:156:32)

とあるので

import React from 'react'
import fetch from 'isomorphic-unfetch';

const BlogId = ({ blog }) => {
    return (
        <div>
            <h1>{blog.title}</h1>
            <div>
                {blog.tags.map(tag => (
                    <React.Fragment key={tag.id}>
                        <span>{tag.name}</span>
                    </React.Fragment>
                ))}
            </div>
            <div dangerouslySetInnerHTML={{ __html: `${blog.body}` }}></div>
        </div>
    );
};

// パスを生み出している
export const getStaticPaths = async () => {
    const key = {
        headers: { 'X-API-KEY': process.env.API_KEY },
    };

    const res = await fetch('エンドポイント', key);
    const repos = await res.json();
    //ここでログ出してます
    console.log(repos)

    // 配列で/blogs/idを返す
    const paths = repos.contents.map(repo => `/blogs/${repo.id}`);
    return { paths, fallback: false };
};

// 内容を返す
export const getStaticProps = async context => {
    const id = context.params.id;

    const key = {
        headers: { 'X-API-KEY': process.env.API_KEY },
    };

    const res = await fetch(
        `エンドポイント/${id}`,
        key,
    );
    const blog = await res.json();

    return {
        props: {
            blog: blog
        }
    };
};

export default BlogId;

const paths = repos.contents.map(repo => `/blogs/${repo.id}`);

この部分でundefinedを出していたと推測したので
console.log(repos)
を挟んでみたところ

{
  contents: [
    {
      id: 'zoskqppsn',
      createdAt: '2020-09-20T03:30:11.976Z',
      updatedAt: '2020-09-20T06:43:59.289Z',
      publishedAt: '2020-09-20T03:30:11.976Z',
      title: 'This is test',
      body: '<p><span style="font-size: 2.5em">これはテストです</span><br>これはテストテストテストテスト<br></p>',
      tags: [Array]
    }
  ],
  totalCount: 1,
  offset: 0,
  limit: 10
}

以下のようなオブジェクトが返されたので

const paths = repos.contents.map(repo => `/blogs/${repo.id}`);

こちらのrepos.contentsは配列であり、mapではundefinedにはならないと思うのですが解決方法がわからず詰まってしまっております。

アドバイスをいただけたらと思います。

Answer 1

もしかすると、環境変数を.env.development.localに書いていませんか?
そうであれば、.env.localに書いて試してみてください。

Comments

[cawauchi]

nskheiさん

神とお呼びしてもよろしいですか？