Source from repo

Next.js Best Practices

Apply Next.js best practices for RSC boundaries, async APIs, routing, metadata, and optimization.

vercel-labsGitHub vercel-labsOfficialSource repo Original GitHub link Publisher page

Files

Skill

n/a

Size

78.7 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

scripts.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown142 linesFree

scripts.md

1# Scripts
2 
3Loading third-party scripts in Next.js.
4 
5## Use next/script
6 
7Always use `next/script` instead of native `<script>` tags for better performance.
8 
9```tsx
10// Bad: Native script tag
11<script src="https://example.com/script.js"></script>
12 
13// Good: Next.js Script component
14import Script from 'next/script'
15 
16<Script src="https://example.com/script.js" />
17```
18 
19## Inline Scripts Need ID
20 
21Inline scripts require an `id` attribute for Next.js to track them.
22 
23```tsx
24// Bad: Missing id
25<Script dangerouslySetInnerHTML={{ __html: 'console.log("hi")' }} />
26 
27// Good: Has id
28<Script id="my-script" dangerouslySetInnerHTML={{ __html: 'console.log("hi")' }} />
29 
30// Good: Inline with id
31<Script id="show-banner">
32  {`document.getElementById('banner').classList.remove('hidden')`}
33</Script>
34```
35 
36## Don't Put Script in Head
37 
38`next/script` should not be placed inside `next/head`. It handles its own positioning.
39 
40```tsx
41// Bad: Script inside Head
42import Head from 'next/head'
43import Script from 'next/script'
44 
45<Head>
46  <Script src="/analytics.js" />
47</Head>
48 
49// Good: Script outside Head
50<Head>
51  <title>Page</title>
52</Head>
53<Script src="/analytics.js" />
54```
55 
56## Loading Strategies
57 
58```tsx
59// afterInteractive (default) - Load after page is interactive
60<Script src="/analytics.js" strategy="afterInteractive" />
61 
62// lazyOnload - Load during idle time
63<Script src="/widget.js" strategy="lazyOnload" />
64 
65// beforeInteractive - Load before page is interactive (use sparingly)
66// Only works in app/layout.tsx or pages/_document.js
67<Script src="/critical.js" strategy="beforeInteractive" />
68 
69// worker - Load in web worker (experimental)
70<Script src="/heavy.js" strategy="worker" />
71```
72 
73## Google Analytics
74 
75Use `@next/third-parties` instead of inline GA scripts.
76 
77```tsx
78// Bad: Inline GA script
79<Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX" />
80<Script id="ga-init">
81  {`window.dataLayer = window.dataLayer || [];
82    function gtag(){dataLayer.push(arguments);}
83    gtag('js', new Date());
84    gtag('config', 'G-XXXXX');`}
85</Script>
86 
87// Good: Next.js component
88import { GoogleAnalytics } from '@next/third-parties/google'
89 
90export default function Layout({ children }) {
91  return (
92    <html>
93      <body>{children}</body>
94      <GoogleAnalytics gaId="G-XXXXX" />
95    </html>
96  )
97}
98```
99 
100## Google Tag Manager
101 
102```tsx
103import { GoogleTagManager } from '@next/third-parties/google'
104 
105export default function Layout({ children }) {
106  return (
107    <html>
108      <GoogleTagManager gtmId="GTM-XXXXX" />
109      <body>{children}</body>
110    </html>
111  )
112}
113```
114 
115## Other Third-Party Scripts
116 
117```tsx
118// YouTube embed
119import { YouTubeEmbed } from '@next/third-parties/google'
120 
121<YouTubeEmbed videoid="dQw4w9WgXcQ" />
122 
123// Google Maps
124import { GoogleMapsEmbed } from '@next/third-parties/google'
125 
126<GoogleMapsEmbed
127  apiKey="YOUR_API_KEY"
128  mode="place"
129  q="Brooklyn+Bridge,New+York,NY"
130/>
131```
132 
133## Quick Reference
134 
135| Pattern | Issue | Fix |
136|---------|-------|-----|
137| `<script src="...">` | No optimization | Use `next/script` |
138| `<Script>` without id | Can't track inline scripts | Add `id` attribute |
139| `<Script>` inside `<Head>` | Wrong placement | Move outside Head |
140| Inline GA/GTM scripts | No optimization | Use `@next/third-parties` |
141| `strategy="beforeInteractive"` outside layout | Won't work | Only use in root layout |
142

Marketplace

Source from repo

Next.js Best Practices

Apply Next.js best practices for RSC boundaries, async APIs, routing, metadata, and optimization.

vercel-labsGitHub vercel-labsOfficialSource repo Original GitHub link Publisher page

Files

Skill

n/a

Size

78.7 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

scripts.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown142 linesFree

scripts.md

1# Scripts
2 
3Loading third-party scripts in Next.js.
4 
5## Use next/script
6 
7Always use `next/script` instead of native `<script>` tags for better performance.
8 
9```tsx
10// Bad: Native script tag
11<script src="https://example.com/script.js"></script>
12 
13// Good: Next.js Script component
14import Script from 'next/script'
15 
16<Script src="https://example.com/script.js" />
17```
18 
19## Inline Scripts Need ID
20 
21Inline scripts require an `id` attribute for Next.js to track them.
22 
23```tsx
24// Bad: Missing id
25<Script dangerouslySetInnerHTML={{ __html: 'console.log("hi")' }} />
26 
27// Good: Has id
28<Script id="my-script" dangerouslySetInnerHTML={{ __html: 'console.log("hi")' }} />
29 
30// Good: Inline with id
31<Script id="show-banner">
32  {`document.getElementById('banner').classList.remove('hidden')`}
33</Script>
34```
35 
36## Don't Put Script in Head
37 
38`next/script` should not be placed inside `next/head`. It handles its own positioning.
39 
40```tsx
41// Bad: Script inside Head
42import Head from 'next/head'
43import Script from 'next/script'
44 
45<Head>
46  <Script src="/analytics.js" />
47</Head>
48 
49// Good: Script outside Head
50<Head>
51  <title>Page</title>
52</Head>
53<Script src="/analytics.js" />
54```
55 
56## Loading Strategies
57 
58```tsx
59// afterInteractive (default) - Load after page is interactive
60<Script src="/analytics.js" strategy="afterInteractive" />
61 
62// lazyOnload - Load during idle time
63<Script src="/widget.js" strategy="lazyOnload" />
64 
65// beforeInteractive - Load before page is interactive (use sparingly)
66// Only works in app/layout.tsx or pages/_document.js
67<Script src="/critical.js" strategy="beforeInteractive" />
68 
69// worker - Load in web worker (experimental)
70<Script src="/heavy.js" strategy="worker" />
71```
72 
73## Google Analytics
74 
75Use `@next/third-parties` instead of inline GA scripts.
76 
77```tsx
78// Bad: Inline GA script
79<Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX" />
80<Script id="ga-init">
81  {`window.dataLayer = window.dataLayer || [];
82    function gtag(){dataLayer.push(arguments);}
83    gtag('js', new Date());
84    gtag('config', 'G-XXXXX');`}
85</Script>
86 
87// Good: Next.js component
88import { GoogleAnalytics } from '@next/third-parties/google'
89 
90export default function Layout({ children }) {
91  return (
92    <html>
93      <body>{children}</body>
94      <GoogleAnalytics gaId="G-XXXXX" />
95    </html>
96  )
97}
98```
99 
100## Google Tag Manager
101 
102```tsx
103import { GoogleTagManager } from '@next/third-parties/google'
104 
105export default function Layout({ children }) {
106  return (
107    <html>
108      <GoogleTagManager gtmId="GTM-XXXXX" />
109      <body>{children}</body>
110    </html>
111  )
112}
113```
114 
115## Other Third-Party Scripts
116 
117```tsx
118// YouTube embed
119import { YouTubeEmbed } from '@next/third-parties/google'
120 
121<YouTubeEmbed videoid="dQw4w9WgXcQ" />
122 
123// Google Maps
124import { GoogleMapsEmbed } from '@next/third-parties/google'
125 
126<GoogleMapsEmbed
127  apiKey="YOUR_API_KEY"
128  mode="place"
129  q="Brooklyn+Bridge,New+York,NY"
130/>
131```
132 
133## Quick Reference
134 
135| Pattern | Issue | Fix |
136|---------|-------|-----|
137| `<script src="...">` | No optimization | Use `next/script` |
138| `<Script>` without id | Can't track inline scripts | Add `id` attribute |
139| `<Script>` inside `<Head>` | Wrong placement | Move outside Head |
140| Inline GA/GTM scripts | No optimization | Use `@next/third-parties` |
141| `strategy="beforeInteractive"` outside layout | Won't work | Only use in root layout |
142

Next.js Best Practices

scripts.md

Preparing the source view

Next.js Best Practices

scripts.md