feat: add og

next.config.js

@@ -16,7 +16,7 @@ const config = {
     ignoreBuildErrors: true,
   },
   experimental: {
-    testProxy: true,
+    testProxy: process.env.NODE_ENV === 'test',
   },
   trailingSlash: true,
   webpack: (config) => {

playwright.config.ts

@@ -1,6 +1,9 @@
 import { devices } from '@playwright/test'
 import { defineConfig } from 'next/experimental/testmode/playwright.js'
 
+// @ts-expect-error - NODE_ENV is set for the test environment
+process.env.NODE_ENV = 'test'
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */

src/app/[locale]/opengraph-image.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable jsx-a11y/alt-text */
+/* eslint-disable @next/next/no-img-element */
+import { ImageResponse } from 'next/og'
+
+const size = {
+  width: 1200,
+  height: 630,
+}
+
+export const runtime = 'edge'
+
+const Image = async () => {
+  const logoSrc = await fetch(
+    new URL('../../assets/poi.png', import.meta.url),
+  ).then((res) => res.arrayBuffer())
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontSize: '240px',
+          fontWeight: '600',
+          lineHeight: '1.2em',
+          background: 'white',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <img src={logoSrc as unknown as string} height="400" />
+        <div>poi</div>
+      </div>
+    ),
+    {
+      ...size,
+    },
+  )
+}
+
+export default Image

src/app/[locale]/twitter-image.tsx

@@ -0,0 +1,5 @@
+import Image from './opengraph-image'
+
+export const runtime = 'edge'
+
+export default Image