⚡︎ Next.js 9が出た：ご機嫌な話  ⚡︎

# 概要

さっきこれを読んだ。

https://nextjs.org/blog/next-9#developer-experience-improvements



Next.js 9が出るんだって！嬉しい〜！

![スクリーンショット 2019-07-09 2.25.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403150/0030d5bc-a99f-4031-8ed8-b4fad8499737.png)


# 目玉要素

#### TypeScriptが設定なしでビルトインで使える

TypeScriptを使えば型チェックができるため、アプリケーションの信頼性が増す。Next.js 9はTypeScriptのtsxをおけば自動でTypeScriptサポートするようになった。

#### ファイル構成でダイナミックルートを構築できる

カスタムサーバーを別に用意する必要なく、Next単体でダイナミックルーティングができるようになったので、複雑なアプリケーションが作りやすくなった。今までは、ダイナミックルーティングをしようと思うならば、exampleのcustom-server-ナンチャラ、例えば[custom-server-express](https://github.com/zeit/next.js/tree/canary/examples/custom-server-express)なりを参考に、サーバのミドルウェアとしてNextを走らせる必要があった分だいぶラクになった。

#### 静的配信における自動最適化

SSRと静的プレレンダリングを勝手に組み合わせて*ultra-fast[ママ]*なウェブサイトを作れるようになった。

#### API Routes

> Quickly build back-end application endpoints, leveraging hot-reloading and a unified build-pipeline.

なんや`pages/`配下に、`api`ディレクトリを作ることで簡単にバックエンドアプリケーション用のエンドポイントを作れるようになったらしい。まだ試していない。

#### プロダクション環境におけるさらなる最適化

*viewport*プレフェッチングと、その他の最適化技法を組み合わせて、アプリケーションの応答性が増したらしい。

#### 書き心地が良くなった（Developer Experience Improvement）

慎ましやかででしゃばらないし、使い勝手良いし、簡単に開発ができる。

すぐに使いたければ

```
yarn add next@latest react@latest react-dom@latest
```

すれば良い。

### アップグレードガイド

アップグレードガイドは[ここ](https://github.com/zeit/next.js/blob/canary/UPGRADING.md)にある。

`next/dynamic`がデフォルトで"loading..."を描画しなくなったことが破壊的変更の筆頭。

------

# 個人的に嬉しすぎるポイント

## TypeScript入れるのにまごつくことがなくなった

今まで`Next.js`でTypeScriptを書こう思う分には、`yarn add @zeit/next-typescript`して`.babelrc`を作り、`next.config.js`を書かねばならずで、辛気臭かった。

`Next.js 9`では`Next.js`が見るところに`ts`なり`tsx`なりを置くと自動で設定してくれる。

短絡的にいえば`pages/`配下に`index.tsx`書いて、`yarn next dev`すれば`Next.js`のデフォルトの`tsconfig.json`を自動的に設定してくれる。


型を書くとIDEの補完が良く効いて、これは嬉しい。あとは、TypeScriptがある状況で`Next.js`の開発サーバー(`next dev`)はTypeScriptの怒られを伝えるようになってくれた。（前からそうだった気がするけど、どうだったっけ？）



## 備え付けのDynamic Routeが付くようになった

例えば、 `pages/post/[pid].tsx`というページを作成すれば
* `localhost:3000/post/ホゲホゲ`
* `localhost:3000/post/フガフガ`
* `localhost:3000/post/ピヨピヨ`
みたいなURLは全部、`pages/post/[pid].tsx`によって描画されるページに流されるようになった。



`localhost:3000/post/ホゲホゲ`から`pages/post/[pid].tsx`に流された時、`Next.js`の`query`オブジェクトの中に `{ pid: 'ホゲホゲ' }`が入るようになっている。`query`オブジェクトは`useRouter()`フックの返り値`router.query`に入っている。



```js
import { useRouter } from 'next/router'

const Post:FC = () => {
  const router = useRouter();
  const { pid } = router.query;

  return <p>{pid}から流されてきた</p>
}

export default Post
```



`todo/[list]/[name].jsx`とかの場合は、`localhost:3000/todo/ホゲホゲ/フガフガ`から流れてきたら`{ list: 'ホゲホゲ',name:'フガフガ' }`といった寸法。ディレクトリ`.../[huga]/`につけて、それに対応するURIをなんとかしたければ`.../[huga]/index.jsx`でよしなに出来る。



ファイル名や、フォルダ名に[]という記号をつける習慣がないので、ギョッとするが、直感的で良い。



今までこんなんしようと思った日には、カスタムサーバーを立てねばならんで`express`の`route`かくなり`micro`の`micro-router`を書かなあかなんだりで、辛気臭かったが、これからは楽チンになりそう。



## Devサーバーでプレレンダリングされたら、右下に⚡︎マークのボタンが出来るようになって見た目にわかりやすくなった

最初はなんのボタンかわからずに不安になったけど。

 <img width="587" alt="prerender-indicator.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403150/90df0494-ac51-1dec-b07e-e60507b93097.png">


あとは再コンパイルしている時も三角マークのボタンが出るようになった。かっこいい。秘密結社っぽさがある。

![画面収録 2019-07-09 2.23.11.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403150/72b021d2-ef12-8b3d-943b-e117535c81b7.gif)


## `pages/api`配下に(req, res)のリクエストハンドラーを立てられそう？

今まで`Next.js`でAPIの何かを試そう思った時は、`graphql-yoga`とかを別に`localhost:4000`に立てて〜とかしていたが、以下の具合で`pages/api/index.ts`にこんな具合でreq,resハンドラーを作れるっぽい。

```js
export default function handle(req, res) {
  res.end('Hello World')
}
```

これはご機嫌な話だ。またじきに試そう。



# まとめ

- Next.jsもっと書きやすくなりそうね