`getServerSideProps` っていうのを使ってmicroCMSからコンテンツを取得する。 `getServerSideProps` の中では `next/router` 使えないっぽいので以下のようにする。 ```js export async function getServerSideProps(context) { const id = context.query.slug const res = await fetch(`https://xxx.microcms.io/api/v1/hoge/${fuga}`, { headers: { "X-API-KEY": process.env.apiKey } }) const post = await res.json() return { props: { post } } } ```

Next.jsの環境変数の設定はnext.config.jsを使う ### 参考 - https://nextjs.org/docs/basic-features/environment-variables#loading-environment-variables - https://nextjs.org/docs/api-reference/next.config.js/environment-variables - https://nextjs.org/docs/api-reference/next.config.js/introduction

ローカルでのNext.js起動は以下のコマンドで行う。 ```shell $ npm run dev ``` 移行したばかりのときのNext.jsのバージョンが9.3だったので、手もそこまでいれていなかったし、最新の9.4で作り直すことにした。 ```shell $ npx create-next-app npx: 1個のパッケージを1.075秒でインストールしました。 ✔ What is your project named? … tomckys-site ✔ Pick a template › Default starter app ... ```

ブログを作っていく記録を適当に残す。 なお、この記録はブログのてすと投稿も兼ねている。 ## 技術スタック - フロントエンド - Next.js - バックエンド - microCMS - ホスティング - Vercel 移行したばかりのときのブログ記事が[こちら](https://tomcky.hatenadiary.jp/entry/20200328/1585357079)

# 見出し1 - これは - テスト - ですよ **ではまたね**