Demo

Script Component

next/script controls when and how third-party scripts load.
Choose a loading strategy to balance functionality with performance.
Scripts can load before hydration, after hydration, or during browser idle time.
Use the onLoad callback to run code after scripts are ready.
Web Workers strategy moves script execution off the main thread entirely.
Always evaluate third-party scripts for performance and security impact.

app/layout.tsx

1import Script from 'next/script';
2
3export default function RootLayout({
4  children,
5}: {
6  children: React.ReactNode;
7}) {
8  return (
9    <html>
10      <body>
11        {children}
12        {/* Analytics - load after page is interactive */}
13        // !mark
14        <Script
15          src="https://analytics.example.com/script.js"
16          strategy="afterInteractive"
17        />
18        {/* Low-priority widget */}
19        // !mark
20        <Script
21          src="https://widget.example.com/embed.js"
22          strategy="lazyOnload"
23        />
24      </body>
25    </html>
26  );
27}

Loading Strategies

Strategy	When It Loads	Best For
`beforeInteractive`	Before hydration	Consent managers, bot detection
`afterInteractive`	After hydration	Analytics, tag managers
`lazyOnload`	During browser idle	Chat widgets, social embeds
`worker`	In a web worker	Heavy scripts that can run off-thread

Demo

Observe the loading timeline - scripts load at different phases.
Check performance metrics - core interactivity is not blocked.
Verify functionality - scripts work correctly after loading.

Visual Summary

Script loading lifecycle

HTML

Hydration

Interactive

Idle

Choose the latest possible timing that meets your business needs.

Key Takeaways

Topic	Guidance
Performance	Delay scripts that are not critical for initial render
User experience	Never block interactivity for non-essential scripts
Security	Audit third-party scripts regularly
Monitoring	Track script impact on Core Web Vitals

Pitfalls and Tips

Avoid beforeInteractive unless absolutely necessary - it blocks hydration.
Use lazyOnload for scripts that users may never interact with.
Prefer async loading and isolate heavy scripts from critical paths.
Regularly audit third-party scripts for performance regression.

Learn More

Strategies

beforeInteractive

Before hydration. Critical scripts only.

afterInteractive

After hydration. Most scripts use this.

lazyOnload

Browser idle time. Chat widgets, etc.

worker

Web worker. Experimental.

Live Demo

afterInteractive: …lazyOnload: …

Example

The App Router Gallery