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

概要

さっきこれを読んだ。

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もっと書きやすくなりそうね