Next.js公式チュートリアル

はい。こちらですね。
さあ進めるぞー!って思ったんですがStep0.導入の「前提知識」の項目を読んでみると「Reactを初めて使用する場合は、まずReactFoundationsコースを受講して、コンポーネント、props、state、hooksなどのReactの基礎と、Server CmponentsやSuspenseなどの新しい機能を学習することをお勧めします」
とあります。
先週から、React公式チュートリアルやら先人が残してくださったTodoリストの作り方やらで触ってはいますがしっかり身についているかは別の話。
一旦ReactFoundationsコースを受けようじゃないですか。

つってこちらのコース、ほとんど手を動かすことはありませんでしたが、章の途中や最後に小テストのように問題が出されます。
これがとてもありがたい(Chromeの和訳使ってるもんでところどころ変な訳にはなるけども意味は取れる)

そしてこちらの最終章(10章まである)でサーバーコンポーネントとクライアントコンポーネントについて学んで終わりと。
ラストはさすがにコードを触って実際に動かしてみての確認をしてみました。
ちょっとばかり「サーバーコンポーネント」「クライアントコンポーネント」の理解があいまいな感は否めませんが、またおいおい調べることとしましょう。

そしてようやく本丸のNext.js App Routerコースです。
今日は2章まで進みました。
先ほどまで挑戦していたReact Foundationコースと同じく章の途中途中で小テストを挟んでくれます(テストっつーか2~3択問題)

個人的にはtailwindにあんまりいい思い出がないのと、クラス名がすごーーーーーーーーーーーーーーーーーーく多くなりがちなので、そこだけ鳥肌を立てながら進めてます。
(個人でやるときには無理に使わんでもいいとは思う「個人」なら)

状態変化によるクラスの切り替えの実装とかどうするのかなと思っていたのですがそれ用のライブラリがあるんですね(条件によってクラスを切り替えられるclsx)そらあるか。ないと不便すぎるもんな確かに。

以前いったんtailwindはデザインシステムを構築するのに向いている(うろ覚え)という記事を読んだことがあるのでやっぱり使いどころによるのかなとは思います。

気持ちが早ってうっかり2章について先に話してしまいましたが1章の環境構築まではさっくりと終わっております
今度コマンドについてもしっかり確認しておかねば。

と、仕事では普段yarnを使用しているのですが、このチュートリアルでもpnpmかyarnを勧められました。
で、どっちがいいのかとかどんな違いがあるのか気になったので軽く調べてみたところ、pnpmもyarnもサードパーティのnpmなのには変わりないのですがyarnとnpmはほとんど同性能となってきているようです。(ただしやはり速さではyarnに軍配が上がる)
しかしpnpmはさらに早いということで、以前一度入れてみたことはあったのですが、今回はpnpmを使用してみることにしました。

実際動かしてみて、最初手の

pnpm i

でインストール開始したと思ったらもう終了した。
思わず「早っ!」っていったよね。
マジで爆速でした。びっくりした。
ところで通常でnpxコマンドになるときはpnpxでいいようです。
一瞬迷った。

そんなわけで明日は3章からやっていきます。
↓明日の開始地点


この記事が気に入ったらサポートをしてみませんか?