Next.jsとmicroCMSを連携して個人ブログを作成する

こちらのセクションでコードをコピペしてサンプルらしきものを作成した

ディレクトリ階層はこちら(余計なものは省く)

├── app
│   ├── layout.tsx
│   ├── page.tsx
│   └── static
│       ├── [postId]
│       │   └── page.tsx
│       └── page.tsx
└── libs
    └── microcms.ts

一旦コードをコピペして動かそうとしたが、理解のためにhttp://localhost:3000/static/page.tsxにアクセスしてもエラーで動かない。

error

Unhandled Runtime Error
Error: fetch API response status: 404

そりゃそーだ。
ディレクトリの中のpage.tsxはURLで指定すべきじゃないんだ

こっちでアクセス
http://localhost:3000/static/

なんやかんやあったが無事アクセスできた

ちびまろ 2ヶ月前に更新

サンプルコードを見てて気になった部分

↓のarray.map()のpostはどんな名前でもOK

return (
    <div>
        <h1>{time}</h1>
        <ul>
            {contents.map((post) => {
                return (
                    <li key={post.id}>
                        <Link href={`/static/${post.id}`} style={{color: 'red'}}>{post.title}</Link>
                    </li>
                );
            })}
        </ul>
    </div>
);

testでも試したがうまく動いたため任意であるはず

<ul>
    {contents.map((test) => {
        return (
            <li key={test.id}>
                <Link href={`/static/${test.id}`}>{test.title}</Link>
            </li>
        );
    })}
</ul>

ちびまろ 2ヶ月前に更新