ハンズオン！Next.js 13＋{JSON} Placeholdeで作る簡易ブログ(SSG編) - Qiita

はじめに Next.js13がリリースされてもうすぐ１ヶ月が経ちましたが、まだ公式チュートリアルが最新版に対応したものが出ていないため、公式ドキュメントを読み進めながら{JSON} Placeholdeと連携したSSG対応の簡易ブログを作成しました。 本記事は、ハンズオン形式でこのブログの作成方法をまとめています。 ハンズオンの流れ 開発環境の構築 Routing レイアウトコンポーネント ページコンポーネント ブログ一覧を作成 記事ページを作成 タイトルをつける 開発環境の構築 インストール まず、開発環境が以下の要件を満たしていることを確認してください。 Node.js 16.8以降(node -vで確認) MacOS、Windows（WSLを含む）、Linuxに対応 ターミナルを開いて作業フォルダに移動後、下記のいずれかのコマンドを実行します。

[tohokuaiki]

実際にgenerateStaticPropsを使ってデータを取ってみる例。

[hujuu]

“[data-nextjs-scroll-focus-boundary] { display: contents; }”