Skip to Content
📖 Guide DocumentsLint & FormatRulesNext.js

Next.js

Next.js framework rules from @next/eslint-plugin-next, applied to TypeScript and TSX sources inside Next.js apps. Checks Next.js-specific conventions, pages/app routing, <Head> placement, font and script loading, image and link components. That the framework’s runtime treats as load-bearing. Rules that need non-TypeScript files or runtime filesystem route discovery are intentionally conservative.

Source: @next/eslint-plugin-next (MIT).

  • nextjs/google-font-display: Require a non-blocking display= value on Google Fonts stylesheet links; reject auto, block, and fallback, which keep text invisible while the font loads and hurt LCP.
  • nextjs/google-font-preconnect: Require rel="preconnect" for fonts.gstatic.com links to shave latency off Google Font fetches.
  • nextjs/inline-script-id: Require an id attribute on inline <Script> components from next/script.
  • nextjs/next-script-for-ga: Prefer the Next.js Google Analytics integration over hand-written gtag script tags.
  • nextjs/no-assign-module-variable: Reject local declarations named module, which shadow the CommonJS module binding Next.js relies on.
  • nextjs/no-async-client-component: Reject async function bodies on React Client Components.
  • nextjs/no-before-interactive-script-outside-document: Restrict the next/script strategy="beforeInteractive" option to pages/_document.tsx, anywhere else, the strategy is downgraded silently.
  • nextjs/no-css-tags: Reject raw <link rel="stylesheet"> tags.
  • nextjs/no-document-import-in-page: Restrict next/document imports to pages/_document.tsx, Document cannot be used in a regular page.
  • nextjs/no-duplicate-head: Reject more than one <Head> element from next/document in pages/_document.tsx.
  • nextjs/no-head-element: Reject raw <head> elements outside the app/ directory. Use next/head or the metadata exports.
  • nextjs/no-head-import-in-document: Reject next/head imports inside pages/_document.tsx. Use next/document’s Head there.
  • nextjs/no-html-link-for-pages: Prefer next/link for internal anchors with a static href, since Link performs client-side routing.
  • nextjs/no-img-element: Prefer next/image over raw <img> elements so the framework can optimize the asset.
  • nextjs/no-page-custom-font: Reject Google font <link> tags inside regular pages files. Load fonts in _document.tsx (pages router) or via next/font (app router).
  • nextjs/no-script-component-in-head: Reject next/script inside next/head, <Script> must appear in the JSX tree, not in <Head>.
  • nextjs/no-styled-jsx-in-document: Reject styled-jsx tags inside pages/_document.tsx, which the server renders incorrectly.
  • nextjs/no-sync-scripts: Require async or defer on external raw <script> tags so loading does not block render.
  • nextjs/no-title-in-document-head: Reject <title> inside Head from next/document.
  • nextjs/no-typos: Catch near-miss typos in Next.js data-fetching export names (getStaticProps, getStaticPaths, getServerSideProps).
  • nextjs/no-unwanted-polyfillio: Reject Polyfill.io script URLs, Next.js already polyfills modern browsers, and Polyfill.io has a checkered history.
Last updated on
JSX accessibilityPlaywright