Update next/link error when no children are provided (#35453)

* Update next/link error when no children are provided

* update manifest

* Apply suggestions from code review

Co-authored-by: Balázs Orbán <info@balazsorban.com>

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>
+  )
+}
+```

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"

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'

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>
+  )
+}

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()