homehome

Next.js 11の変更点

Next.js
Published

ほとんど公式の解説に沿っているだけですが、簡単にいくつかの変更点を見ていきます。このページで扱っているパッケージのバージョンは以下です。

  • next: 11.0.0
  • react: 17.0.2
  • eslint: 7.29
  • eslint-config-next: 11.0.0

ESLint

ESLintが結合され、next lintというコマンドが利用できるようになった。今までプロジェクトにESLintを導入しておらず、.eslintrcが存在しない場合はextends: "next"で構成された同ファイルが作られる。既にESLintを導入している場合は、次のような構成を加えるといい。

module.exports = {
  extends: [
    //...
    'plugin:@next/next/recommended',
  ],
}

デフォルトではビルド時に自動lintも行われ、eslint-config-nextが導入されていなければインストールしろとのメッセージが表示される。その場合、パッケージをインストールします。

yarn add eslint eslint-config-next

自動lintを無効化したい場合は、next.config.jsに設定を加える。

module.exports = {
  eslint: {
    ignoreDuringBuilds: true,
  },
}

尚、eslint-config-nextは以下のプラグインの推奨ルールを拡張している。

  • eslint-plugin-react
  • eslint-plugin-react-hooks
  • eslint-plugin-next

lint対象のディレクトリは、page/, components/, lib/の全ファイルで、サブディレクトリの下にこれらのディレクトリがネストされていても機能する。それ以外のディレクトリを対象にするには、next.config.jsで行う。例えば、src以下のすべてを対象にしたいなら次のようになる。

module.exports = {
  eslint: {
    dirs: ['src'],
  },
}

この設定はプロダクションビルド時のみ有効です。コマンドの場合は--dirを使用します。

yarn next lint --dir src

package.jsonのscriptsも同様です。

{
  "scripts": {
    ...
    "lint": "next lint --dir src",
  }
}

Core Web Vitals

Core Web Vitalsとは、GoogleがWebページにおいてのユーザーエクスペリエンスで重要と考えている特定要素のこと。現在は、LCP（Largest Content Paint）、FID（First Input Delay）、CLS（Cumulative Layout Shift）が指標になっている。2021年6月からGoogleはこれらの値をSEOの順位影響に組み込んでいる。

Conformanceは、Core Web Vitalsを実現するためのソリューションおよびルールを提供するシステム。今回発表されているConformance for Next.jsは、そのNext.js用のガイドラインのようなもの。

これを導入するには、.eslintrcにnext/core-web-vitalsを追加するだけ。この構成自体はオプションであり、なくても組み込みのESLintは動作します。

extends: [
  ...,
  "next/core-web-vitals",
],

実際には、eslint-plugin-react-hooks（plugin:react-hooks/recommended）などが警告で表示されます。

スクリプトの最適化

Scriptコンポーネントでサードパーティのスクリプトに読み込みの優先度をつけることができるようになった。strategy propsに以下のプロパティのいずれかを割り当てるだけ。

  • beforeInteractive: ページがインタラクティブになる前にフェッチして実行する必要があるスクリプト
  • afterInteractive: ページがインタラクティブになった後、フェッチして実行するもの。
  • lazyOnload: アイドルタイムに遅延して読み込むようなスクリプト

next/image

画像は先に述べたCore Web Vitalsに影響を与える大きな要素であり、next/imageは改善手段が追加されている。

サイズの自動検出

importで読み込んだローカル画像は、widthとheightを省略できるようになった。

import Image from "next/image";
import author from "../public/me.png";

export default function Home() {
  return (
  	<Image src={author} alt="Picture of the author" />
  );
}

外から読み込む画像は今までどおり、layout="fill"でなければwidthとheightは必要です。

ぼかしプレースホルダー

以前から要望のあった"ぼかし"プレースホルダーが導入された。placeholder="blur"を追加するだけでいい。

<Image src={author} alt="Picture of the author" placeholder="blur" />

外部画像も利用できる模様。

<Image
  src={"画像URL"}
  blurDataURL={"base64でエンコードされたData URL"}
  alt="Picture"
  placeholder="blur"
/>

blurDataURLの画像は10px以下が理想らしく、サイズが大きいとパフォーマンスが寧ろ下がってしまうと記載されている。エンコード自体よりも、各画像のぼかし元の画像を用意するのは手間がかかるかもしれない。1つの画像を使いまわすなら問題ないですが。

例えばContentfulでは、画像アセットの末尾に?w=200&h=100のようにクエリを渡すと動的にリサイズ画像が生成できる。こういった機能が自身の利用しているCMSやサービスに実装されていないか調べてみるといいと思う。

その他の変更点

  • Creact React AppによるReactアプリをNext.jsに移行する@next/codemodの追加
  • コラボレーション開発を促進するNext.js Liveの追加
  • Webpack 5への完全移行

今回から下位互換が切られているAPIがあり、古いバージョンを使っている場合はアップグレードガイドをよく読んでおいた方がいいと思う。ビルド時にビルド出力ディレクトリ（.next）がクリアされるようになったなど、細かな変更点も加えられている。