# Next.js チュートリアル（後半）
## 5. 動的ルーティング
### 外部ルーティングが必要なケース
4ではページ内容が外部データの場合であったが、今回はページのパスが外部データに依存する場合を扱う。
Next.jsでは動的なURLが利用可能である。
動的ルーティングを用いて静的にページを生成する。
### 実習ステップの概要
1. pages/postsの下に、[id].jsというページを作成する。[]を用いたページは動的なページとなる。同ファイルに記事をレンダーするコードを記述する。
2. getStaticPathsというasync関数をエクスポートする。なお、idはとりうる値のリストとなる。
3. getStaticPropsを実装する。paramsの中にidが含まれており、そのidに基づいて必要なデータを取得する。

### マークダウンをレンダーする
1. npm install remark remark-htmlを実行し、remarkライブラリを入手する。
2. posts.jsにインポートし、getPostData()でremarkを利用できるように書き換える。なお、remarkに対してawaitを適用させるため、functionをasync functionにする。
3. [id].jsで、awaitをgetPostDataの前に追加する。また、HTML文の部分は、dangerouslySetInnnerHTMLにPostData.contentHtmlを代入してレンダーする。

### ブラッシュアップ（リファクタリング）
#### 投稿ページにtitleを追加する
[id].jsのヘッダー部分にtitleタグを挿入し、タイトルを追加する。
#### 日付のフォーマットを整える
1. date-fnsライブラリを入手する。
2. components/date.jsを作成し、Dateコンポーネントを作成する。
3. 最後に[id].jsでインポートして利用する。
4. 日付がJanuary 1, 2020と、形式的になっていることを確認する。
### CSSを追加する
[id]. jsのHTML生成部分のarticleタグにに追加でCSSコードを適用する。
#### インデックスページを磨き上げる
index.jsにLinkとDateをインポートし、それぞれのコンポーネントを利用するタグに書き換える。

### オプション
#### 外部APIの取得、DB問い合わせ
getSortedPostsDataは、外部のAPIエンドポイントからデータを取得したり、ファイルではなくデータベースから取得することもできる。これは、getStaticPathsがサーバサイドでのみ実行されるために可能となる。クライアントサイドでは実行されない。
#### 開発環境と本番環境
getStaticPathsは、開発環境ではリクエストごとに、本番環境ではビルド時にのみ実行される。
#### Fallbackと404ページ
getStaticPathsには、fallbackがfalseで設定されている。これは、getStaticPathsから正規のreturnを得ないパスを、全て404 Page Not Foundとするものである。404ページを独自に作成することもできる。
fallback=trueの場合、ビルド時に無かったパスにアクセスしても、404ページにはならず、fallbackバージョンを提供する。
#### 全ルートをキャッチする
動的ルーティングにおいて、三点ドットを指定すると、全てのパスをキャッチできるようになる。
#### ルータへアクセスする
Next.jsのルータにアクセスするには、next/routerからuseRouterフックをインポートする。

## 6. APIルート
### そもそもAPIって？
API(Application Programming Interface)は、アプリケーションやソフトウェアとプログラムをつなぐ役目を持つ。すなわち、ソフトウェアが外部アプリと連携するために設けた窓口のことである。
### APIルートを作成する
APIルートにより、Next.jsアプリにAPIエンドポイントを作成できる。
pages/apiの中に、hello.jsファイルを作成する。

### APIの使用例
フォーム入力の処理
APIルートにPOSTリクエストを送信することで、DBに直接保存ができる。
### オプション
#### getStaticProps(あるいはPaths)からはAPIルートはフェッチすべきではない
サーバーサイドでのみ実行されるため、クライアントサイドで実行されるAPIとは相性が合わない。
#### プレビューモード
ヘッドレスCMS(Content Management System)：コンテンツ管理システムのうち、コンテンツ表示のビューに当たる部分が無いもの
ヘッドレスCMSで下書きし、すぐにページ上でプレビューしたい時には理想的ではない。そこで、プレビュー可能なプレビューモードがあり、APIルートを利用している。
### 動的APIルート
APIルートも動的ルートが可能である。

## 7. Next.jsアプリをデプロイする
### Vercelプラットフォームを利用する
Vercelプラットフォームとは、Next.jsの製作者によって開発された、本番環境プラットフォームである。
オールインワンのプラットフォームで、デプロイに最適な場所である。
デプロイに成功すると、1つのアプリとして、ローカルホストを通さずに動かすことができる。
[Vercel](https://vercel.com/signup)

### Vercelの特徴
Next.jsの製作者が開発したため、サポートは非常に手厚い。
デフォルトで以下の2点が行われる。
* 静的生成ページとアセット（JS, css, メディア, フォント等）は、Vercel Edge Networkから自動的に提供される。
* サーバーサイドレンダリング・APIルートは、他と分離されたサーバレス関数となる。
他にもカスタムドメイン、環境変数設定、自動HTTPS等の機能を備える。

また、npm run buildを行って、.nextフォルダに本番用アプリをビルドし、npm run startで実行できる。

### DPSのワークフロー
Develop(開発)→Preview（プレビュー）→Ship（シップ：本番環境への移動）

## 8. TypeScript
### アプリインストール
npm init next-app nextjs-blog --example "https://github.com/zeit/next-learn-starter/tree/master/basics-final"

### Next.js固有の型
* getStatic(又はServerside)Props(又はPaths)用に、GetStatic(又はServerside)Props(又はPaths)型を使用できる。
* 同様に、APIルートのreq, res用に、NextApiRequest, NextApiResponse型を利用できる。
* _app.jsでは、AppPropsというビルドインの型を利用できる。

### TypeScriptへ書き換える
1. 空のtsconfig.jsonを作成する。→ ※Windowsで空ファイルを作るを参照
2. typescript及び、@types/react, @types/nodeをダウンロードする。→npm install --save-dev typescript @types/react @types/node
3. ファイルをそれぞれjs→tsx(又はts)に合わせたものに書き換える。
4. remark-htmlの型定義を加えるtsファイルを作成する。

#### ※Windowsで空ファイルを作る
Macはtouch tsconfig.jsonでOKだが、Windowsはtouchは認識されない。そこで、以下の手順で作成する。
1. 空のファイルをコピーする。　copy nul ファイル名（拡張子込み）
2. ファイル形式を合わせる。　type nul > ファイル名（拡張子込み）

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