【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座

Next.jsフレームワークでマイクロブログを実際に構築しながら、Webアプリ読み込み速度やWebパフォーマンスを最大化するSSG/SSRプリレンダリング手法が学べる講座。モダンなフロントエンド技術をキャッチアップしてみよう。

4.50 (892 reviews)
Udemy
platform
日本語
language
Operating Systems
category
instructor
5,317
students
3.5 hours
content
Dec 2023
last update
$54.99
regular price

What you will learn

Nextjsの基礎と概念が理解できるようになる

なぜNextjsを使うのか?その理由が理解できる

ReactとNextjsの違いが理解できる

Nextjsを使って簡単なブログを1から構築できる

SSG(静的生成)のプリレンダリング手法が学べる

SSR(サーバーサイドレンダリング)のプリレンダリング手法が学べる

SSGとSSRの違いが理解でき、実装できる

SSGとSSRの使い時が理解できる

プリレンダリングの概念が理解できる

プリフェッチングの概念が理解できる

動的ルーティングを構築できる

ハイドレーションが理解できる

CSSモジュールの使い方が理解できる

グローバルスタイリングが理解できる

ファイルシステムにデータを保存し、それを取得できる

getStaticProps関数の意味が理解できる

getStaticPaths関数の意味が理解できる

Vercelを使ってデプロイができるようになる

DPSワークフローが体験できる

SEO対策の必要があるウェブアプリが構築できる

マークダウンファイルの取り扱い方が理解できる

Description

Reactフレームワークの「Next.js」を初めて触る人に向けたコース構成になっています。

※Next.js13の最新バージョンには対応しておりませんのでご了承くださいませ。Next.js13以前のNext.jsを学ぶことができます。


■ 本コースの対象者

・Reactは一通り学んだから次のステップとしてNext.jsを学びたい方

・Next.js完全初心者の方

・Next.jsを学んでReactの違いを明確に理解しておきたい方

・Next.jsの公式ドキュメントを読んでもイマイチ理解が深まらない方

・公式ドキュメントよりも動画でサクッと理解したい方

・CSRではない最新のレンダリング手法のSSG・SSRを学んでみたい方


Reactよりも最適化されたアプリやサイトを構築できます。

Next.jsフレームワークを学べば高速化されたWeb開発が可能に。

モダンなフロントエンド技術に乗り遅れたくない方は必見の内容です。


■ 本コースを受講する際の注意点

・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。

・Next.jsの公式ドキュメントに沿った内容で講座を構成しています。

・Next.js13の最新バージョンには対応しておりません。

すでにNext.jsの公式ドキュメントを読み終えて理解済みの方は、

この講座では新しい学びがないので受講しないようにしてください。

・ISRについては取り扱っておりません。

Content

本講座を受講する流れ

本講座で学ぶこと・デモ
本講座の学習の流れ

Next.jsの基礎を学ぼう

Next.jsって何?なぜ必要なの?
プリレンダリングって何?
SSGとSSRって何?

Next.jsの開発環境を構築しよう

VSCodeをインストールしよう
Node.jsをインストールしよう
開発用フォルダを作ってNext.jsのひな型を作成しよう
Next.jsファイル群の中身の説明
Next.jsの開発効率が上がるプラグインをインストールしよう

①Next.jsでマイクロブログを構築(ページ遷移、スタイリング編)

はじめに:完成品デモ
Next.jsにおけるホットリローディングを体感しよう
pagesフォルダでルーティング設定をしてみよう
Linkコンポーネントでページ遷移をしてみよう
静的な画像ファイルの取り扱いについて(publicディレクトリ)
Headコンポーネントを使ってメタデータを追記しよう
複数ページに共通して使えるレイアウトコンポーネントを作成してみよう
Next.jsにおけるcssスタイリング適用方法を学ぼう
タイポグラフィに関するCSSモジュールを用意しよう
_app.jsにグローバルスタイリングを適用させてみよう
トップページのレイアウトを更新しよう
トップページのスタイリングを調整しよう

②Next.jsでマイクロブログを構築(プリレンダリング編)

はじめに
Next.jsでプリレンダリングを実感してみよう
ブログ投稿用データを準備しよう
マークダウン解析のためのライブラリを作成しよう
getStaticPropsでSSGを実装してみよう
propsで受け取った静的データをmap関数で出力して表示しよう
getServerSidePropsの書き方も知っておこう

③Next.jsでマイクロブログ構築(動的ルーティング編)

はじめに
Next.jsにおける任意のURLを動的ルーティングとして設定する方法
各ブログファイル名(id)のオブジェクトを返す関数を作成しよう
getStaticPathsを実際に使ってみよう
外部から一度だけデータを取得するSSGを実装しよう
ブログIDに応じた記事内容を返す関数を用意しよう
実際にgetStaticPathsとgetStaticPropsを実感してみよう
ブログ記事のレイアウトを訂正しよう
フォールバックについて補足
404 Not Foundページをカスタマイズしてみよう
ブログの細かい訂正をしよう(その1)
ブログの細かい訂正をしよう(その2)

④Next.jsでマイクロブログ構築(デプロイ編)

buildコマンドを実行して本番前にプレビューしてみよう
デプロイするためにGitHubアカウントを作成しよう
Vercel社が開発したデプロイサービスを利用しよう
DPSワークフローを体験してみよう(その1)
DPSワークフローを体験してみよう(その2)
Next.jsが本当にページを高速にレンダリングしているか確認してみよう

ボーナスレクチャー

ボーナスレクチャー

Screenshots

【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座 - Screenshot_01【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座 - Screenshot_02【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座 - Screenshot_03【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座 - Screenshot_04

Reviews

Tomoya
June 3, 2023
名前の通り入門という点では頭に入りやすい内容でした。 ところどころ動画内と実際に作ったもので差分ができることがありましたが、微小な問題だったので自己解決できました。 HTML/CSS/JSなどの基礎ができている人なら動画倍速で半日で終わらせられる内容です。サクッと学びたいという人にはおすすめの講座です。
Anonymized
May 26, 2023
Next.jsは全くの初学者ながら、時間はあまりかけずに理解を深めたい、というわがままなニーズにこたえていただき、ありがとうございました! ハンズオンで理解も深まり、メリットが十分理解できました! 実戦でさらに理解を深めていきたいと思います。
Keisuke
April 22, 2023
あえてエッセンスを絞って解説してあるおかげで初学者にとって非常にわかりやすい入門的な講座内容としてまとまっていますに。Reactを軽く学んだがNext.jsがわからない、公式のチュートリアルは英語でよくわからない、という人におすすめです。一方でJavaScriptやReactにすでにある程度精通している人にとっては物足りない内容に思う可能性もあります。 自分にとっては基礎を理解する上でちょうど良い講座でした。講師のYouTubeもフロントを中心にいろいろなことを学べるのでかなりおすすめです。
笠本健士朗
April 22, 2023
Next.js初心者の入門としてはとてもわかりやすいものでよかったです。 ただ、SSRに関する動作の仕組みもわかるようなハンズオンを追加して欲しいと思いました。 今回の受講から、SSGの動作はなんとなくわかるものの、SSRの挙動がいまいち把握できませんでした。 また、ページごとにSSGやSSRを分けれるとのことでしたが、そこの挙動もいまいち把握できませんでした。
スピーディ
February 19, 2023
以前に本講師のphpの講座がとてもわかりやすかったので、フロントのほうも学習したいと思い、本講座を履修しました。reactを少し実務で使用したことがある程度ではあったのですが、nextjsの基礎をとてもわかり易く丁寧に教えてくれいているので初学者のわたしでもわかりやすかったです。ハンズオンで教えていただけるので、達成感と楽しさがある講座だと思います。おすすめです!
December 25, 2022
Next.js を深く知るきっかけとして購入しました。 私のレベル感としては、React と Next を使ってTodo アプリを作ることができます。 この講座の対象者は、js や React を使用して簡単な Todo が作成できるレベルの人が対象と思われます。このレベルに達していない人は、違う講座で基礎をまず理解してからの方がいいです。 動画の評価ですが、説明の丁寧さや繰り返しスライドを使用して、わかりにくい部分を説明してくださる点が良かったと思います。 星マイナス2の理由ですが、動画の途中で間違った記述(matter の部分)をしてその後に修正する場合は、間違った記述した時点に「後で修正が入ります」などの注釈を入れるべきかと思います。 記述時点で、こちら側が先にエラーに気がついた場合は、こちらにミスがあると解釈して、動画を止めてエラー解決に時間を割くことになります。(実際に1時間ほどかけて、自力で[gray-matter]までたどり着きました)
Nezu
November 5, 2022
Shin Codeさんの講座はどれもすばらしく、今回のNext.jsでマイクロブログを作成する講座も非常に勉強になりました。 実際に1つのアプリを開発していくというスタイルですので、完成していくアプリを確認でき達成感を感じながら進めることができます。 また、意図的なのか意図していないのかは分かりませんが、時々コーディングをエラーを発生させるところが良い意味でスパイスになっていると思います。 講座が進むよりも先にエラーに気付けたときは自分の成長を実感できますし、気付けなくてもエラーを解消していく過程が勉強になります。 今後の講座も期待しております。 ありがとうございました。
マツムラリョウ
October 17, 2022
他の方で、Reactを初学のため、難しく、あとから受講します、とうのレビューを見ましたが、自分はReactを勉強したことがありますが、スムーズに飲み込めました。 また、他のHerokuやFirebaseのデプロイできるサービスを体験したことがあるため、vercelのデプロイスピードに感動しました。 React初学者の方でも、Nextを今後使ってみたいのであれば、とりあえず取っておいて、あとから受講すれば、身になるのかなと思います。
MASAKATSU
October 15, 2022
next.jsは講座数も少なくとても期待して視聴しました。とてもわかりやすく丁寧に説明してくれています。next.jsが注目される理由もわかりました。 JS講座を学習後に次なるステップとして、この講座を聞きました。 率直の感想はJSとは思えない。別言語ですね。新たな言語を学ぶ余力があればチャレンジしてみてください。 星を1つ減らした理由は以下の通りです。SSGを使うことで、操作性はよくなる。SSRまでは必要ない。だからブログ記事を題材に選んだのだと思いますが、ほかの応用例はなかったのかな。このようなブログが一般の人にどれだけ必要なのか疑問に感じました。
yompi
August 4, 2022
多少早口すぎる部分もありますが、内容やテンポ、声など総合的にとてもわかりやすく楽しいです。早口に関しては再生速度を0.75くらいにすればちょっと遅すぎますがギリギリ聞けます。0.85くらいがあったらちょうどいいのかも。 唯一残念なのは一瞬で書いて一瞬で画面を切り替えるので何を書いたのかを確認するために何度も戻りながら進めていかなければならないのでその点だけストレスが溜まります。
okjm
August 2, 2022
一度目は難しくて返金しましたが、同じshincodeがあげているMERNフルスタックの動画を終えてから再度購入して取り組んだところ、理解できました。React系の動画では比較的最近のもので、情報が古いということもないのでshincodeさんからは色々動画を購入させていただいています。講義も非常にスムーズでかつ簡潔にわかりやすいのでおすすめです。reduxの動画はreduxがわからない人は見た方がいいです。
サイトウ
July 23, 2022
【Reactアプリ開発】も受講しました。そちらでも大変分かりやすく実用的な講義だったため、次はNext.jsを学んでみようとこちら受講しました。 Reactとの違いやSSG、SSRなど初めて聞く用語も解説してくれてありがたいです。 まだまだ前半ですが、Next.jsでのルーティング処理がReactに比べると、簡単というかこちらが何も設定せずともルーティングできてしまうことにびっくりです。 後半戦も楽しみです。
Enbiz
July 19, 2022
ありがとうございました。とてもテンポがよく、実際のボリュームを感じさせない進み方でした。そのテンポにいつの間にか引き込まれ「わかった!」気になってしまいましたが、実際はまだまだ力不足なので、何度か見返したり、実習を重ねて上達していこうと思います。reactもまだまだだし。
鈴木克弥
July 16, 2022
Next.jsの入門に最適かつエラーが出た際の対応の仕方なども見ることができるので大変参考になります。また、テンポも良く本題と離れているところは軽い説明で終わっており知りたい部分だけを効率よく知ることができとても良い教材だと思います。ありがとうございます。
ビジ
March 23, 2022
Next.jsの必要なことを、最小限にそぎ落として教えてもらえたので、全体像が明確に把握できて、とても分かりやすかったです! 欲を言えばですが、JSONPlaceholderを用いたアプリ作成が学べるとありがたいです。

Charts

Price

【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座 - Price chart

Rating

【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座 - Ratings chart

Enrollment distribution

【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座 - Distribution chart
4563432
udemy ID
2/22/2022
course created date
3/7/2022
course indexed date
Bot
course submited by