nextjs/no-sync-scripts Correctness
What it does
Prevent the use of synchronous <script> tags in Next.js applications. Require any <script> tag with a src attribute to 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:
javascript
// 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:
javascript
// 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 using the config file or in the CLI, you can use:
json
{
"plugins": ["nextjs"],
"rules": {
"nextjs/no-sync-scripts": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["nextjs"],
rules: {
"nextjs/no-sync-scripts": "error",
},
});bash
oxlint --deny nextjs/no-sync-scripts --nextjs-pluginVersion
This rule was added in v0.2.0.