【Next.js13】最新バージョンのNext.js13をマイクロブログを構築しながら基礎と本質を学ぶ講座
Next.js13になってからappディレクトリやクライアント、サーバーサイドレンダリングの理解が重要になってきました。SSG/SSR/CSR/ISRの基礎を振り返り、自信を持ってNext.jsが使えるようになるマスター講座になります。
Course curriculum
-
-
本講座で学べること
-
本講座の完成品デモ
-
-
-
なぜNext.jsが誕生したのか？
-
ReactとNext.jsの違いってなに？
-
Next.jsの使いどころとメリット・デメリット
-
SSRとSSGってなに？使い分けはどうするの？
-
ISRってなに？どんな場面で使うの？
-
具体的にNext.js13になって何が変わったの？
-
-
-
VSCodeをインストールしよう
-
Node.jsをインストールしよう
-
Next.js13最新版で開発環境を構築してみよう
-
ファイル群とappディレクトリの説明
-
プログラムの開発効率が上がるプラグインをインストールしよう
-
-
-
layout.tsxにヘッダーとフッターを追加してみよう
-
ブログ共通ヘッダーを作ってみよう
-
ブログ共通フッターを作ってみよう
-
page.tsxの中身を記述してsectionを追加してみよう
-
ブログ記事投稿一覧をHTMLとTailwindCSSで作ってみよう：その１
-
ブログ記事投稿一覧をHTMLとTailwindCSSで作ってみよう：その２
-
ブログ新規作成用のページを作成してみよう
-
-
-
モックデータ用にjson-serverを導入してみよう
-
SSRでブログ全記事データを取得するAPIを作ってみよう
-
APIを叩いて全記事をブラウザに出力してみよう
-
【補足】SSRではなくCSRでAPIを叩く場合
-
エラー用ページを作成して意図的にエラーを発生させよう
-
ローディング用ページを作成して遅延した際のローディングを実装してみよう
-
ブログ記事の詳細ページを作ってみよう
-
ISRでブログ詳細取得用APIを作ってみよう
-
詳細記事内容の表示とサムネイル表示を修正しよう
-
ブログ本文の文字数制限を設けてみよう
-
Footerの位置をTailwindCSSで調整しよう
-
404notFoundページを作ってみよう
-
ブログ投稿用APIを構築してみよう
-
APIを叩いて新規ブログ投稿してみよう
-
投稿時のローディングアニメーションを実装してみよう
-
ブログ記事削除用のAPIを作ってみよう
-
削除ボタンを作って実際にAPIを叩いて削除してみよう
-
-
-
Supabaseでデータベースを使ってみよう
-
Supabaseの初期セットアップをしてみよう
-
ブログ記事を保存するためにテーブルを作成してみよう
-
pages/apiディレクトリを作って簡易的にAPIを作ってみよう
-
実際にブログ全記事取得用APIを叩いてみよう
-
Supabaseで詳細ページ取得用のAPIを作って呼び出してみよう
-
ブログ記事投稿用APIを作って呼び出してみよう
-
ブログ記事削除用APIを作って呼び出してみよう
-
app/apiディレクトリに簡易APIを作ってみよう
-
詳細記事取得用APIもapp/apiで書き換えてみよう
-
appディレクトリで記事投稿APIを作ってみよう
-
appディレクトリで記事削除APIを作ってみよう
-
About this course
- 24,000円
- 49回のレッスン
- 3.5時間の動画コンテンツ
コースレビュー
素晴らしいと思います。
龍太 古賀
Next.js全く触ったことのない状態での受講になります。 基本的な書き方からNext.jsだけでなくTailwindcssやTypeScriptも記述していくので、TypeScriptは別の方のUdemyなんかで基礎を勉強しているとスムーズに理解できるのかなと思いました。 それでも基礎的なことをわかりやすく噛み砕いで説明をしてくださってるのでわかりやすいです。 個人的にコードの書く速さに追いつかなくて一時停止したり動画速度を下げたりしました。
Next.js全く触ったことのない状態での受講になります。 基本的な書き方からNext.jsだけでなくTailwindcssやTypeScriptも記述していくので、TypeScriptは別の方のUdemyなんかで基礎を勉強しているとスムーズに理解できるのかなと思いました。 それでも基礎的なことをわかりやすく噛み砕いで説明をしてくださってるのでわかりやすいです。 個人的にコードの書く速さに追いつかなくて一時停止したり動画速度を下げたりしました。
縮める