forked from vercel/next.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[ESLint] Adds lint rule to flag usage of
<head> (vercel#32897)
## Bug - [X] Related issues linked using `fixes #number` - [X] Tests added - [X] Errors have helpful link attached, see `contributing.md` Fixes vercel#30142
- Loading branch information
1 parent
636d3ae
commit d72f5bd
Showing
6 changed files
with
162 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| # No Head Element | ||
|
|
||
| ### Why This Error Occurred | ||
|
|
||
| An HTML `<head>` element was used to include page-level metadata, but this can cause unexpected behavior in a Next.js application. Use Next.js' built-in `<Head />` component instead. | ||
|
|
||
| ### Possible Ways to Fix It | ||
|
|
||
| Import and use the `<Head />` component: | ||
|
|
||
| ```jsx | ||
| import Head from 'next/head' | ||
|
|
||
| function Index() { | ||
| return ( | ||
| <> | ||
| <Head> | ||
| <title>My page title</title> | ||
| <meta name="viewport" content="initial-scale=1.0, width=device-width" /> | ||
| </Head> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default Index | ||
| ``` | ||
|
|
||
| ### Useful Links | ||
|
|
||
| - [next/head](https://nextjs.org/docs/api-reference/next/head) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| module.exports = { | ||
| meta: { | ||
| docs: { | ||
| description: 'Prohibit usage of HTML <head> element', | ||
| category: 'HTML', | ||
| recommended: true, | ||
| url: 'https://nextjs.org/docs/messages/no-head-element', | ||
| }, | ||
| fixable: 'code', | ||
| }, | ||
|
|
||
| create: function (context) { | ||
| return { | ||
| JSXOpeningElement(node) { | ||
| if (node.name.name !== 'head') { | ||
| return | ||
| } | ||
|
|
||
| context.report({ | ||
| node, | ||
| message: `Do not use <head>. Use Head from 'next/head' instead. See: https://nextjs.org/docs/messages/no-head-element`, | ||
| }) | ||
| }, | ||
| } | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import rule from '@next/eslint-plugin-next/lib/rules/no-head-element' | ||
| import { RuleTester } from 'eslint' | ||
| ;(RuleTester as any).setDefaultConfig({ | ||
| parserOptions: { | ||
| ecmaVersion: 2018, | ||
| sourceType: 'module', | ||
| ecmaFeatures: { | ||
| modules: true, | ||
| jsx: true, | ||
| }, | ||
| }, | ||
| }) | ||
| const ruleTester = new RuleTester() | ||
|
|
||
| ruleTester.run('no-head-element', rule, { | ||
| valid: [ | ||
| { | ||
| code: `import Head from 'next/head'; | ||
| export class MyComponent { | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <Head> | ||
| <title>My page title</title> | ||
| </Head> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| `, | ||
| filename: 'pages/index.js', | ||
| }, | ||
| { | ||
| code: `import Head from 'next/head'; | ||
| export class MyComponent { | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <Head> | ||
| <title>My page title</title> | ||
| </Head> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| `, | ||
| filename: 'pages/index.tsx', | ||
| }, | ||
| ], | ||
| invalid: [ | ||
| { | ||
| code: ` | ||
| export class MyComponent { | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <head> | ||
| <title>My page title</title> | ||
| </head> | ||
| </div> | ||
| ); | ||
| } | ||
| }`, | ||
| filename: 'pages/index.js', | ||
| errors: [ | ||
| { | ||
| message: | ||
| "Do not use <head>. Use Head from 'next/head' instead. See: https://nextjs.org/docs/messages/no-head-element", | ||
| type: 'JSXOpeningElement', | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| code: `import Head from 'next/head'; | ||
| export class MyComponent { | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <head> | ||
| <title>My page title</title> | ||
| </head> | ||
| <Head> | ||
| <title>My page title</title> | ||
| </Head> | ||
| </div> | ||
| ); | ||
| } | ||
| }`, | ||
| filename: 'pages/index.ts', | ||
| errors: [ | ||
| { | ||
| message: | ||
| "Do not use <head>. Use Head from 'next/head' instead. See: https://nextjs.org/docs/messages/no-head-element", | ||
| type: 'JSXOpeningElement', | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }) |