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


概要

さっきこれを読んだ。

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

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

スクリーンショット 2019-07-09 2.25.06.png


目玉要素


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.jsqueryオブジェクトの中に { 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でよしなに出来る。

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

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


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

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

prerender-indicator.png

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

画面収録 2019-07-09 2.23.11.mov.gif


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