{"record":{"id":"419d1a657189a2c9","repo":"oxc-project/oxc","slug":"do-not-use-head-element-use-head-from","errorCode":null,"errorMessage":"Do not use `` element. Use `
` from `next/head` instead.","messagePattern":"Do not use `` element\\. Use `` from `next/head` instead\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/nextjs/no_head_element.rs","lineNumber":14,"sourceCode":"use oxc_ast::{AstKind, ast::JSXElementName};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_span::Span;\n\nuse crate::{\n AstNode,\n context::{ContextHost, LintContext},\n rule::Rule,\n utils::is_in_app_dir,\n};\n\nfn no_head_element_diagnostic(span: Span) -> OxcDiagnostic {\n OxcDiagnostic::warn(\"Do not use `` element. Use `` from `next/head` instead.\")\n .with_help(\"See https://nextjs.org/docs/messages/no-head-element\")\n .with_label(span)\n}\n\n#[derive(Debug, Default, Clone)]\npub struct NoHeadElement;\n\ndeclare_oxc_lint!(\n /// ### What it does\n ///\n /// Prevents the usage of the native `` element inside a Next.js application.\n ///\n /// ### Why is this bad?\n ///\n /// A `` element can cause unexpected behavior in a Next.js application.\n /// Use Next.js' built-in `next/head` component instead.\n ///\n /// ### Examples","sourceCodeStart":1,"sourceCodeEnd":32,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/nextjs/no_head_element.rs#L1-L32","documentation":"Warning from oxlint rule `nextjs/no-head-element`. In the pages router, a raw HTML `` element is not managed by Next.js: tags inside it are neither deduplicated nor updated during client-side navigation. The rule (app-directory files are exempt) tells you to use the framework component instead.","triggerScenarios":"A native lowercase `` JSX element in any page or component outside `pages/_document.js` and outside the app directory.","commonSituations":"Hand-writing `` in a page; converting plain HTML mockups into JSX; not knowing the pages router expects `` from `next/head`.","solutions":["`import Head from 'next/head'` and wrap your tags: ``.","For fonts and meta use dedicated APIs (`next/font`, app-router `metadata`) instead of raw head markup."],"exampleFix":"// before\n\n\n// after\nimport Head from 'next/head';\n","handlingStrategy":"validation","validationCode":"// native head elements in pages/components:\n// rg -n ' ]' pages components app -g '!**/_document.*'","typeGuard":null,"tryCatchPattern":null,"preventionTips":["In the pages router, always use `` from `next/head` for title/meta/tags.","In the app router, prefer the `metadata` export over hand-written head markup.","Convert HTML mockups through a checklist step: replace `` before committing."],"tags":["nextjs","seo","pages-router","lint"],"backgroundTag":"lint-use-framework-head","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}