Skip to content

feat: add support for WebAssembly in edge runtime #1676

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.

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

Merged
merged 26 commits into from
Oct 25, 2022
Merged

Conversation

ascorbic
Copy link
Contributor

@ascorbic ascorbic commented Oct 11, 2022

Summary

Adds support for wasm in the edge runtime. When Next.js builds a site that uses wasm in the edge runtime, it emits the wasm files into the .next/server/edge-chunks directory. The runtime expects these chunks to be available as arraybuffers as variables, named according to the chunk name. We do this by inlining them as base64-encoded strings, then wrapping those in decode() calls (using the Deno base64 lib).

Similarly, static assets such as fonts are replaced with blob: URLs, which use the chunk name for the path. We handle this in the same way as the Next edge runtime: by wrapping fetch and intercepting any calls that request a blob URI, returning the base64-encoded file in a Response instead.

This PR also adds the OG image lib to the default demo, and uses it for an e2e test.

Test plan

  1. Visit the the OG demo in the deploy preview

Relevant links (GitHub issues, Notion docs, etc.) or a picture of cute animal

image

Standard checks:

  • Check the Deploy Preview's Demo site for your PR's functionality
  • Add docs when necessary

🧪 Once merged, make sure to update the version if needed and that it was published correctly.

@netlify
Copy link

netlify bot commented Oct 11, 2022

Deploy Preview for netlify-plugin-nextjs-static-root-demo ready!

Name Link
🔨 Latest commit 4144135
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-static-root-demo/deploys/6356edbb4f07390009fc520e
😎 Deploy Preview https://deploy-preview-1676--netlify-plugin-nextjs-static-root-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Oct 11, 2022

Deploy Preview for netlify-plugin-nextjs-next-auth-demo ready!

Name Link
🔨 Latest commit 4144135
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-next-auth-demo/deploys/6356edbb1aac7700087cac65
😎 Deploy Preview https://deploy-preview-1676--netlify-plugin-nextjs-next-auth-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Oct 11, 2022

Deploy Preview for next-i18next-demo ready!

Name Link
🔨 Latest commit 4144135
🔍 Latest deploy log https://app.netlify.com/sites/next-i18next-demo/deploys/6356edbb5d6a9900098ca30d
😎 Deploy Preview https://deploy-preview-1676--next-i18next-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@github-actions github-actions bot added the type: feature code contributing to the implementation of a feature and/or user facing functionality label Oct 11, 2022
@netlify
Copy link

netlify bot commented Oct 11, 2022

Deploy Preview for netlify-plugin-nextjs-export-demo ready!

Name Link
🔨 Latest commit 4144135
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-export-demo/deploys/6356edbb03d4f80008dd9f77
😎 Deploy Preview https://deploy-preview-1676--netlify-plugin-nextjs-export-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Oct 11, 2022

Deploy Preview for nextjs-plugin-custom-routes-demo ready!

Name Link
🔨 Latest commit 4144135
🔍 Latest deploy log https://app.netlify.com/sites/nextjs-plugin-custom-routes-demo/deploys/6356edbb48c6c800096daf18
😎 Deploy Preview https://deploy-preview-1676--nextjs-plugin-custom-routes-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Oct 11, 2022

Deploy Preview for netlify-plugin-nextjs-nx-monorepo-demo ready!

Name Link
🔨 Latest commit 4144135
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-nx-monorepo-demo/deploys/6356edbba18792000c275a81
😎 Deploy Preview https://deploy-preview-1676--netlify-plugin-nextjs-nx-monorepo-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Oct 11, 2022

Deploy Preview for next-plugin-canary ready!

Name Link
🔨 Latest commit 4144135
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-canary/deploys/6356edbb5bf8f60008bc7dd3
😎 Deploy Preview https://deploy-preview-1676--next-plugin-canary.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Oct 11, 2022

Deploy Preview for next-plugin-edge-middleware ready!

Name Link
🔨 Latest commit 4144135
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-edge-middleware/deploys/6356edbb97ea8100095890de
😎 Deploy Preview https://deploy-preview-1676--next-plugin-edge-middleware.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Oct 11, 2022

Deploy Preview for next-plugin-rsc-demo ready!

Name Link
🔨 Latest commit 3563bb8
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-rsc-demo/deploys/634fcbdfcb2bff00097ee61d
😎 Deploy Preview https://deploy-preview-1676--next-plugin-rsc-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Oct 11, 2022

Deploy Preview for netlify-plugin-nextjs-demo ready!

Name Link
🔨 Latest commit 348abe0
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-demo/deploys/634d985c35ca5400083d8d5a
😎 Deploy Preview https://deploy-preview-1676--netlify-plugin-nextjs-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@ascorbic ascorbic changed the title feat: add wasm support feat: add support for WebAssembly in edge runtime Oct 17, 2022
@ascorbic ascorbic marked this pull request as ready for review October 17, 2022 18:02
@ascorbic ascorbic requested a review from a team October 17, 2022 18:02
@netlify
Copy link

netlify bot commented Oct 17, 2022

Deploy Preview for netlify-plugin-nextjs-demo ready!

Name Link
🔨 Latest commit 4144135
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-demo/deploys/6356edbb12522c0009f7600e
😎 Deploy Preview https://deploy-preview-1676--netlify-plugin-nextjs-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

nickytonline
nickytonline previously approved these changes Oct 17, 2022
Copy link

@nickytonline nickytonline left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and we got the OG image happening. WASM! (but make it somehow sound like Shazam!) 🚀

CleanShot 2022-10-17 at 18 48 28

Comment on lines +621 to +626
// We need to pretend there's no edge API routes, because otherwise it'll fail
// when we try to disable edge runtime.
const manifest = path.join('.next', 'server', 'middleware-manifest.json')
const manifestContent = await readJson(manifest)
manifestContent.functions = {}
await writeJSON(manifest, manifestContent)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't block the PR, but could we not have a separate test for the scenario when NEXT_DISABLE_NETLIFY_EDGE=1 and we have routes, that we expect it to throw? Or maybe I'm misunderstanding the error being explained here.

const { searchParams } = req.nextUrl
const username = searchParams.get('username')

return new ImageResponse(

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For context where this component is coming from, see the Vercel example, https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation#getting-started

@ascorbic ascorbic requested a review from nickytonline October 19, 2022 15:40
nickytonline
nickytonline previously approved these changes Oct 24, 2022
Copy link

@nickytonline nickytonline left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this @ascorbic!

Copy link

@nickytonline nickytonline left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@kodiakhq kodiakhq bot merged commit 530088c into main Oct 25, 2022
@kodiakhq kodiakhq bot deleted the mk/wasm-support branch October 25, 2022 05:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
automerge type: feature code contributing to the implementation of a feature and/or user facing functionality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants