Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adds missing JavaScript codeblock in Opengraph Image API reference #50996

Merged
merged 7 commits into from
Jun 8, 2023
Merged

Adds missing JavaScript codeblock in Opengraph Image API reference #50996

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
889d935
Adds missing JavaScript codeblock in Opengraph Image API reference
manovotny Jun 8, 2023
25d3cce
Merge branch 'canary' into adds-missing-js-codeblock-in-opengraph-ima…
manovotny Jun 8, 2023
394bd4b
Merge branch 'canary' into adds-missing-js-codeblock-in-opengraph-ima…
kodiakhq[bot] Jun 8, 2023
e91ba4c
Fixes codeblock language
manovotny Jun 8, 2023
d8aa96f
Fixes filename extension
manovotny Jun 8, 2023
c112134
Fixes filename extension
manovotny Jun 8, 2023
b4e095c
Fixes filename extension
manovotny Jun 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
52 changes: 46 additions & 6 deletions docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ export default async function Image() {
}
```

```jsx filename="app/about/opengraph-image.js" switcher
```jsx filename="app/about/opengraph-image.jsx" switcher
import { ImageResponse } from 'next/server'

// Route segment config
Expand Down Expand Up @@ -225,7 +225,7 @@ export default function Image({ params }: { params: { slug: string } }) {
}
```

```jsx filename="app/shop/[slug]/opengraph-image.js" switcher
```jsx filename="app/shop/[slug]/opengraph-image.jsx" switcher
export default function Image({ params }) {
// ...
}
Expand Down Expand Up @@ -262,7 +262,7 @@ export const alt = 'My images alt text'
export default function Image() {}
```

```jsx filename="opengraph-image.js / twitter-image.js" switcher
```jsx filename="opengraph-image.jsx / twitter-image.jsx" switcher
export const alt = 'My images alt text'

export default function Image() {}
Expand All @@ -280,7 +280,7 @@ export const size = { width: 1200, height: 630 }
export default function Image() {}
```

```jsx filename="opengraph-image.js / twitter-image.js" switcher
```jsx filename="opengraph-image.jsx / twitter-image.jsx" switcher
export const size = { width: 1200, height: 630 }

export default function Image() {}
Expand All @@ -299,7 +299,7 @@ export const contentType = 'image/png'
export default function Image() {}
```

```jsx filename="opengraph-image.js / twitter-image.js" switcher
```jsx filename="opengraph-image.jsx / twitter-image.jsx" switcher
export const contentType = 'image/png'

export default function Image() {}
Expand All @@ -326,7 +326,7 @@ export const runtime = 'edge'
export default function Image() {}
```

```jsx filename="app/opengraph-image.js" switcher
```jsx filename="app/opengraph-image.jsx" switcher
export const runtime = 'edge'

export default function Image() {}
Expand Down Expand Up @@ -380,3 +380,43 @@ export default async function Image({ params }: { params: { slug: string } }) {
)
}
```

```jsx filename="app/posts/[slug]/opengraph-image.jsx" switcher
import { ImageResponse } from 'next/server'

export const runtime = 'edge'

export const alt = 'About Acme'
export const size = {
width: 1200,
height: 630,
}
export const contentType = 'image/png'

export default async function Image({ params }) {
const post = await fetch(`https://.../posts/${params.slug}`).then((res) =>
res.json()
)

return new ImageResponse(
(
<div
style={{
fontSize: 48,
background: 'white',
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
{post.title}
</div>
),
{
...size,
}
)
}
```