Next.jsの勉強方法を紹介します!

  • このエントリーをはてなブックマークに追加
  • LINEで送る

こんにちは!りょた(@Ryo54388667)といいます(^o^)

今回はNext.jsについての勉強方法について書いていきます。

  • Next.jsの勉強方法が知りたい。
  • React.jsを学んだので、次はNext.jsを学びたい。
  • Next.jsをどこから学べばいいかわからない。

こんな人に読んでいただけると幸いです!

Next.jsを学ぶ前に

やる気を削ぐようで悪いのですが、Next.jsを学ぶ前にReactやJavaScriptの学習をやっていない場合はそちらを優先して勉強しましょう!
これは、どのエンジニアに聞いてもそう言われると思います。
というのも、Next.jsはJavaScriptフレームワークの一つで、Reactを内部的に利用しているものだからです。

JavaScriptを勉強していないのに、Next.jsを勉強するのは、
いわば、日本語を勉強していないのに、慣用句や四字熟語などを勉強するようなものです。

マジでハードモードだということが容易に想像できるのではないかと思います。
勉強順番としては、JavaScript —> React.js —> Next.js です。

ここまで、厳しめの話が続きましたが、悲報ばかりではありません。
Next.jsはReactを内部的に利用している、と先述しました。正直、文法としてはほぼReactと変わりません。

見方を変えると、Reactさえ勉強していれば、 Next.jsはそこそこ記述できます。

「じゃあ、Reactと何が違うの??」

そう思われた人も多いのではないかと思います。
Reactには無い機能を補完したフレームワークだと思ってください。より多機能に拡張されたものです。
機能に応じて書き方があるので、それを一つひとつ勉強していく、と思ってください。

繰り返しにはなりますが、
Next.jsを学ぶ前にReactやJavaScriptを勉強しておくと、理解がスムーズになりますので、まずはそちらを優先してください!

Reactの勉強方法についてはこの記事でも書いてますので、こちらも見てみてください。

具体的な教材について

無料のもの

このシリーズは体系的で非常にわかりやすいです!

この方の解説もわかりやすいです!

有料のもの

書籍で勉強したい人はこの書籍がおすすめです!

僕個人としては、書籍で勉強することが多いです。


昨今、YouTubeで事足りることが多くなってきました。しかし、細切れの情報が多く、体系的に何かを学ぶ際には適していないように感じます。あくまで個人の見解ですが。。

その点、書籍は初歩からステップを踏んで、応用まで書かれているので、漏れがなく網羅的な知識を得ることができます。これが書籍のいいところなんですよね!細切れの知識でやっていくと、どこかの時点で、「基本がわかっていれば、こんなことは絶対しないのにな。。。」みたいな経験をします。

さらに、この書籍の出版社の「エビスコム」さんに限りですが、ソフトウェアのアップデート対応が素晴らしいです!Next.jsは毎年のようにアップデートが入るのですが、その都度アップデート対応版の情報を出してくれています。

Next.js13対応ページ

こちらはNext.jsが13にアップデートした時のものですが、神対応でした!アップデートの翌日に発表していました!凄すぎです!

続いて、動画教材です!

Udemyは質問ができるので、おすすめです!

教材を進めていくと、多くの場合エラーにぶち当たります。これに対応してもらえるのは非常にありがたいです。

さらに、僕はスマホにUdemyのアプリを入れて、復習のために通勤時間にながら聞きしたりします。この点も動画ならではの利点です。

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

NextjsとSupabaseによる高性能Web開発

最後に

もっと勉強したい人はこの書籍がおすすめです!これはTypeScriptもカバーしています!

ただ、ハンズオン部分はなかなかムズいですが。。。(^^;


この書籍について詳しくレビューをしているので、読んでみてください!

最後まで読んでいただき、ありがとうございます!

  • このエントリーをはてなブックマークに追加
  • LINEで送る