Nextjsでレガシーブラウザ対応

概要

• Next.jsを使っているアプリでIE対応しないといけないような場合の対処法
• 公式のexample参考にしています

手順

• next.config.jsに以下の内容を追加

next.config.js

module.exports = {
  webpack: function(cfg) {
    const originalEntry = cfg.entry;
    cfg.entry = async () => {
      const entries = await originalEntry();
      if (entries['main.js'] && !entries['main.js'].includes('./client/polyfills.js')) {
        entries['main.js'].unshift('./client/polyfills.js');
      }
      return entries;
    };
    return cfg;
  },
};

• polyfillの設定
  • exampleでは以下のように個別に設定している

client/polyfills.js

/* eslint no-extend-native: 0 */
// core-js comes with Next.js. So, you can import it like below
import includes from 'core-js/library/fn/string/virtual/includes'
import repeat from 'core-js/library/fn/string/virtual/repeat'
import assign from 'core-js/library/fn/object/assign'

// Add your polyfills
// This files runs at the very beginning (even before React and Next.js core)
console.log('Load your polyfills')

String.prototype.includes = includes
String.prototype.repeat = repeat
Object.assign = assign

• 足りないものを個別に追加していくのが面倒であればcore-jsをまるごとimportしてしまってもいいかも

client/polyfills.js

import 'core-js';

console.log('Load your polyfills');