아키텍처: 지원되는 브라우저 | Next.js

Source URL: https://nextjs.org/docs/architecture/supported-browsers

Next.js Docs ArchitectureSupported Browsers

Copy page

지원되는 브라우저

마지막 업데이트 2026년 2월 20일

Next.js는 모던 브라우저를 추가 설정 없이 지원합니다.

Chrome 111+
Edge 111+
Firefox 111+
Safari 16.4+

Browserslist

특정 브라우저나 기능을 타깃팅하고 싶다면, Next.js에서는 package.json 파일에서 Browserslist 구성을 지원합니다. Next.js는 기본적으로 다음 Browserslist 구성을 사용합니다:

package.json

    {
      "browserslist": ["chrome 111", "edge 111", "firefox 111", "safari 16.4"]
    }

폴리필

다음과 같은 널리 사용되는 폴리필을 주입합니다:

fetch() — 대체 대상: whatwg-fetch, unfetch.
URL — 대체 대상: url 패키지 (Node.js API).
Object.assign() — 대체 대상: object-assign, object.assign, core-js/object/assign.

이러한 폴리필이 의존성에 포함되어 있다면, 생산 빌드에서 자동으로 제거되어 중복을 방지합니다.

또한 번들 크기를 줄이기 위해, Next.js는 해당 폴리필이 필요한 브라우저에서만 이를 로드합니다. 전 세계 웹 트래픽의 대부분은 이 폴리필을 다운로드하지 않습니다.

사용자 정의 폴리필

자체 코드나 외부 npm 의존성이 타깃 브라우저에서 지원되지 않는 기능(예: IE 11)을 요구하는 경우, 직접 폴리필을 추가해야 합니다.

App Router에서

폴리필을 포함하려면 instrumentation-client.js 파일에 임포트할 수 있습니다.

instrumentation-client.ts

    import './polyfills'

Pages Router에서

이 경우 Custom <App> 또는 개별 컴포넌트에서 필요한 특정 폴리필에 대한 최상위 임포트를 추가해야 합니다.

pages/_app.tsx

JavaScriptTypeScript

    import './polyfills'

    import type { AppProps } from 'next/app'

    export default function MyApp({ Component, pageProps }: AppProps) {
      return <Component {...pageProps} />
    }

조건부 폴리필 로딩

가장 좋은 접근 방식은 지원되지 않는 기능을 특정 UI 섹션에 격리하고 필요할 때 폴리필을 조건부로 로드하는 것입니다.

hooks/analytics.ts

JavaScriptTypeScript

    import { useCallback } from 'react'

    export const useAnalytics = () => {
      const tracker = useCallback(async (data: unknown) => {
        if (!('structuredClone' in globalThis)) {
          import('polyfills/structured-clone').then((mod) => {
            globalThis.structuredClone = mod.default
          })
        }

        /* Do some work that uses structured clone */
      }, [])

      return tracker
    }

JavaScript 언어 기능

Next.js는 최신 JavaScript 기능을 기본적으로 사용할 수 있도록 해줍니다. ES6 기능 외에도 다음을 지원합니다:

Async/await (ES2017)
Object Rest/Spread Properties (ES2018)
Dynamic import() (ES2020)
Optional Chaining (ES2020)
Nullish Coalescing (ES2020)
Class Fields 및 Static Properties (ES2022)
기타 등등!

TypeScript 기능

Next.js는 기본적으로 TypeScript를 지원합니다. 여기에서 자세히 알아보세요.

Babel 구성 커스터마이징(고급)

Babel 구성을 커스터마이즈할 수 있습니다. 여기에서 자세히 알아보세요.

Was this helpful?

supported.

Send