Next.jsで自己紹介サイトを作った。

巷では、「Next.js」が流行っているらしいですね。

今回は、「Next.js」の勉強のために自分の自己紹介サイト↓を作ったので、忘備録を書きます。

独学なので、技術的な内容は正しくない可能性があります。
もし誤りがあれば、コメントで教えていただけると幸いです。

Next.jsとは？

Reactの機能を拡張するためのJavaScriptフレームワーク。
サーバーサイドレンダリング(SSR)ができるのがウリ。

みたいな感じだと捉えています。

追記：もう古いみたいです。↓

サーバーサイドレンダリング(SSR)とは？

ページを表示する方法にはいくつかあって

- クライアントサイドレンダリング(CSR)

→「サーバーから送られてきたファイル」を元に、ブラウザでページの見た目を作る。
（シンプルなHTML/CSS/JacaScriptのページがこれ。）

- シングルページアプリケーション(SPA)

→「サーバーから送られてきた最低限必要なファイル」を元に、JavaScriptでページの見た目を作る。
(Reactがこれ。)

- サーバーサイドレンダリング(SSR)

→「Node.js（サーバー側のJavaScript）で見た目を作った状態のページ」がブラウザに送られてくる。
(Next.jsがこれ。)
　
シングルページアプリケーションは、JavaScriptで見た目を切り替えるので、表示を切り替る速度が速い。
サーバーサイドレンダリングは、あらかじめ出来上がったものを送ってくるので、ページの表示速度が速い。
みたいな感じでしょうか。

Next.jsを使うまでの ざっくりとした流れ

試したOSはWindows10です。

①Node.jsをインストールする。

公式サイトからインストーラをダウンロードします。

インストーラーを使ってNode.jsをインストールします。

②パッケージマネージャをインストールする。

「npm」や「yarn」が有名っぽいです。
昔は、yarnの方が便利だったみたいですけど、現在は大きな差は無いみたいです。

今回は、勉強も兼ねてyarnを使いました。

npmは、Node.jsをインストールしたら使えるので、npmを使って

$ npm install -g yarn

↑コマンドを入力するとyarnをインストールできます。

③パッケージマネージャを使ってNext.jsの環境構築をする。

任意のフォルダにcdコマンドで移動した後

npx create-next-app

↑コマンドを入力します。
次に、「名前どうする？」みたいな質問をされるので、一通り答えます。
すると、任意のフォルダ内に、Next.jsを動かすのに必要なファイルを作ってくれます。

ファイルが出来上がったら、任意のフォルダ内で

yarn dev

↑コマンドを入力すると、ローカルサーバーが立ち上がって
（たぶん）**http://localhost:3000/**からページを確認可能になります。

ローカルサーバーを止めるときは「Ctrl＋C」です。

詳しくは公式ドキュメントを参考にしてみてください。
https://nextjs.org/learn/basics/create-nextjs-app/setup

詰まったところ

TailwindCSSの導入

ドキュメントにやり方が書いてありました。

Googleアナリティクスの導入

こちらの記事が参考になりました。

その他　参考にさせていただいたページや動画