sigh, use @vercel/og or next/og conditionally based on version

Author: pieh

tests/fixtures/wasm-src/next.config.js

@@ -28,4 +28,28 @@ module.exports = {
     ignoreDuringBuilds: true,
   },
   outputFileTracingRoot: __dirname,
+
+  // there is no single way to use `next/og` or `@vercel/og` depending on Next.js version
+  //  - next@<14 doesn't have 'next/og' export
+  //  - next turbopack builds doesn't work with `@vercel/og`
+  // so this adds `next-og-alias` alias depending on next version for both webpack and turbopack
+  // so we can test this in all the versions
+  webpack: (config) => {
+    const hasNextOg = !satisfies(require('next/package.json').version, '<14.0.0', {
+      includePrerelease: true,
+    })
+
+    if (!hasNextOg) {
+      config.resolve.alias['next-og-alias$'] = '@vercel/og'
+    } else {
+      config.resolve.alias['next-og-alias$'] = 'next/og'
+    }
+
+    return config
+  },
+  turbopack: {
+    resolveAlias: {
+      'next-og-alias': 'next/og',
+    },
+  },
 }

tests/fixtures/wasm-src/package.json

@@ -11,6 +11,7 @@
     "@vercel/og": "latest",
     "next": "latest",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "semver": "^7.7.2"
   }
 }

tests/fixtures/wasm-src/src/app/og-node/route.js

@@ -1,4 +1,5 @@
-import { ImageResponse } from '@vercel/og'
+// see next.config for details about 'next-og-alias'
+import { ImageResponse } from 'next-og-alias'
 
 export async function GET() {
   return new ImageResponse(<div>hi</div>, {

tests/fixtures/wasm-src/src/app/og/route.js

@@ -1,4 +1,5 @@
-import { ImageResponse } from '@vercel/og'
+// see next.config for details about 'next-og-alias'
+import { ImageResponse } from 'next-og-alias'
 
 export async function GET() {
   return new ImageResponse(<div>hi</div>, {

tests/fixtures/wasm-src/src/pages/api/og-wrong-runtime.js

@@ -1,5 +1,5 @@
-// /pages/api/og.jsx
-import { ImageResponse } from '@vercel/og'
+// see next.config for details about 'next-og-alias'
+import { ImageResponse } from 'next-og-alias'
 
 export default function () {
   return new ImageResponse(

tests/fixtures/wasm-src/src/pages/api/og.js

@@ -1,5 +1,5 @@
-// /pages/api/og.jsx
-import { ImageResponse } from '@vercel/og'
+// see next.config for details about 'next-og-alias'
+import { ImageResponse } from 'next-og-alias'
 
 export const config = {
   runtime: 'edge',

tests/fixtures/wasm/app/og-node/route.js

@@ -1,4 +1,5 @@
-import { ImageResponse } from '@vercel/og'
+// see next.config for details about 'next-og-alias'
+import { ImageResponse } from 'next-og-alias'
 
 export async function GET() {
   return new ImageResponse(<div>hi</div>, {

tests/fixtures/wasm/app/og/route.js

@@ -1,4 +1,5 @@
-import { ImageResponse } from '@vercel/og'
+// see next.config for details about 'next-og-alias'
+import { ImageResponse } from 'next-og-alias'
 
 export async function GET() {
   return new ImageResponse(<div>hi</div>, {

tests/fixtures/wasm/next.config.js

@@ -1,5 +1,6 @@
 const { platform } = require('process')
 const fsPromises = require('fs/promises')
+const { satisfies } = require('semver')
 
 // Next.js uses `fs.promises.copyFile` to copy files from `.next`to the `.next/standalone` directory
 // It tries copying the same file twice in parallel. Unix is fine with that, but Windows fails
@@ -28,4 +29,28 @@ module.exports = {
     ignoreDuringBuilds: true,
   },
   outputFileTracingRoot: __dirname,
+  outputFileTracingRoot: __dirname,
+  // there is no single way to use `next/og` or `@vercel/og` depending on Next.js version
+  //  - next@<14 doesn't have 'next/og' export
+  //  - next turbopack builds doesn't work with `@vercel/og`
+  // so this adds `next-og-alias` alias depending on next version for both webpack and turbopack
+  // so we can test this in all the versions
+  webpack: (config) => {
+    const hasNextOg = !satisfies(require('next/package.json').version, '<14.0.0', {
+      includePrerelease: true,
+    })
+
+    if (!hasNextOg) {
+      config.resolve.alias['next-og-alias$'] = '@vercel/og'
+    } else {
+      config.resolve.alias['next-og-alias$'] = 'next/og'
+    }
+
+    return config
+  },
+  turbopack: {
+    resolveAlias: {
+      'next-og-alias': 'next/og',
+    },
+  },
 }

tests/fixtures/wasm/package.json

@@ -11,6 +11,7 @@
     "@vercel/og": "latest",
     "next": "latest",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "semver": "^7.7.2"
   }
 }