Issue 1:
Bug report

Describe the bug

When the title tag is created in a sub-component inside the Head tag it get's set to nothing after the client side bundle takes over. When disabling the JS in the devtools you can see that when the SSR code is used the title tag is used correctly.

To Reproduce

Use the code below, load up the index page and you will see the title change from My title is set here to an empty string when the client side bundle takes over.

// Pages/index.js
import React from 'react';
import Head from "next/head";
import MetaTags from "./../components/MetaTags";

export default () => (
<Head>
<MetaTags />
</Head>
);

// components/MetaTags.js
import React, { Fragment } from 'react';

export default () => (
<Fragment>
<title>My title is set here</title>
</Fragment>
);

Expected behavior

Expect the client side code to behave like the SSR code when nesting a title tag in the Head component.

Screenshots

Example of loading the page from a new tab

Screenshot of DOM tree (JS turned off via Chrome devtools)

Screenshot of DOM tree (JS turned on)

System information

Version of Next.js: 7.0.2

Additional information

When putting the title tag directly in the Head component it works as expected

Issue 2:
Bug report

When using React.Fragment or anArray as a child of the next/head component, all the tags that are inside of them are not being rendered/parsed correctly into the DOM.

Describe the bug

I have an use case where I need to create a component that wraps head elements.

This component lives in a repository that is agnostic to NextJS, so I cannot encapsulate those head elements with the Head component provided by next/head directly.

Currently I'm returning those elements wrapped by a React.Fragment element, so it looks something like this:

<React.Fragment>
<title>{props.title}</title>
<meta name="description" content={props.description} />
</React.Fragment>

And in the repository where I'm using NextJS, I'm using that component like this:

<div>
<Head> // This comes from next/head
<ComponentThatRendersHeadTags title="Title" description="description" />
</Head>
...
</div>

However, when I mount that component and go to the head tag in my DOM, I can see that the title tag is being rendered with empty content (looks something like this: <title></title> and the meta tags are being rendered correctly but they don't have the next-head class that should be applied to them (don't know if this can cause problems when using Links or the Router itself).

I'm currently doing a workaround to this where I'm sending the next/head component as a prop to the component rendering the tags, so it looks something like this:

const { WrapperComponent } = props
return (
<WrapperComponent>
<title>{props.title}</title>
<meta name="description" content={props.description} />
</WrapperComponent>
)

And this approach is working correctly, filling the title tag with content and applying the next-head class to all of them.

P.S.: I actually don't know if this behavior of not accepting React.Fragment in Head is expected 😅

Expected behavior

Even though the workaround is working correctly, it would be cool if the next/head component supports React.Fragment or even an Array as a child.

System information

OS: macOS

Browser (if applies): Chrome

Version of Next.js:7.0.2

Additional context

Heys guys, I have been using NextJS for over a year now and I really love it ❤️

Keep the hard work 💪 thanks for everything 😄