Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Avoid duplicate preload/preconnect hints for framework-loaded scripts
Don't manually preload a script the framework already preloads, and drop preconnect once you preload the same origin.
Bad example
| 1 | import Script from 'next/script'; |
| 2 |
|
| 3 | export default function RootLayout({ children }: { children: React.ReactNode }) { |
| 4 | const adsScriptUrl = 'https://cdn.example.com/ads.js'; |
| 5 |
|
| 6 | return ( |
| 7 | <html lang="en"> |
| 8 | <head> |
| 9 | <link rel="preconnect" href="https://cdn.example.com" /> |
| 10 | {/* Redundant: next/script already preloads this for afterInteractive */} |
| 11 | <link rel="preload" as="script" href={adsScriptUrl} /> |
| 12 | </head> |
| 13 | <body> |
| 14 | {children} |
| 15 | <Script src={adsScriptUrl} strategy="afterInteractive" /> |
| 16 | </body> |
| 17 | </html> |
| 18 | ); |
| 19 | } |
Explanation (EN)
Next.js automatically emits a preload hint for scripts loaded with `next/script` (e.g. `strategy="afterInteractive"`), so this manual `<link rel="preload">` duplicates it. The extra `<link rel="preconnect">` to the same origin is also wasted work, since the preload tag already resolves DNS, opens the TCP connection, and completes the TLS handshake for that origin.
Objašnjenje (HR)
Next.js sam ubacuje preload hint za skripte učitane preko `next/script` (npr. `strategy="afterInteractive"`), pa ovaj ručni `<link rel="preload">` samo duplicira taj hint. Dodatni `<link rel="preconnect">` na isti origin je isto suvišan posao jer preload tag već odradi DNS, TCP handshake i TLS pregovaranje za taj origin.
Good example
| 1 | import Script from 'next/script'; |
| 2 |
|
| 3 | export default function RootLayout({ children }: { children: React.ReactNode }) { |
| 4 | const adsScriptUrl = 'https://cdn.example.com/ads.js'; |
| 5 |
|
| 6 | return ( |
| 7 | <html lang="en"> |
| 8 | <body> |
| 9 | {children} |
| 10 | <Script src={adsScriptUrl} strategy="afterInteractive" /> |
| 11 | </body> |
| 12 | </html> |
| 13 | ); |
| 14 | } |
Explanation (EN)
Let `next/script` manage the resource hint for its own script — don't add a manual `<link rel="preload">` or a separate `<link rel="preconnect">` to the same origin; they add no value once the script's own preload covers the connection setup.
Objašnjenje (HR)
Neka `next/script` sam upravlja resource hintom za svoju skriptu — ne dodavaj ručni `<link rel="preload">` niti zaseban `<link rel="preconnect">` na isti origin; ne donose ništa novo kad preload same skripte već pokriva uspostavu konekcije.
Notes (EN)
Applies more broadly than Next.js: `<link rel="preload">` performs DNS lookup + TCP + TLS + the request itself, so it is a strict superset of `<link rel="preconnect">` for the same origin — keep only the preload once one exists.
Bilješke (HR)
Vrijedi šire od Next.js-a: `<link rel="preload">` radi DNS lookup + TCP + TLS + sam request, pa je striktan nadskup od `<link rel="preconnect">` za isti origin — zadrži samo preload kad on već postoji.