Vercel에서 레거시(legacy) 브라우저 지원 방법

Introduction

현대적인 웹 개발 환경에서도 IE11이나 구형 모바일 브라우저를 지원해야 하는 경우가 있습니다. Vercel에서 레거시 브라우저를 효과적으로 지원하는 방법을 살펴보겠습니다.

Environment

# 브라우저 지원 범위
# Modern: Chrome 80+, Firefox 75+, Safari 13+, Edge 80+
# Legacy: IE 11, Chrome 60-, Mobile Safari 10-

# 빌드 도구
npm list @babel/preset-env core-js
# @babel/preset-env@7.23.0
# core-js@3.34.0

Problem

구형 브라우저에서 앱이 작동하지 않았습니다:

# IE11 에러
'Promise' is undefined
'Array.from' is not a function
'Object.assign' is undefined

# 구형 모바일
'fetch' is not defined
'Symbol' is undefined

Solution

1. Babel 설정

// .babelrc
{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "ie": "11",
                    "safari": "10",
                    "chrome": "60"
                },
                "useBuiltIns": "usage",
                "corejs": 3
            }
        ]
    ]
}

2. next.config.js 폴리필 설정

// next.config.js
const nextConfig = {
    // 레거시 브라우저 지원
    transpilePackages: ['some-es6-package'],

    // 빌드 최적화
    experimental: {
        forceSwcTransforms: true,
    },

    // 폴리필 설정
    webpack: (config, { isServer, dev }) => {
        if (!isServer && !dev) {
            config.target = 'web';
        }
        return config;
    },
};

module.exports = nextConfig;

3. HTML 폴리필 추가

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
    return (
        
            
                {/* 구형 브라우저 폴리필 */}