diff --git a/errors/link-no-children.md b/errors/link-no-children.md
new file mode 100644
index 0000000000000..103018f1f80e0
--- /dev/null
+++ b/errors/link-no-children.md
@@ -0,0 +1,35 @@
+# No children were passed to <Link>
+
+#### Why This Error Occurred
+
+In your application code `next/link` was used without passing a child:
+
+For example:
+
+```js
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <Link href="/about"></Link>
+    // or
+    <Link href='/about' />
+  )
+}
+```
+
+#### Possible Ways to Fix It
+
+Make sure one child is used when using `<Link>`:
+
+```js
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <Link href="/about">
+      <a>To About</a>
+    </Link>
+  )
+}
+```
diff --git a/errors/manifest.json b/errors/manifest.json
index d80ef5787008c..ae234227e6472 100644
--- a/errors/manifest.json
+++ b/errors/manifest.json
@@ -514,6 +514,10 @@
           "title": "future-webpack5-moved-to-webpack5",
           "path": "/errors/future-webpack5-moved-to-webpack5.md"
         },
+        {
+          "title": "link-no-children",
+          "path": "/errors/link-no-children.md"
+        },
         {
           "title": "link-multiple-children",
           "path": "/errors/link-multiple-children.md"
diff --git a/packages/next/client/link.tsx b/packages/next/client/link.tsx
index 9bb634d251adc..379d21123e152 100644
--- a/packages/next/client/link.tsx
+++ b/packages/next/client/link.tsx
@@ -231,6 +231,11 @@ function Link(props: React.PropsWithChildren<LinkProps>) {
     try {
       child = React.Children.only(children)
     } catch (err) {
+      if (!children) {
+        throw new Error(
+          `No children were passed to <Link> with \`href\` of \`${props.href}\` but one child is required https://nextjs.org/docs/messages/link-no-children`
+        )
+      }
       throw new Error(
         `Multiple children were passed to <Link> with \`href\` of \`${props.href}\` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children` +
           (typeof window !== 'undefined'
diff --git a/test/integration/client-navigation/pages/link-no-child.js b/test/integration/client-navigation/pages/link-no-child.js
new file mode 100644
index 0000000000000..e3786f932ee78
--- /dev/null
+++ b/test/integration/client-navigation/pages/link-no-child.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      Hello World. <Link href="/about"></Link>
+    </div>
+  )
+}
diff --git a/test/integration/client-navigation/test/index.test.js b/test/integration/client-navigation/test/index.test.js
index 2414ac400a1aa..b0fc4128bf953 100644
--- a/test/integration/client-navigation/test/index.test.js
+++ b/test/integration/client-navigation/test/index.test.js
@@ -60,6 +60,14 @@ describe('Client Navigation', () => {
       await browser.close()
     })
 
+    it('should have proper error when no children are provided', async () => {
+      const browser = await webdriver(context.appPort, '/link-no-child')
+      expect(await hasRedbox(browser, true)).toBe(true)
+      expect(await getRedboxHeader(browser)).toContain(
+        'No children were passed to <Link> with `href` of `/about` but one child is required'
+      )
+    })
+
     it('should navigate back after reload', async () => {
       const browser = await webdriver(context.appPort, '/nav')
       await browser.elementByCss('#about-link').click()