bfd96ac012
- Fixes `with-webassembly` example unable to build with the current `next.config.js`. https://github.com/vercel/next.js/issues/29362#issuecomment-932767530 - Converted example to TypeScript ```js // Before config.output.webassemblyModuleFilename = 'static/wasm/[modulehash].wasm' // After config.output.webassemblyModuleFilename = isServer && !dev ? '../static/wasm/[modulehash].wasm' : 'static/wasm/[modulehash].wasm' ``` ``` > Build error occurred Error: Export encountered errors on following paths: / at /Users/max/dev/next.js/examples/with-webassembly/node_modules/next/dist/export/index.js:408:19 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Span.traceAsyncFn (/Users/max/dev/next.js/examples/with-webassembly/node_modules/next/dist/trace/trace.js:79:20) at async /Users/max/dev/next.js/examples/with-webassembly/node_modules/next/dist/build/index.js:1342:21 at async Span.traceAsyncFn (/Users/max/dev/next.js/examples/with-webassembly/node_modules/next/dist/trace/trace.js:79:20) at async /Users/max/dev/next.js/examples/with-webassembly/node_modules/next/dist/build/index.js:1202:17 at async Span.traceAsyncFn (/Users/max/dev/next.js/examples/with-webassembly/node_modules/next/dist/trace/trace.js:79:20) at async Object.build [as default] (/Users/max/dev/next.js/examples/with-webassembly/node_modules/next/dist/build/index.js:65:29) ELIFECYCLE Command failed with exit code 1. ``` ## Documentation / Examples - [X] Make sure the linting passes by running `pnpm build && pnpm lint` - [X] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
37 lines
1.3 KiB
Markdown
37 lines
1.3 KiB
Markdown
# WebAssembly example
|
|
|
|
This example shows how to import WebAssembly files (`.wasm`) and use them inside of a React component that is server rendered. So the WebAssembly code is executed on the server too. In the case of this example we're showing Rust compiled to WebAssembly.
|
|
|
|
## Preview
|
|
|
|
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
|
|
|
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-webassembly)
|
|
|
|
## How to use
|
|
|
|
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
|
|
|
|
```bash
|
|
npx create-next-app --example with-webassembly with-webassembly-app
|
|
```
|
|
|
|
```bash
|
|
yarn create next-app --example with-webassembly with-webassembly-app
|
|
```
|
|
|
|
```bash
|
|
pnpm create next-app --example with-webassembly with-webassembly-app
|
|
```
|
|
|
|
This example uses Rust compiled to wasm, the wasm file is included in the example, but to compile your own Rust code you'll have to [install](https://www.rust-lang.org/learn/get-started) Rust.
|
|
|
|
To compile `src/add.rs` to `add.wasm` run:
|
|
|
|
```bash
|
|
npm run build-rust
|
|
# or
|
|
yarn build-rust
|
|
# or
|
|
pnpm build-rust
|
|
```
|