title: Next.js: Error: React.Children.only expected to receive a single React element child
body: <p>I'm having a component called <code>Nav</code> inside <code>components</code> directory and it's code is some thing like below:</p>
  
  <pre><code>import Link from 'next/link';
  
  const Nav = () =&gt; {
      return(
          &lt;div&gt;
              &lt;Link href="/"&gt;  &lt;a&gt; Home &lt;/a&gt; &lt;/Link&gt;
              &lt;Link href="/about"&gt; &lt;a&gt; About &lt;/a&gt;  &lt;/Link&gt;
          &lt;/div&gt;
      )
  }
  
  export default Nav;
  </code></pre>
  
  <p>This gives me the error:</p>
  
  <p><code>Error: React.Children.only expected to receive a single React element child.</code></p>
  
  <p>But if I remove the <code>&lt;a&gt;</code> tags within <code>&lt;Link&gt;</code> components, I can view the pages, but then in the console I'm getting a warning of:  </p>
  
  <p><code>Warning: You're using a string directly inside &lt;Link&gt;. This usage has been deprecated. Please add an &lt;a&gt; tag as child of &lt;Link&gt;</code></p>
  
  <p>So what am I doing wrong here?</p>