diff --git a/errors/no-page-custom-font.md b/errors/no-page-custom-font.md
index 51052a34422cbe..edcea71d99b333 100644
--- a/errors/no-page-custom-font.md
+++ b/errors/no-page-custom-font.md
@@ -3,7 +3,7 @@
 ### Why This Error Occurred
 
 - The custom font you're adding was added to a page - this only adds the font to the specific page and not the entire application.
-- The custom font you're adding was added to a separate component within `Document` - this disables automatic font optimiztion.
+- The custom font you're adding was added to a separate component within `Document` - this disables automatic font optimization.
 
 ### Possible Ways to Fix It
 
diff --git a/examples/cms-kontent/components/cover-image.js b/examples/cms-kontent/components/cover-image.js
index 7b00d3adf6a44b..cf76be52975fdf 100644
--- a/examples/cms-kontent/components/cover-image.js
+++ b/examples/cms-kontent/components/cover-image.js
@@ -17,7 +17,7 @@ export default function CoverImage({ title, src, slug }) {
   return (
     <div className="sm:mx-0">
       {slug ? (
-        <Link href={slug}>
+        <Link href={`/posts/${slug}`}>
           <a aria-label={title}>{image}</a>
         </Link>
       ) : (
diff --git a/examples/cms-kontent/lib/api.js b/examples/cms-kontent/lib/api.js
index a56eaea5020175..e764e982e9f430 100644
--- a/examples/cms-kontent/lib/api.js
+++ b/examples/cms-kontent/lib/api.js
@@ -1,5 +1,5 @@
 import { DeliveryClient } from '@kentico/kontent-delivery'
-import { name, version } from '../package.json'
+import pkg from '../package.json'
 
 const sourceTrackingHeaderName = 'X-KC-SOURCE'
 
@@ -9,7 +9,7 @@ const client = new DeliveryClient({
   globalHeaders: (_queryConfig) => [
     {
       header: sourceTrackingHeaderName,
-      value: `@vercel/next.js/example/${name};${version}`,
+      value: `@vercel/next.js/example/${pkg.name};${pkg.version}`,
     },
   ],
 })
diff --git a/examples/with-semantic-ui/.nowignore b/examples/with-semantic-ui/.nowignore
deleted file mode 100644
index 5a4be6a065e24b..00000000000000
--- a/examples/with-semantic-ui/.nowignore
+++ /dev/null
@@ -1,5 +0,0 @@
-node_modules
-.next
-/*.*
-!package.json
-!next.config.js
diff --git a/examples/with-semantic-ui/next.config.js b/examples/with-semantic-ui/next.config.js
deleted file mode 100644
index eb7401b4d74058..00000000000000
--- a/examples/with-semantic-ui/next.config.js
+++ /dev/null
@@ -1,17 +0,0 @@
-module.exports = {
-  webpack(config) {
-    config.module.rules.push({
-      test: /\.(png|svg)$/,
-      use: {
-        loader: 'url-loader',
-        options: {
-          limit: 8192,
-          publicPath: '/_next/static/',
-          outputPath: 'static/',
-          name: '[name].[ext]',
-        },
-      },
-    })
-    return config
-  },
-}
diff --git a/examples/with-semantic-ui/package.json b/examples/with-semantic-ui/package.json
index 71c24979c11711..2a65dfe3a87aa4 100644
--- a/examples/with-semantic-ui/package.json
+++ b/examples/with-semantic-ui/package.json
@@ -6,15 +6,10 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^9.1.8-canary.11",
+    "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "semantic-ui-css": "^2.4.1",
-    "semantic-ui-react": "^0.84.0"
-  },
-  "devDependencies": {
-    "file-loader": "^3.0.1",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.29.0"
+    "semantic-ui-react": "^2.0.4"
   }
 }
diff --git a/examples/with-semantic-ui/pages/SmallImage.png b/examples/with-semantic-ui/pages/SmallImage.png
deleted file mode 100644
index edf0cb07f1071c..00000000000000
Binary files a/examples/with-semantic-ui/pages/SmallImage.png and /dev/null differ
diff --git a/examples/with-semantic-ui/pages/_app.js b/examples/with-semantic-ui/pages/_app.js
index dab88340b17732..fff8612068fe7f 100644
--- a/examples/with-semantic-ui/pages/_app.js
+++ b/examples/with-semantic-ui/pages/_app.js
@@ -1,8 +1,6 @@
 import 'semantic-ui-css/semantic.min.css'
-import './styles.css'
+import '../styles/global.css'
 
-function MyApp({ Component, pageProps }) {
+export default function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }
-
-export default MyApp
diff --git a/examples/with-semantic-ui/pages/index.js b/examples/with-semantic-ui/pages/index.js
index 3f3af9f09e199e..9e0ad421f31da7 100644
--- a/examples/with-semantic-ui/pages/index.js
+++ b/examples/with-semantic-ui/pages/index.js
@@ -1,50 +1,46 @@
-import { Modal, Button, Icon } from 'semantic-ui-react'
-
-import SmallImage from './SmallImage.png'
-import LargeImage from './LargeImage.png'
+import Image from 'next/image'
+import * as React from 'react'
+import { Button, Header, Modal, Icon } from 'semantic-ui-react'
 
 export default function Home() {
+  const [open, setOpen] = React.useState(false)
+
   return (
     <div className="centered">
       <Icon size="massive" name="world" />
       <div className="separator" />
-      <Modal trigger={<Button>Show Modal</Button>}>
-        <Modal.Header>
-          <em>publicPath</em> should be set to <em>/_next/static/</em>
-        </Modal.Header>
-        <Modal.Content>
+      <Modal
+        onClose={() => setOpen(false)}
+        onOpen={() => setOpen(true)}
+        open={open}
+        trigger={<Button>Show Modal</Button>}
+      >
+        <Modal.Header>Select a Photo</Modal.Header>
+        <Modal.Content image>
+          <span style={{ marginRight: 21 }}>
+            <Image src="/image.png" width={400} height={266} />
+          </span>
           <Modal.Description>
-            <div className="wrapper">
-              <div className="row">
-                <p>
-                  Larger content should be still available as a fallback to{' '}
-                  <em>fileLoader</em> but it should not pollute{' '}
-                  <em>/.next/static/css</em> folder. You should see two images
-                  below. One, smaller, loaded as data url, and one, bigger,
-                  loaded via url.
-                </p>
-              </div>
-              <div className="row">
-                <img src={SmallImage} />
-                <p>
-                  A small image should be loaded as data url:{' '}
-                  <em>{SmallImage.substr(0, 100)}...</em>
-                </p>
-              </div>
-
-              <div className="row">
-                <img src={LargeImage} />
-                <p>
-                  A large image should be loaded as a url: <em>{LargeImage}</em>
-                </p>
-              </div>
-              <p className="border">
-                You should also still be able to load regular css. This text
-                should have border.
-              </p>
-            </div>
+            <Header>Default Profile Image</Header>
+            <p>
+              We've found the following gravatar image associated with your
+              e-mail address.
+            </p>
+            <p>Is it okay to use this photo?</p>
           </Modal.Description>
         </Modal.Content>
+        <Modal.Actions>
+          <Button color="black" onClick={() => setOpen(false)}>
+            Nope
+          </Button>
+          <Button
+            content="Yep, that's me"
+            labelPosition="right"
+            icon="checkmark"
+            onClick={() => setOpen(false)}
+            positive
+          />
+        </Modal.Actions>
       </Modal>
     </div>
   )
diff --git a/examples/with-semantic-ui/pages/LargeImage.png b/examples/with-semantic-ui/public/image.png
similarity index 100%
rename from examples/with-semantic-ui/pages/LargeImage.png
rename to examples/with-semantic-ui/public/image.png
diff --git a/examples/with-semantic-ui/pages/styles.css b/examples/with-semantic-ui/styles/global.css
similarity index 100%
rename from examples/with-semantic-ui/pages/styles.css
rename to examples/with-semantic-ui/styles/global.css
diff --git a/packages/eslint-plugin-next/lib/rules/no-html-link-for-pages.js b/packages/eslint-plugin-next/lib/rules/no-html-link-for-pages.js
index e7a07aa9f30d12..73a32d1462b3ae 100644
--- a/packages/eslint-plugin-next/lib/rules/no-html-link-for-pages.js
+++ b/packages/eslint-plugin-next/lib/rules/no-html-link-for-pages.js
@@ -90,6 +90,14 @@ module.exports = {
           return
         }
 
+        const target = node.attributes.find(
+          (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'target'
+        )
+
+        if (target && target.value.value === '_blank') {
+          return
+        }
+
         const href = node.attributes.find(
           (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'href'
         )
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 fa868428bf8432..d0ce0c7ea46dec 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
@@ -96,6 +96,20 @@ export class Blah extends Head {
   }
 }
 `
+const validTargetBlankLinkCode = `
+import Link from 'next/link';
+
+export class Blah extends Head {
+  render() {
+    return (
+      <div>
+        <a target="_blank" href='/new-tab'>New Tab</a>
+        <h1>Hello title</h1>
+      </div>
+    );
+  }
+}
+`
 
 const validPublicFile = `
 import Link from 'next/link';
@@ -211,6 +225,13 @@ describe('no-html-link-for-pages', function () {
     assert.deepEqual(report, [])
   })
 
+  it('valid target="_blank" link element', function () {
+    const report = linter.verify(validTargetBlankLinkCode, linterConfig, {
+      filename: 'foo.js',
+    })
+    assert.deepEqual(report, [])
+  })
+
   it('valid public file link element', function () {
     const report = linter.verify(validPublicFile, linterConfig, {
       filename: 'foo.js',