概要
さっきこれを読んだ。
Next.js 9が出るんだって！嬉しい〜！
目玉要素
TypeScriptが設定なしでビルトインで使える
TypeScriptを使えば型チェックができるため、アプリケーションの信頼性が増す。Next.js 9はTypeScriptのtsxをおけば自動でTypeScriptサポートするようになった。
ファイル構成でダイナミックルートを構築できる
カスタムサーバーを別に用意する必要なく、Next単体でダイナミックルーティングができるようになったので、複雑なアプリケーションが作りやすくなった。今までは、ダイナミックルーティングをしようと思うならば、exampleのcustom-server-ナンチャラ、例えば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
すれば良い。
アップグレードガイド
アップグレードガイドはここにある。
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に入っている。
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サーバーでプレレンダリングされたら、右下に⚡︎マークのボタンが出来るようになって見た目にわかりやすくなった
最初はなんのボタンかわからずに不安になったけど。
あとは再コンパイルしている時も三角マークのボタンが出るようになった。かっこいい。秘密結社っぽさがある。
pages/api配下に(req, res)のリクエストハンドラーを立てられそう？
今までNext.jsでAPIの何かを試そう思った時は、graphql-yogaとかを別にlocalhost:4000に立てて〜とかしていたが、以下の具合でpages/api/index.tsにこんな具合でreq,resハンドラーを作れるっぽい。
export default function handle(req, res) {
res.end('Hello World')
}
これはご機嫌な話だ。またじきに試そう。
まとめ
- Next.jsもっと書きやすくなりそうね