nextjs/no-sync-scripts Correctness

✅ This rule is turned on by default.

What it does

This rule prevents the use of synchronous <script> tags in Next.js applications. It requires that any <script> tag with a src attribute must also have either the async or defer attribute.

Why is this bad?

Synchronous scripts can block the page rendering and negatively impact performance. In Next.js applications, it's recommended to use async or defer attributes to load scripts asynchronously, which improves page load times and user experience.

Examples

Examples of incorrect code for this rule:

// Synchronous script without async/defer
<script src="https://example.com/script.js"></script>

// Dynamic src without async/defer
<script src={dynamicSrc}></script>

Examples of correct code for this rule:

// Script with async attribute
<script src="https://example.com/script.js" async></script>

// Script with defer attribute
<script src="https://example.com/script.js" defer></script>

// Script with spread props (allowed as it might include async/defer)
<script {...props}></script>

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny nextjs/no-sync-scripts --nextjs-plugin

Config (.oxlintrc.json)

{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/no-sync-scripts": "error"
  }
}

References

• Rule Source