Skip to content

Commit

Permalink
[Docs] Update examples to favour functional _document (#39871)
Browse files Browse the repository at this point in the history 
## Changes

- Migrate class based `_document`s to functional documents 
- Removed `_document.js` where default
- Removed `MyDocument.getInitialProps` where default

## Motivation

This removes some boilerplate and prepares examples for server components.

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
  • Loading branch information
@HaNdTriX
HaNdTriX committed Aug 23, 2022
1 parent b856283 commit 64a3697
Show file tree
Hide file tree
Showing 30 changed files with 419 additions and 540 deletions.
47 changes: 16 additions & 31 deletions examples/auth-with-stytch/pages/_document.tsx
View file
@@ -1,33 +1,18 @@
import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
} from 'next/document'
import { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}

render() {
return (
<Html>
<Head>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
export default function Document() {
return (
<Html>
<Head>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}

export default MyDocument
24 changes: 11 additions & 13 deletions examples/blog-starter/pages/_document.tsx
View file
@@ -1,15 +1,13 @@
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
70 changes: 27 additions & 43 deletions examples/blog/pages/_document.tsx
View file
@@ -1,47 +1,31 @@
import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
} from 'next/document'
import { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
export default function Document() {
const meta = {
title: 'Next.js Blog Starter Kit',
description: 'Clone and deploy your own Next.js portfolio in minutes.',
image: 'https://assets.vercel.com/image/upload/q_auto/front/vercel/dps.png',
}

render() {
const meta = {
title: 'Next.js Blog Starter Kit',
description: 'Clone and deploy your own Next.js portfolio in minutes.',
image:
'https://assets.vercel.com/image/upload/q_auto/front/vercel/dps.png',
}

return (
<Html lang="en">
<Head>
<meta name="robots" content="follow, index" />
<meta name="description" content={meta.description} />
<meta property="og:site_name" content={meta.title} />
<meta property="og:description" content={meta.description} />
<meta property="og:title" content={meta.title} />
<meta property="og:image" content={meta.image} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourname" />
<meta name="twitter:title" content={meta.title} />
<meta name="twitter:description" content={meta.description} />
<meta name="twitter:image" content={meta.image} />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
return (
<Html lang="en">
<Head>
<meta name="robots" content="follow, index" />
<meta name="description" content={meta.description} />
<meta property="og:site_name" content={meta.title} />
<meta property="og:description" content={meta.description} />
<meta property="og:title" content={meta.title} />
<meta property="og:image" content={meta.image} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourname" />
<meta name="twitter:title" content={meta.title} />
<meta name="twitter:description" content={meta.description} />
<meta name="twitter:image" content={meta.image} />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}

export default MyDocument
24 changes: 11 additions & 13 deletions examples/cms-contentful/pages/_document.js
View file
@@ -1,15 +1,13 @@
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
24 changes: 11 additions & 13 deletions examples/cms-cosmic/pages/_document.js
View file
@@ -1,15 +1,13 @@
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
24 changes: 11 additions & 13 deletions examples/cms-datocms/pages/_document.js
View file
@@ -1,15 +1,13 @@
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
24 changes: 11 additions & 13 deletions examples/cms-drupal/pages/_document.js
View file
@@ -1,15 +1,13 @@
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
24 changes: 11 additions & 13 deletions examples/cms-ghost/pages/_document.js
View file
@@ -1,15 +1,13 @@
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
24 changes: 11 additions & 13 deletions examples/cms-graphcms/pages/_document.js
View file
@@ -1,15 +1,13 @@
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
24 changes: 11 additions & 13 deletions examples/cms-kontent/pages/_document.js
View file
@@ -1,15 +1,13 @@
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
24 changes: 11 additions & 13 deletions examples/cms-prepr/pages/_document.js
View file
@@ -1,15 +1,13 @@
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
24 changes: 11 additions & 13 deletions examples/cms-prismic/pages/_document.js
View file
@@ -1,15 +1,13 @@
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}

0 comments on commit 64a3697

Please sign in to comment.