Nextにプラグイン追加したりgzip対応した話

こんにちわ、ななきです。

最近Nextを触ることが多かったので、webpack周りのプラグインの追加だったりgzip対応について書いてみたいと思います。

多分このへんはサービス運用するにあたってTS化したり速度改善したりと必要になってくるので目を通しておいて損はないと思います。

プラグインの追加

Nextのプラグインは結構豊富です。

私はこの中でTypeScriptとbundle-analyzerを使う機会がありました。

通常一つプラグインを追加する場合は下記のように書くようです。

const withTypescript = require('@zeit/next-typescript')

module.exports = withTypescript({
  // webpackとかの記述
})

ただ、これだと複数のプラグイン使う場合どうするのって感じですよね。

複数使う場合はコミュニティプラグインのnext-compose-pluginsを使うか下記のような書き方をするようです。

const withTypescript = require('@zeit/next-typescript')
const withBundleAnalyzer = require('@zeit/next-bundle-analyzer')

module.exports = withTypescript(
  withBundleAnalyzer({
    analyzeServer: ['server', 'both'].includes(process.env.BUNDLE_ANALYZE),
      analyzeBrowser: ['browser', 'both'].includes(process.env.BUNDLE_ANALYZE),
      bundleAnalyzerConfig: {
        server: {
          analyzerMode: 'static',
          reportFilename: '../bundles/server.html'
        },
        browser: {
          analyzerMode: 'static',
          reportFilename: '../bundles/client.html'
        }
      },
      {
        // webpackとかの記述
      }
  })
)

2つ3つであればこのように入れ子でもいいかもしれませんが可読性が良くないので状況に応じてnext-compose-pluginsを使用するほうがいいかもしれませんね。

ちなみに上記の設定だとbundle-analyzerは下記コマンドで実行します。

BUNDLE_ANALYZE=both next build

そしてTypeScriptに関してはtsconfigの用意とbabelrcに下記の追加で動いてしまいます。

"presets": [
  "@zeit/next-typescript/babel"
],

便利な世の中ですね

gzip対応

これはびっくりするほど簡単でした。

yarn add compression をして、下記の様にserver.jsに記述するだけです。

const express = require('express')
const compression = require('compression')

const server = express()
server.use(compression())

ちなみにホスティングがGCPで、設定については以前書いた記事を参考にしてください。

gzip対応したらスピードテストのスコアがそれぞれ10前後伸びたので対応しておいて損はなさそうです。

初めてちゃんとgzip学びましたがすごいです(すごいです)

まとめ

Nextは英語の情報多めなので少し情報追うのが大変ですが、やりたいことは多少頑張ればできる感じですね。

今後もNextで開発してく機会があるので適宜まとめていきます。