Next.jsでbuild前に特定の処理を実行したい！サンプルと合わせて紹介

Next.jsでビルドをする前に特定の処理を実行したい・・。

例えばJSONを生成したり、ファイルのコピーをしたり。

公式で用意されているだろう、と思っていたのですが調べてみるとどうやらnext buildする前に特定の処理をする方法は用意されていませんでした。

Vueでよく使われるNuxt.jsであればhookが用意されているので、処理を登録するだけなんですけどね・・。

同じようなことをしたいと思い、仕方なく```next build```コマンドの前に自分で処理を走らせるようにしてみました。

TypeScriptを使った例を紹介していきます

目次

1. 実行したい処理をnext build前に実行
   1. 特定の処理を記述したファイル
   2. ビルド前に実行するファイル
2. package.jsonに設定
3. buildコマンドで特定の処理後にnext build

実行したい処理をnext build前に実行

まずはルートにhooksというディレクトリを作ります。

その中にはビルド前に呼び出すファイル（hooks/before.ts）と特定の処理を記述したファイル(hooks/scripts/hello.ts)を用意。

1
2
3
4
5
hooks
| -- before.ts
| -- scripts
    | -- hello.ts
package.json

特定の処理を記述したファイル

特定の処理を行うファイルは非同期の処理も扱いやすいように下記のようにPromiseを返すようにしておきます。

1
2
3
4
5
6
7
8
export default () => {
  return new Promise((resolve) => {
    // 実行したい特定の処理を記述
    console.log('Hello') 
    
    resolve()
  })
}

ビルド前に実行するファイル

ビルド前に呼ぶメインのファイルで実行したい処理をPromiseの配列にして、行うようにしました。

1
2
3
4
5
6
7
8
9
10
11
import hello from './scripts/hello'

let promises = [
	hello()
]

;(() => {
  await Promise.all(promises).then(() => {
	process.exit()
  })
})()

もし特定の処理を待ってから違う処理を行いたい場合は先に行う処理をawaitもしくはthenのコールバックで処理を走らせます。

1
2
3
4
5
6
7
8
9
10
;(async () => {
  await hello()
  console.log('hello()の後に実行')
})()

//or

hello().then(() => {
  console.log('hello()の後に実行')
})

package.jsonに設定

next buildの前に用意した処理を行うためにpackage.jsonのbuildコマンドを編集します。

1
2
3
4
5
{
  "scripts": {
  	"build": "ts-node --project tsconfig.build.json -r tsconfig-pahts/register hooks/before.ts && next build"
  }
}

tsconfig-pathsを使っているので合わせてインストールが必要です。

1
npm install -D tsconfig-paths

tsconfig.build.jsonはNext.jsで生成されるのとは別に用意しておくのがおすすめです。

Next.jsで生成されたtsconfig.jsonだとmoduleがesnextになっているので、tsconfig.build.jsonはcommonjsを指定します。

commonjsを指定する理由は実行する処理を書くときにimportを使う時に下記のようなエラーが発生してしまうからです。

1
SyntaxError: Cannot use import statement outside a module

buildコマンドで特定の処理後にnext build

Next.jsではデフォルトでbuildコマンド前に特定の処理を実行する仕組みがないので、package.jsonで自分で用意した処理を走らせてからbuildコマンドを叩くようにしてみました。

今回紹介したように自分で処理を用意して対応は可能ですが、やはり公式で仕組みが提供される方が便利だと思うので今後のアップデートに期待したいです。