next/script

~18 min · next/script, loading strategy, third-party

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Loading 전략 의도적으로

전략	언제 load	사용 사례
`beforeInteractive`	Hydration 전	Critical: bot detection, consent banner
`afterInteractive` (default)	Hydration 후	Analytics, tag manager
`lazyOnload`	Idle time 동안	Chat widget, social embed
`worker`	Web worker 안	Main thread block 안 해야 할 무거운 compute

Rule 한 개

beforeInteractive 는 root layout 안에서만 허용 (document head 에 inject). 다른 곳에선 runtime error.

Code

한 layout 안 loading 전략 셋·tsx

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}

        {/* analytics — hydration 후 */}
        <Script
          src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"
          strategy="afterInteractive"
        />

        {/* chat widget — idle 동안 */}
        <Script
          src="https://widget.intercom.io/widget/abc123"
          strategy="lazyOnload"
        />

        {/* inline init — gtag script 후 여야 */}
        <Script id="gtag-init" strategy="afterInteractive">
          {`window.dataLayer = window.dataLayer || [];
            function gtag(){ dataLayer.push(arguments); }
            gtag('js', new Date());
            gtag('config', 'G-XXXXX');`}
        </Script>
      </body>
    </html>
  );
}

External links

next/script

Exercise

실제 Next.js app 의 third-party script audit. afterInteractive 안 필요한 거 lazyOnload 로 reclassify 하고 Time to Interactive 에 영향 measure.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousMetadata API Next →Performance & Core Web Vitals

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.