Next.jsのデフォルトの設定は以下のようになっている。

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

module.exports = nextConfig;

複数のプラグインを使用して同時に束ねるために、next-compose-pluginsを使用する。

$ yarn add next-compose-plugins

pluginsに追加したいプラグインを記述していく。

next.config.js

const withPlugins = require('next-compose-plugins')

const nextConfig = {
  reactStrictMode: true,
};

// ネストしたい順に配列に渡す
const plugins = [];

module.exports = withPlugins(plugins, nextConfig)

shimakaze_soft

@next/bundle-analyzer (バンドルアナライザ)

Next.js が公式に提供しているバンドルアナライザ。

不要なモジュールがバンドルされていないか、あるいは一部ページでしか使われていないモジュールが共通部分にバンドルされていないかなどを確認して、パフォーマンス改善に役立てることができます。

設定方法は以下になります。
pluginsに追加していきます。

next.config.js

...

// バンドルアナライザ
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

// ネストしたい順に配列に渡す
const plugins = [
  withBundleAnalyzer
];

module.exports = withPlugins(plugins, nextConfig)

起動にはpackage.jsonのscriptsにANALYZE=trueを記述する必要があります。

{
  ...
  "scripts": {
    "dev": "ANALYZE=true next dev",
    "build": "ANALYZE=true next build",
    ...
  }
  ...
}

shimakaze_soft

next-transpile-modules (モジュールトランスパイル)

node_modules内の指定パッケージを、ビルド時にトランスパイルするためのプラグイン。

IE11のサポートが2022年の6月で終了するものの、サービスの特性上IEでの動作を考慮し続けなければいけないという状況もあります。

モジュールによってはトランスパイルしないとIEで動かないものもあるため、そうったものを対象に指定して使用する。

netxt.config.js

# トランスパイルしたいモジュールを記述していく
const withTM = require('next-transpile-modules')([
  'somemodule',
  'and-another'
])

const plugins = [
  withTM
];

module.exports = withPlugins(plugins, nextConfig)

shimakaze_soft

next-with-split

ブランチベース・CDNベースでA/Bテストを行うためのプラグイン。

使い方の詳細は以下に詳しく載っています

shimakaze_soft

@sentry/nextjs

エラーの補足のためのツールとしてSentryがあり、それをNext.jsに設定するための公式のプラグインです。

https://sentry.io/welcome/

今年の春まで公式のサポートがありませんでしたが、Next.js に導入する場合には、サーバーサイドには@sentry/nodeを、クライアントサイドには@sentry/browserを入れることで対応するのが一般的でした。

# 自動的にブラウザが立ち上がるのでログインする
$ npx @sentry/wizard -i nextjs

これら3つのファイルが自動生成される。

sentry.client.config.js : クライアントサイド用の設定ファイル
sentry.server.config.js : サーバサイド用の設定ファイル
sentry.properties : 共通の設定値(トークンなど)の設定ファイル

※ sentry.properties に関しては環境変数によって代替可能

const { withSentryConfig } = require('@sentry/nextjs')

module.exports = withSentryConfig({
  // next.jsの設定
}, {
  // Sentery の webpack に関する設定
})