| import Document, { | |
| Html, | |
| Head, | |
| Main, | |
| NextScript, | |
| DocumentContext, | |
| DocumentInitialProps, | |
| } from "next/document"; | |
| import { ServerStyleSheet } from "styled-components"; | |
| import { SeoTags } from "src/components/SeoTags"; | |
| class MyDocument extends Document { | |
| static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> { | |
| const sheet = new ServerStyleSheet(); | |
| const originalRenderPage = ctx.renderPage; | |
| try { | |
| ctx.renderPage = () => | |
| originalRenderPage({ | |
| enhanceApp: App => props => sheet.collectStyles(<App {...props} />), | |
| }); | |
| const initialProps = await Document.getInitialProps(ctx); | |
| return { | |
| ...initialProps, | |
| styles: ( | |
| <> | |
| {initialProps.styles} | |
| {sheet.getStyleElement()} | |
| </> | |
| ), | |
| }; | |
| } finally { | |
| sheet.seal(); | |
| } | |
| } | |
| render() { | |
| return ( | |
| <Html lang="en"> | |
| <Head> | |
| <SeoTags | |
| description="JSON Crack Editor is a tool for visualizing into graphs, analyzing, editing, formatting, querying, transforming and validating JSON, CSV, YAML, XML, and more." | |
| title="JSON Crack - Visualize Data to Graphs" | |
| image="https://jsoncrack.com/assets/jsoncrack.png" | |
| /> | |
| <meta name="theme-color" content="#36393E" /> | |
| <link rel="manifest" href="/manifest.json" /> | |
| <link rel="icon" href="/favicon.ico" /> | |
| </Head> | |
| <body> | |
| <Main /> | |
| <NextScript /> | |
| </body> | |
| </Html> | |
| ); | |
| } | |
| } | |
| export default MyDocument; | |