巨人の足元でたじlog

そうして言葉を軽んじるから――― 君は私の言葉を聞き逃す

フロントエンド初心者がNext.jsを習得してみる

Next.js

チュートリアルをやっていきたいと思います。
https://nextjs.org/learn/basics/create-nextjs-app しかし、英語しかないのか？

https://nextjs-ja-translation-docs.vercel.app/docs/getting-started 一応非公式日本語翻訳サイトはあったが、これは新鮮なのか？
これは、新鮮かどうか以前にチュートリアルはないっぽい.

本家英語サイトをDeepLを駆使して読んでみるか。
そろそろ日本語やってみた記事を読むレベルから脱却したいので。
ページまるごと翻訳だとDeepLだと有料なので、なくなくGoogle翻訳で対応することにした。 月額750円はちょっと高い、、300円なら考えた、、！
しかし、ぱっと見Google翻訳でも精度悪くなさそう。よし。

チュートリアルを進めていく

全体像把握

ブログアプリを作るチュートリアル
- Next.js アプリを作成する
- ページ間を移動する
- アセット、メタデータ、CSS
- 事前レンダリングとデータ取得
- 動的ルート
- API ルート
- Next.js アプリのデプロイ

このあとも検索エンジン最適化の章もありましたが、そこは一旦保留で良いかなと思います。

Next.js アプリを作成する

前提知識としてJavascriptとReactが必要とのこと。
Reactのチュートリアルやろうっかな。
3年くらい前に一度途中までやった気がする。同じチュートリアルかどうかはわからないけど。
Nextを途中まで進めてみて、React前提の知識が多すぎたら中断してReactのチュートリアルを進めることにする。○×ゲームを作るチュートリアル。面白そうだし、そんな大変でもなさそうなので。
やっちゃうか？2時間くらいで終わりそう。
やっちゃう。 https://ja.reactjs.org/tutorial/tutorial.html

ブラウザ上で実行できるplaygroundが用意されているので、それを使用します。環境構築は別途Next.jsで必要になると思うので。

チュートリアルやった。
最後の「タイムトラベル機能の追加」は流してやった。
いよいよ本番のNext.jsに入る。

Next.js チュートリアル

node.jsの確認

node -v
v16.16.0

入っていた。

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

開発サーバーを立ち上げる

npm run dev

早っ！
これで
http://localhost:3000/
にアクセスするだけで表示できる。

indexページを変更。
変更がサーバーやブラウザの再起動をせずにすぐにブラウザに反映される。
これがFast Refleshという。ストレスなく開発できそう。

画像はいい感じにリサイズとかして配信してくれる。
ブラウザの表示領域(view-port)に来たときに読み込まれる。

サードパーティーのscriptの読み込みのタイミングも、ブラウザが暇なときにやってくれるオプションとかある。next/scriptでやる

Next.js用のvscode拡張機能を入れたい

JSXの部分を書くときにコード補完がうまく働いてくれない。 JS JSX Snippetsを入れてみる。
効かなさそうだな。。

https://www.servs.jp/emmet-setting-when-html-tags-are-not-completed-by-reacts-jsx-in-vscode-2215/ これだ、最高、ありがとう。

リンクのコードをバックグラウンドで自動的にプリフェッチしてくるので、ページ遷移が一瞬。

プリレンダリング データフェッチについて話す前に、Next.jsの最も重要な概念のひとつについて説明します。プリレンダリングです。

デフォルトでは、Next.jsはすべてのページをプリレンダリングします。これは、クライアントサイドのJavaScriptですべてをおこなうのではなく、Next.jsがあらかじめ各ページのHTMLを生成しておくことを意味します。プリレンダリングは、パフォーマンスとSEOの向上につながります。

生成された各HTMLは、そのページに必要な最小限のJavaScriptコードと関連付けられています。ブラウザがページを読み込むと、そのJavaScriptコードが実行され、ページが完全にインタラクティブになります。(このプロセスをハイドレーションと呼びます）。

メタデータを読み取るためのやつをinstall

npm install gray-matter

ローカルファイルストレージからデータを取得する。
Static Generation

静的生成はビルド時にHTMLをプリレンダリングする。プリレンダリングされたHTMLは、リクエストごとに再利用される。
サーバーサイドレンダリングは、リクエストごとにHTMLを生成するプリレンダリング方式。
ページごとにどちらの方式を使用するか選択することができる。

ユーザーダッシュボードとかはSEO関係ないし、CSRでいい。
クライアントサイトレンダリングは、ビルド済みのHTMLを返して、必要な部分だけクライアントが別途リクエストを送って、レスポンスをHTMLに組み込む。合ってる？

vscodeのdiffを見る拡張機能

https://pa-tu.work/blog/vscode-clipboard-diff ファイル保存をしないでもdiffが取れる。
ファイル単位じゃなくて、同じファイルの中の選択した部分同士を比較することもできる。
これで正解コードと自分で書いたコードの差分を見てtypoとかをぱっと探せるようになった。

Module not found: Can't resolve 'fs'　エラー

https://fullstacklife.net/programming/nextjs/nextjs-module-not-found-cant-resolve-fs/

これをみて、設定ファイル変更するかーと思ったけど、Next.js用のGithub Issueに回答があった。 https://github.com/vercel/next.js/discussions/12124

しかし、結論、チュートリアル内でどうすれば良いのかがわからなかった。
Next.jsにもう少し触れてみたら、ああなるほどねってなるのかもしれないが。

https://gotohayato.com/content/553/ これもちょっと、チュートリアルに当てはめて考えることができていない。全体を理解・把握していないからだ。

remarkのインストール

npm install remark remark-html

date-fnsのインストール

npm install date-fns