Next.js+ヘッドレスCMSではじめる! かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた

構成数 : 1枚

chapter1 Webサイト制作とコンテンツ管理の歴史を知ろう
1-1 Webサイト制作とコンテンツ管理のはじまり
1-2 WordPressの登場
1-2-1 さまざまなCMS
1-2-2 Webサイトが表示される仕組み
1-2-3 WordPressの仕組み
1-3 ヘッドレスCMSの登場
1-3-1 ヘッドレスCMSとは
1-3-2 ヘッドレスCMSの仕組み


chapter2 開発環境をセットアップしよう
2-1 開発環境の概要
2-2 Node.js環境をセットアップしよう
2-3 エディタをインストールしよう
2-3-1 Visual Studio Code(VSCode)とは
2-3-2 VSCodeをインストールしよう
2-4 Next.jsを使ってみよう
2-4-1 フロントエンドのフレームワーク
2-4-2 Next.jsのプロジェクトを立ち上げよう
2-5 Gitをインストールしよう
2-5-1 Gitとは
2-5-2 Gitのインストール
2-5-3 Gitを使ってみよう
2-5-4 GitHubを使ってみよう


chapter3 トップページを作ってみよう
3-1 ページを書き換えてみよう
3-1-1 Next.jsのディレクトリ構成を知ろう
3-1-2 JSXでマークアップする方法を知ろう
3-1-3 文章を書き換えよう
3-1-4 モダンなCSS記法(CSSmodules)で装飾をしよう
3-2 画像を扱ってみよう
3-2-1 画像ファイルの扱い方
3-2-2 next/imageで画像を最適化しよう
3-3 トップニュースのセクションを作ってみよう
3-3-1 データを表示させよう
3-3-2 コンポーネントを作ろう
3-4 ヘッダー・フッターを作ってみよう
3-4-1 ヘッダーコンポーネントを作ろう
3-4-2 フッターコンポーネントを作ろう


chapter4 下層ページを作ってみよう
4-1 ページを追加してみよう
4-1-1 ルーティングについて学ぼう
4-1-2 Next.jsでルーティングをしよう
4-2 ページ遷移をさせてみよう
4-2-1 リンクを追加しよう
4-2-2 Next.jsの機能でリンク遷移をしよう
4-2-3 Not Foundページを作ろう
4-2-4 導線を整えよう
4-3 メンバーページを作ってみよう
4-3-1 メンバー一覧を表示しよう
4-3-2 レイアウトを整えよう
4-3-3 コンポーネントを共通化しよう
4-3-4 コンポーネントを作成するポイント
4-4 ハンバーガーメニューを作ってみよう
4-4-1 Menuコンポーネントを作ろう
4-4-2 Webサイトに動きをつけよう
4-4-3 useStateでWebサイトに動きをつけよう
4-4-4 Next.jsの内部的な仕組みについて知ろう


chapter5 ヘッドレスCMSでコンテンツ管理してみよう
5-1 microCMSとは
5-2 microCMSをセットアップしよう
5-2-1 アカウントを登録しよう
5-2-2 サービスを作ろう
5-2-3 APIを作ろう
5-2-4 コンテンツを作ろう
5-2-5 APIを呼び出せるようにしよう
5-3 メンバーページにmicroCMSを組み込んでみよう
5-3-1 事前準備をしよう
5-3-2 ソースコードを書き換えよう
5-3-3 コンテンツ数の取得上限を調整しよう
5-4 トップページのニュースにmicroCMS を組み込んでみよう
5-4-1 コンテンツを用意しよう
5-4-2 データ取得の準備をしよう
5-4-3 ソースコードを書き換えよう


chapter6 ニュースページを作ってみよう～基礎的なコンテンツの扱い方～
6-1 ニュースの一覧ページを作ってみよう
6-1-1 ニュースページのレイアウトを作ろう
6-1-2 microCMSからニュースコンテンツを取得・表示しよう
6-2 ニュースの詳細ページを作ってみよう
6-2-1 Next.jsでダイナミックルーティングを実装しよう
6-2-2 Not Foundページに移動させよう


chapter7 ニュースページを作ってみよう～応用的なコンテンツの扱い方～
7-1 カテゴリー分けしてみよう
7-1-1 カテゴリーリンクを作ろう
7-1-2 カテゴリーページを作ろう
7-1-3 不正な値が入力されたときの処理
7-1-4 どのカテゴリーの一覧ページかわかるようにしよう
7-2 ページネーション機能をつけてみよう
7-2-1 ページ番号ごとのページを作ろう
7-2-2 不正な値が入力されたときの処理
7-2-3 ページリンクのコンポーネントを作ろう
7-2-4 現在のページ番号がわかるようにしよう
7-2-5 カテゴリーページにページネーション機能を実装しよう
7-3 プレビュー機能をつけてみよう
7-3-1 microCMSの画面プレビュー機能の流れ
7-3-2 microCMS側の設定をしよう
7-3-3 プレビューページを作ろう
7-3-4 画面プレビューの動作を確認しよう
7-4 検索機能をつけてみよう
7-4-1 検索フィールドのコンポーネン<...