# Next.js チュートリアル（前半）
## 1. Next.jsアプリを作る
### Next.jsアプリの作成
npm init next-app nextjs-blog --example テンプレートアドレス
以上を入力すると、create-next-appが呼ばれて、Next.jsアプリを立ち上げる。
＜気づいた点＞
* これまでのcreate-react-appと異なり、create-next-appとなっている。
* また、reactの起動はyarn startだったが、Next.jsの場合はyarn devとなっている。

### ホットリローディング
**ホットリローディング**とは、アプリ起動中にソースコードを編集した際に、自動的にブラウザ内で変更を適用すること。サーバを再起動させることなく即実行できるため、開発の繰り返しを素早く行える。

## 2. ページ間の移動
### Next.jsにおけるページ
動作するアプリケーションのソースコードは、Reactアプリではsrcフォルダに入っていたが、Next.jsではpagesフォルダに入っている。
ページは**ファイル名に基づいて**ルーティングに関連付けられる。
pages/index.jsを「/」とし、以下のファイル・フォルダ名が記述される。

### 他ページへの移動
Next.jsではpagesフォルダ内にJavaScriptファイルを作成すれば、そのファイルへのパスがURLのパスになる。

### Linkコンポーネント
Linkコンポーネントは、ハイパーリンクを行うaタグを含んだコンポーネントである。
Linkコンポーネントでは、href内の宛先に対し、aタグでリンクの文言をくくる形でリンクを作成できる。

<Link href="/">
    <a>Back to Home</a>
</Link>

#### Linkコンポーネントの特徴　クライアントサイドのナビゲーション
このLinkコンポーネントは、**クライアントサイドのナビゲーション（ページ遷移）機能**を持つ。
ページ遷移を行う際、リンク先のページ全体をブラウザでロードするのではなく、**JavaScript上でページ遷移を行い、必要なページのみ読み込んで表示する。
ブラウザのロードよりも高速で処理できる**のみならず、リアルタイムのコード変更にも即座に対応できる。

### コード分割とプリフェッチング
Next.jsでは自動的にコード分割を行うため、ページの読み込みは必要最低限のものだけを読み込む。
したがって、あるページでエラーが発生しても、アプリの他の部分は動作し続ける。
本番環境では、Next.jsは自動的にバックグラウンドにプリフェッチする。

## 3. アセット、メタデータ、CSS
### アセット
アセットとは、画像などの静的なファイルの受け渡しに用いる。
静的なファイルは、publicフォルダに配置される。
静的フォルダを記述する際はPowered byの後ろにパス(src)とファイル名(alt)を指定する。

Powered by <img src="/vercel.svg" alt="Vercel Logo" />

### メタデータ
Next.jsで作ったページにおいて、headタグに変更を加える。
headタグに代えてReactコンポーネントの一つであるHeadタグを利用して記述する。
headタグ同様に、Headタグにtitleタグを追加できる。

### CSSスタイリング
styled-jsxというライブラリを用いて、css要素を記述できる。
Layoutコンポーネントでは、cssファイルをインポートして、配置の枠組みを記述している。このLayoutコンポーネントを各ページでインポートすることで、配置が適用される。
なお、cssモジュールは一意なクラス名を自動的に作成してくれる。また、コード分割はcssに対しても適用される。

### グローバルなスタイリング
コンポーネントレベルではなく、全ページで共通のCSSを読み込ませたい場合、_app.jsというトップレベルのコンポーネントから、グローバルCSSをインポートする。
このファイル以外からのグローバルCSSのインポートは不可能である。

### Layoutを磨き上げる
実践的なレイアウトを追加し、プロフィールページを作成する。
#### 1. コンポーネントレベルのレイアウト
components内のlayout.module.cssに記述する。ヘッダーのイメージ関係が中心となる。
#### 2. プログラム全体レベルのレイアウト
styles内のutils.module.cssを用いる。ヘッダーの大きさやテキストの色、商品の余白等を上手く調整されている。
#### 3. layout.js
1, 2とのコンポーネントを通じて、components内のlayout.jsを書き換える。Header部分の前半であるmeta部分は、ユニーク（一意）なnameと、呼び出される関数や文字列等が書かれたcontentの2要素を持っている。
後半はLinkコンポーネントを用いて、クライアントサイドナビ等の高速リンクに対してa要素を対応付けている。画像貼り付けの設定もこの部分で行う。
mainではホームに戻る部分のHTMLの枠組みを記述する。
#### 4. index.js
コンポーネントに分けていなかった時に働いていたコードをほぼ削除し、新たに全体的な処理について記述する。

## 4. プリレンダリングとデータフェッチング
### プリレンダリングとは
Next.jsは、全ページでプリレンダリング（HTMLの作成）を行う。その結果、パフォーマンスやSEO（検索エンジン最適化）性能が向上する。
HTMLは最小限のJavaScriptコードと紐づけられる。ブラウザが読み込む際にそのJavaScriptコードを読み込みHTML化する。ブラウザがHTMLに変換する作業は不要である。
このプロセスをハイドレーションといい、インタラクティブなページ作成が実現する。

プリレンダリングを行えば、JavaScriptを無効にしてもjsファイルが読み込める。
逆に通常のReactアプリは、JavaScriptを無効にすると読み込めない。

### プリレンダリングの形式
#### 静的生成
アプリのビルド時にHTMLが作成され、実行時にそれを読み込む。
基本的に可能であれば静的生成が推奨される。リクエスト毎にHTMLを作成する場合に比べて効率的で素早い。
リクエストに先立ってレンダリングできる場合に用いる。
（例）ブログ記事やマーケティングページ、商品リスト等

#### サーバーサイドレンダリング
サーバーへのリクエストがあった時に、サーバがリクエストごとにHTMLを作成する。
更新が頻繁な場合や、リクエスト毎に内容が異なる場合等はサーバーサイドレンダリングを用いる。速度では静的生成に劣るが、リアルタイムで最新状態が保たれるメリットがある。
HTML生成内容がリクエスト内容に依存する場合に用いる。
（例）株式市場、オークション等

#### 形式はページ単位で変更できる
ページごとに静的生成かサーバーサイドレンダリングのどちらかを選択できる。大部分を静的生成で、部分的にサーバーサイドレンダリングを利用するといったハイブリッドが可能である。

#### 外部データと静的生成
静的生成は外部データの有無によらず可能である。ビルド時に自動的に静的生成される。一部データを取得しないとレンダリングできない場合もあるが、そちらも追加設定なしで対応できる。

### getStaticPropsを使ったデータ有りの静的生成
外部データが在る場合の静的生成を行うには、getStaticPropsという非同期関数を生成しexportする。

#### getStaticPropsを使う
＜実習＞
1. ルートフォルダにpostsフォルダを作成し、pre-rending.mdとssg-ssr.md（mdはマークダウン）を作成し、ブログの内容をコピーする。
2. getStaticPropsでブログデータを解析する。マークダウンファイル読み込み時にgetStaticPropsで、propsとして読み込む記事のデータを取得できる。
3. glay-matter（マークダウン解析ライブラリ）をインストールする。
4. ファイルシステムからデータを取得するため、簡単なライブラリを作成する。ルートフォルダにlibというディレクトリを作成し、その中にposts.jsを作成する。post.jsにはマークダウンの解析処理と日付順のソートを記述する。
5. index.jsでgetSortedPostsDataをインポートし、propsのキー内部にリターンを記述する。また、表形式のアイテム管理表を作成する。

### オプション
#### 外部APIの取得、DB問い合わせ
getSortedPostsDataは、外部のAPIエンドポイントからデータを取得したり、ファイルではなくデータベースから取得することもできる。これは、getStaticPropsがサーバサイドでのみ実行されるために可能となる。クライアントサイドでは実行されない。

#### 開発環境と本番環境、exportの条件
getStaticPropsは、開発環境ではリクエストごとに、本番環境ではビルド時にのみ実行される。
また、getStaticPropsのexportはページからしか行えない。→Reactの性質上、レンダリング前に全ての必要なデータを準備する必要があるため。

#### サーバーサイドレンダリング
サーバーサイドレンダリングの際は、getServerSidePropsを用いる。
リクエスト時にデータを取得しなければならないページををプリレンダリングする際に用いる。
毎回レンダリングを行うサーバーサイドレンダリングの速度は、getStaticPropsよりも遅い。

多くの場合は、ページの静的生成を行うクライアントサイドレンダリングを用いる。
#### SWR
SWRはデータフェッチ用のReactフックである。キャッシング、再検証、フォーカストラッキング、再フェッチ等に対応している。

###### tags: `Next.js`