【8章】Next.js基礎学習＋課題の振り返り

8章合格いただきました！

8章はNext.Jsの基本的な使い方を学ぶ章でした。

内容としては参考本を読んでNest.Jsの基本を理解→７章でTypeScriptに書き換えたファイルファイルを使い、VSCode上でそれをNext.Jsように編集していくイメージです。

例えば、今までは〇〇Index.tsxのように何のページかファイル名でも表していましたが、Next.Jsはクライアントが見ることになるページは全てpage.tsxというファイル名になります。ポイントはpage.tsxは表示したいファイルをimportして読み込んで表示する仕組みです。もう一つ特徴的なのはどのpage.tsxをかくのするフォルダ名で、このpage.tsxは記事の詳細ページのpage.tsxなんだと分かるようにするというところでしょうか。

基本フォルダの中にはpage.tsxファイルとpage.tsxファイルにimportするファイルを、_componentsフォルダに入れてimportすること。componentsフォルダは先頭に_を付けます。あとは詳細ページや編集ページなど[id]を使うものに関しては、post/[id]/の中にフォルダを作成し、その中にpage.tsxファイルと_componentsフォルダを作る。_componentsフォルダの中に記事詳細ページのtsxとcssファイルを入れるみたいな感じです。

Next.Jsように書き換える内容の一例としては、Reactの時はLinkを使う時はnpm install react-router-domをターミナルで打ってreact-router-domをインストールしたりしなければいけませんでしたが、Next.Jsにはもともとその機能が備わっているのでインストールする必要はなく、importの時もimport Link from "next/link";とするなど、内容としては、本当に基本の基くらいの内容でした。

でも一気に大量の内容をこなすとなると壁がデカすぎて心折れる人もいると思うし、１週間くらい離れてリフレッシュしてから挑戦しよう！なんて人も現れてきそうなので、サクッと１日あれば余裕で終わる内容で収まっているのは秀逸だと思っています。
さて次の９章からはいよいよバックエンド編に突入です！
PHP/Laravelをやっていたのでその経験や感覚を生かしてスムーズにサクサクと進めてい行きたいです(^^♪