Next titleとstyleが有効にならない

Next.js初心者です.
headのtitleとstyled-componentsがうまく行ってないのが問題です。
1.titleについてですが**<title> should not be used in _document.js's <Head>.**とコンソール出ていて、調べたところ_appの方に書けと書いてあったんですが、いまいちよくわかんないです。
2. 全くわからない。

//layouts/index
import { Main, NextScript, Html, Head } from "next/document";
import React from "react";
import styled from "styled-components";

export default () => (
  <Html lang="ja">
    <Head>
      <title>hoge</title>
      <meta charSet="utf-8" />
    </Head>
    <Body>
      <Main />
      <NextScript />
    </Body>
  </Html>
)

const Body = styled.body`
  color: red;
`;

//page/_document
import * as React from "react";
import Document, { DocumentContext } from "next/document";
import DefaultLayout from "~/layouts/index";
import { ServerStyleSheet } from "styled-components";

export default class extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRednderPage = ctx.renderPage;
    ctx.renderPage = () =>
      originalRednderPage({
        enhanceApp: (App: any) => (props: any) =>
          sheet.collectStyles(<App {...props} />)
      })
    const initialProps = await Document.getInitialProps(ctx);
    return { 
      ...initialProps,
      styles: [...(initialProps.styles as any), ...sheet.getStyleElement()]
    };
  }
  render() {
    return <DefaultLayout />;
  }
}