Skip to content

Scripts with "beforeInteractive" strategy don't render CSS classes correctly #81130

@gregrafferty

Description

@gregrafferty

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/zvypcr

To Reproduce

  1. Run the sandbox link
  2. Inspect the rendered page
  3. In the console there will be two logs, one for the beforeInteractive example (which will have and empty class list) and another for afterInteractive (which will show the its class list correctly).
  4. You can also search for a script with the id of 'before-example' to see that it has 'classname' instead of 'class'

Current vs. Expected behavior

When using the NextJS Script component with a strategy of 'beforeInteractive' CSS classes that have been added to the component do not render correctly.

Current:

<script classname="example-class" id="example">console.log('Hello');</script>

Note the 'classname' instead of 'class'.

Expected:

<script class="example-class" id="example">console.log('Hello');</script>

Scripts with other strategies appear to work as expected.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.5.0: Tue Apr 22 19:54:25 PDT 2025; root:xnu-11417.121.6~2/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 20.19.2
  npm: 10.8.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.3.2 // There is a newer version (15.3.4) available, upgrade recommended!
  eslint-config-next: 15.3.1
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

Script (next/script)

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

Tested in 15.3.2 in our current project and 15.2 on Code Sandbox with the same results. This has also been deployed in our production AWS ECS environment with the same result

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions