😀

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

2020/02/09に公開

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

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

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

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

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

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

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

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

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

hooks
  | -- before.ts
  | -- scripts
          | -- hello.ts
package.json

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

hooks/scripts/hello.ts

export default () => {
  return new Promise((resolve) => {
    // 実行したい特定の処理を記述
    console.log('Hello') 
    
    resolve()
  })
}

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

hooks/before.ts

import hello from './scripts/hello'

let promises = [
	hello()
]

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

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

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

//or

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

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

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

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

npm install -D tsconfig-paths

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

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

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

SyntaxError: Cannot use import statement outside a module

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

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