Next.js 12 を試してみた

Next.js 12 がリリースされて、「~3x faster Fast Refresh and ~5x faster builds」がとても気になるので、ちょっと、試してみました。

まずは、ディレクトリを作って、その中に設定していきます。あえて、create-react-app を使わないようにしています。

$ mkdir next-12
$ cd next-12
$ npm init -y
Wrote to /.../next-12/package.json:

{
  "name": "next-12",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
$ npm install next react react-dom
...

TypeScript で書きたいので、インストールして、あとで、Next.js に設定してもらうように空の tsconfig.json を作っておきます。

$ npm install --save-dev typescript @types/react
...
$ touch tsconfig.json

ページ用のディレクトリを作って、src/pages/index.tsx に以下のようなページを作成します。

$ mkdir -p src/pages

import React from "react";
import NextPage from "next/page";

const Index: NextPage = () => {
  return <div>Hello Next 12</div>;
};

export default Index;

そして、開発用サーバーを起動します。

npx next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
We detected TypeScript in your project and created a tsconfig.json file for you.

event - compiled successfully in 2.6s (159 modules)

そして、http://127.0.0.1:3000 にウェブブラウザでアクセスして、「Hello Next 12」と表示されたら完成です。

Next.js 12 になって、「in 2.6s (159 modules)」のようにビルドにかかる時間が表示されていますね。

比較として、Next.js 11 でも同じような手順で試してみましたが、あまり変わりがありませんでした。作ったファイルが短くて、単純なためなのでしょうか…Next.js 11 と 12 共にnode_modules/@next の中に swc-darwin-x64 （macOS で試しているので）というディレクトリがあって、Next.js 11 でも swc を使っていたのでしょうか？