LoginSignup
90

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-07-08

概要

さっきこれを読んだ。

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
90