diff --git a/docs/basic-features/eslint.md b/docs/basic-features/eslint.md index b85d16f44cac..0d97a658b891 100644 --- a/docs/basic-features/eslint.md +++ b/docs/basic-features/eslint.md @@ -80,28 +80,31 @@ This will take precedence over the configuration from `next.config.js`. Next.js provides an ESLint plugin, [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next), already bundled within the base configuration that makes it possible to catch common issues and problems in a Next.js application. The full set of rules is as follows: -| | Rule | Description | -| :-: | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -| ✔️ | [next/google-font-display](/docs/messages/google-font-display.md) | Enforce optional or swap font-display behavior with Google Fonts | -| ✔️ | [next/google-font-preconnect](/docs/messages/google-font-preconnect.md) | Enforce preconnect usage with Google Fonts | -| ✔️ | [next/link-passhref](/docs/messages/link-passhref.md) | Enforce passHref prop usage with custom Link components | -| ✔️ | [next/no-css-tags](/docs/messages/no-css-tags.md) | Prevent manual stylesheet tags | -| ✔️ | [next/no-document-import-in-page](/docs/messages/no-document-import-in-page.md) | Disallow importing next/document outside of pages/document.js | -| ✔️ | [next/no-head-import-in-document](/docs/messages/no-head-import-in-document.md) | Disallow importing next/head in pages/document.js | -| ✔️ | [next/no-html-link-for-pages](/docs/messages/no-html-link-for-pages.md) | Prohibit HTML anchor links to pages without a Link component | -| ✔️ | [next/no-img-element](/docs/messages/no-img-element.md) | Prohibit usage of HTML <img> element | -| ✔️ | [next/no-head-element](/docs/messages/no-head-element.md) | Prohibit usage of HTML <head> element | -| ✔️ | [next/no-page-custom-font](/docs/messages/no-page-custom-font.md) | Prevent page-only custom fonts | -| ✔️ | [next/no-sync-scripts](/docs/messages/no-sync-scripts.md) | Forbid synchronous scripts | -| ✔️ | [next/no-title-in-document-head](/docs/messages/no-title-in-document-head.md) | Disallow using <title> with Head from next/document | -| ✔️ | [next/no-unwanted-polyfillio](/docs/messages/no-unwanted-polyfillio.md) | Prevent duplicate polyfills from Polyfill.io | -| ✔️ | [next/inline-script-id](/docs/messages/inline-script-id.md) | Enforce id attribute on next/script components with inline content | -| ✔️ | next/no-typos | Ensure no typos were made declaring [Next.js's data fetching function](/docs/basic-features/data-fetching/overview.md) | -| ✔️ | [next/next-script-for-ga](/docs/messages/next-script-for-ga.md) | Use the Script component to defer loading of the script until necessary. | -| ✔️ | [next/no-styled-jsx-in-document](/docs/messages/no-styled-jsx-in-document.md) | styled-jsx should not be used in \_document | - - ✔: Enabled in the recommended configuration +| | Rule | Description | +| :-: | --------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | +| ✔️ | [@next/next/google-font-display](/docs/messages/google-font-display.md) | Enforce font-display behavior with Google Fonts. | +| ✔️ | [@next/next/google-font-preconnect](/docs/messages/google-font-preconnect.md) | Ensure `preconnect` is used with Google Fonts. | +| ✔️ | [@next/next/inline-script-id](/docs/messages/inline-script-id.md) | Enforce `id` attribute on `next/script` components with inline content. | +| ✔️ | [@next/next/next-script-for-ga](/docs/messages/next-script-for-ga.md) | Prefer `next/script` component when using the inline script for Google Analytics. | +| ✔️ | [@next/next/no-before-interactive-script-outside-document](/docs/messages/no-before-interactive-script-outside-document.md) | Prevent usage of `next/script`'s `beforeInteractive` strategy outside of `pages/_document.js`. | +| ✔️ | [@next/next/no-css-tags](/docs/messages/no-css-tags.md) | Prevent manual stylesheet tags. | +| ✔️ | [@next/next/no-document-import-in-page](/docs/messages/no-document-import-in-page.md) | Prevent importing `next/document` outside of `pages/_document.js`. | +| ✔️ | [@next/next/no-duplicate-head](/docs/messages/no-duplicate-head.md) | Prevent duplicate usage of `
` in `pages/_document.js`. | +| ✔️ | [@next/next/no-head-element](/docs/messages/no-head-element.md) | Prevent usage of `` element. | +| ✔️ | [@next/next/no-head-import-in-document](/docs/messages/no-head-import-in-document.md) | Prevent usage of `next/head` in `pages/_document.js`. | +| ✔️ | [@next/next/no-html-link-for-pages](/docs/messages/no-html-link-for-pages.md) | Prevent usage of `` elements to navigate to internal Next.js pages. | +| ✔️ | [@next/next/no-img-element](/docs/messages/no-img-element.md) | Prevent usage of `` element to prevent layout shift. | +| ✔️ | [@next/next/no-page-custom-font](/docs/messages/no-page-custom-font.md) | Prevent page-only custom fonts. | +| ✔️ | [@next/next/no-script-component-in-head](/docs/messages/no-script-component-in-head.md) | Prevent usage of `next/script` in `next/head` component. | +| ✔️ | [@next/next/no-server-import-in-page](/docs/messages/no-server-import-in-page.md) | Prevent usage of `next/server` outside of `middleware.js`. | +| ✔️ | [@next/next/no-styled-jsx-in-document](/docs/messages/no-styled-jsx-in-document.md) | Prevent usage of `styled-jsx` in `pages/_document.js`. | +| ✔️ | [@next/next/no-sync-scripts](/docs/messages/no-sync-scripts.md) | Prevent synchronous scripts. | +| ✔️ | [@next/next/no-title-in-document-head](/docs/messages/no-title-in-document-head.md) | Prevent usage of `. See: https://nextjs.org/docs/messages/no-duplicate-head', + 'Do not include multiple instances of `
`. See: https://nextjs.org/docs/messages/no-duplicate-head', type: 'JSXElement', }, ], @@ -97,7 +97,7 @@ ruleTester.run('no-duplicate-head', rule, { code: ` import Document, { Html, Main, NextScript } from 'next/document' import Head from 'next/head' - + class MyDocument extends Document { render() { return ( @@ -124,14 +124,14 @@ ruleTester.run('no-duplicate-head', rule, { ) } } - + export default MyDocument `, filename: 'pages/_document.page.tsx', errors: [ { message: - 'Do not include multiple instances of
. See: https://nextjs.org/docs/messages/no-duplicate-head', + 'Do not include multiple instances of `
`. See: https://nextjs.org/docs/messages/no-duplicate-head', type: 'JSXElement', }, ], diff --git a/test/unit/eslint-plugin-next/no-head-element.test.ts b/test/unit/eslint-plugin-next/no-head-element.test.ts index d1014b9374ef..25034ab2f57e 100644 --- a/test/unit/eslint-plugin-next/no-head-element.test.ts +++ b/test/unit/eslint-plugin-next/no-head-element.test.ts @@ -67,7 +67,7 @@ ruleTester.run('no-head-element', rule, { errors: [ { message: - "Do not use
. Use Head from 'next/head' instead. See: https://nextjs.org/docs/messages/no-head-element", + 'Do not use `
` element. Use `
` from `next/head` instead. See: https://nextjs.org/docs/messages/no-head-element', type: 'JSXOpeningElement', }, ], @@ -93,7 +93,7 @@ ruleTester.run('no-head-element', rule, { errors: [ { message: - "Do not use
. Use Head from 'next/head' instead. See: https://nextjs.org/docs/messages/no-head-element", + 'Do not use `
` element. Use `
` from `next/head` instead. See: https://nextjs.org/docs/messages/no-head-element', type: 'JSXOpeningElement', }, ], diff --git a/test/unit/eslint-plugin-next/no-head-import-in-document.test.ts b/test/unit/eslint-plugin-next/no-head-import-in-document.test.ts index 8e6edbd7e4ea..4bcaed90b7a3 100644 --- a/test/unit/eslint-plugin-next/no-head-import-in-document.test.ts +++ b/test/unit/eslint-plugin-next/no-head-import-in-document.test.ts @@ -21,7 +21,7 @@ ruleTester.run('no-head-import-in-document', rule, { static async getInitialProps(ctx) { //... } - + render() { return ( @@ -31,7 +31,7 @@ ruleTester.run('no-head-import-in-document', rule, { ) } } - + export default MyDocument `, filename: 'pages/_document.tsx', @@ -46,7 +46,7 @@ ruleTester.run('no-head-import-in-document', rule, { ); - } + } `, filename: 'pages/index.tsx', }, @@ -56,7 +56,7 @@ ruleTester.run('no-head-import-in-document', rule, { code: ` import Document, { Html, Main, NextScript } from 'next/document' import Head from 'next/head' - + class MyDocument extends Document { render() { return ( @@ -70,14 +70,14 @@ ruleTester.run('no-head-import-in-document', rule, { ) } } - + export default MyDocument `, filename: 'pages/_document.js', errors: [ { message: - 'next/head should not be imported in pages/_document.js. Import Head from next/document instead. See: https://nextjs.org/docs/messages/no-head-import-in-document', + '`next/head` should not be imported in `pages/_document.js`. Use `
` from `next/document` instead. See: https://nextjs.org/docs/messages/no-head-import-in-document', type: 'ImportDeclaration', }, ], @@ -86,7 +86,7 @@ ruleTester.run('no-head-import-in-document', rule, { code: ` import Document, { Html, Main, NextScript } from 'next/document' import Head from 'next/head' - + class MyDocument extends Document { render() { return ( @@ -100,14 +100,14 @@ ruleTester.run('no-head-import-in-document', rule, { ) } } - + export default MyDocument `, filename: 'pages/_document.page.tsx', errors: [ { message: - 'next/head should not be imported in pages/_document.page.tsx. Import Head from next/document instead. See: https://nextjs.org/docs/messages/no-head-import-in-document', + '`next/head` should not be imported in `pages/_document.page.tsx`. Use `
` from `next/document` instead. See: https://nextjs.org/docs/messages/no-head-import-in-document', type: 'ImportDeclaration', }, ], @@ -116,7 +116,7 @@ ruleTester.run('no-head-import-in-document', rule, { code: ` import Document, { Html, Main, NextScript } from 'next/document' import Head from 'next/head' - + class MyDocument extends Document { render() { return ( @@ -130,14 +130,14 @@ ruleTester.run('no-head-import-in-document', rule, { ) } } - + export default MyDocument `, filename: 'pages/_document/index.js', errors: [ { message: - 'next/head should not be imported in pages/_document/index.js. Import Head from next/document instead. See: https://nextjs.org/docs/messages/no-head-import-in-document', + '`next/head` should not be imported in `pages/_document/index.js`. Use `
` from `next/document` instead. See: https://nextjs.org/docs/messages/no-head-import-in-document', type: 'ImportDeclaration', }, ], @@ -146,7 +146,7 @@ ruleTester.run('no-head-import-in-document', rule, { code: ` import Document, { Html, Main, NextScript } from 'next/document' import Head from 'next/head' - + class MyDocument extends Document { render() { return ( @@ -160,14 +160,14 @@ ruleTester.run('no-head-import-in-document', rule, { ) } } - + export default MyDocument `, filename: 'pages/_document/index.tsx', errors: [ { message: - 'next/head should not be imported in pages/_document/index.tsx. Import Head from next/document instead. See: https://nextjs.org/docs/messages/no-head-import-in-document', + '`next/head` should not be imported in `pages/_document/index.tsx`. Use `
` from `next/document` instead. See: https://nextjs.org/docs/messages/no-head-import-in-document',
type: 'ImportDeclaration',
},
],
diff --git a/test/unit/eslint-plugin-next/no-html-link-for-pages.test.ts b/test/unit/eslint-plugin-next/no-html-link-for-pages.test.ts
index 93cacf99edc7..e5aa38beecb1 100644
--- a/test/unit/eslint-plugin-next/no-html-link-for-pages.test.ts
+++ b/test/unit/eslint-plugin-next/no-html-link-for-pages.test.ts
@@ -246,7 +246,7 @@ describe('no-html-link-for-pages', function () {
assert.notEqual(report, undefined, 'No lint errors found.')
assert.equal(
report.message,
- "Do not use the HTML tag to navigate to /. Use Link from 'next/link' instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages"
+ 'Do not use an `` element to navigate to `/`. Use `` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages'
)
})
@@ -257,7 +257,7 @@ describe('no-html-link-for-pages', function () {
assert.notEqual(report, undefined, 'No lint errors found.')
assert.equal(
report.message,
- "Do not use the HTML tag to navigate to /list/foo/bar/. Use Link from 'next/link' instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages"
+ 'Do not use an `` element to navigate to `/list/foo/bar/`. Use `` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages'
)
const [secondReport] = linter.verify(
secondInvalidDynamicCode,
@@ -269,7 +269,7 @@ describe('no-html-link-for-pages', function () {
assert.notEqual(secondReport, undefined, 'No lint errors found.')
assert.equal(
secondReport.message,
- "Do not use the HTML tag to navigate to /list/foo/. Use Link from 'next/link' instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages"
+ 'Do not use an `` element to navigate to `/list/foo/`. Use `` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages'
)
const [thirdReport] = linter.verify(thirdInvalidDynamicCode, linterConfig, {
filename: 'foo.js',
@@ -277,7 +277,7 @@ describe('no-html-link-for-pages', function () {
assert.notEqual(thirdReport, undefined, 'No lint errors found.')
assert.equal(
thirdReport.message,
- "Do not use the HTML tag to navigate to /list/lorem-ipsum/. Use Link from 'next/link' instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages"
+ 'Do not use an `` element to navigate to `/list/lorem-ipsum/`. Use `` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages'
)
})
})
diff --git a/test/unit/eslint-plugin-next/no-img-element.test.ts b/test/unit/eslint-plugin-next/no-img-element.test.ts
index 0db0d7f2a9a3..e9d255a64d5d 100644
--- a/test/unit/eslint-plugin-next/no-img-element.test.ts
+++ b/test/unit/eslint-plugin-next/no-img-element.test.ts
@@ -38,7 +38,7 @@ ruleTester.run('no-img-element', rule, {
render() {
return (