Skip to content

docs: clarify beforeInteractive placement for root layouts - #97643

Merged
icyJoseph merged 3 commits into
canaryfrom
docs/before-interactive-root-layout
Aug 21, 2026
Merged

docs: clarify beforeInteractive placement for root layouts#97643
icyJoseph merged 3 commits into
canaryfrom
docs/before-interactive-root-layout

Conversation

@icyJoseph

Copy link
Copy Markdown
Member

Fixes: #97602

@github-actions

github-actions Bot commented Aug 20, 2026

Copy link
Copy Markdown
Contributor

Tests Passed

Commit: 305d23e

@github-actions

github-actions Bot commented Aug 20, 2026

Copy link
Copy Markdown
Contributor

Stats skipped

Commit: 305d23e
View workflow run

<AppOnly>

`beforeInteractive` scripts must be placed inside the root layout (`app/layout.tsx`) and are designed to load scripts that are needed by the entire site (i.e. the script will load when any page in the application has been loaded server-side).
Scripts with the `beforeInteractive` strategy must be placed inside a [root layout](/docs/app/api-reference/file-conventions/layout#root-layout), any layout without a `layout.js` above it, such as `app/layout.tsx` or `app/[locale]/layout.tsx`, and are designed to load scripts that are needed by the entire site (i.e. the script will load when any page in the application has been loaded server-side).

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

, any layout without a layout.js above it,

this makes it sound like its root layout OR any layout when actually this is just the definition of a rootlayout? Maybe it can be in (which is any layout without a layout.js above it) or just remove and stick with the link only

---

> Prevent usage of `next/script`'s `beforeInteractive` strategy outside of `app/layout.jsx` or `pages/_document.js`.
> Prevent usage of `next/script`'s `beforeInteractive` strategy outside of a root layout or `pages/_document.js`.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this link to the root layout def as above?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i guess this is pages so its fine?

### App Router

If you want a global script, and you are using the App Router, move the script inside `app/layout.jsx`.
If you want a global script, and you are using the App Router, move the script inside a [root layout](/docs/app/api-reference/file-conventions/layout#root-layout), any layout without a `layout.js` above it.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aha, the link is here 🤔

@icyJoseph
icyJoseph marked this pull request as ready for review August 21, 2026 09:51
@icyJoseph
icyJoseph merged commit 18766e9 into canary Aug 21, 2026
71 checks passed
@icyJoseph
icyJoseph deleted the docs/before-interactive-root-layout branch August 21, 2026 11:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Docs: Using beforeinteractive script together with localized root layout

2 participants