Next.js+Rust+WebAssembly+Marpでスライドを自動生成するwebアプリを作る

npx create-next-app@latest project-name --use-npm

PS C:\Users\my-name\Desktop> npx create-next-app@latest project-name --use-npm
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... No
Creating a new Next.js app in C:\Users\my-name\Desktop\project-name.

npm run build

npm run start

cargo new directory-name --lib
cd directory-name
wasm-pack build --target web

Error: crate-type must be cdylib to compile to wasm32-unknown-unknown. Add the following to your Cargo.toml file:

[lib]
crate-type = ["cdylib", "rlib"]
Caused by: crate-type must be cdylib to compile to wasm32-unknown-unknown. Add the following to your Cargo.toml file:

[lib]
crate-type = ["cdylib", "rlib"]

[lib]
crate-type = ["cdylib", "rlib"]

[INFO]: 🎯  Checking for the Wasm target...
[INFO]: 🌀  Compiling to Wasm...
   Compiling backend v0.1.0 (C:\Users\my-name\Desktop\project-name\directory-name)
    Finished release [optimized] target(s) in 0.14s
Error: Ensure that you have "wasm-bindgen" as a dependency in your Cargo.toml file: 
[dependencies]
wasm-bindgen = "0.2"
Caused by: Ensure that you have "wasm-bindgen" as a dependency in your Cargo.toml file:
[dependencies]
wasm-bindgen = "0.2"

[dependencies]
wasm-bindgen = "0.2"

npm install @wasm-tool/wasm-pack-plugin webpack

import path from "path";
import WasmPackPlugin from "@wasm-tool/wasm-pack-plugin";
import { fileURLToPath } from "url";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const nextConfig = {
  webpack: (config, {}) => {
    config.plugins.push(
      new WasmPackPlugin({
        crateDirectory: path.resolve(__dirname, "./directory-name"),
        outDir: path.resolve(__dirname, "./public/pkg"),
        outName: "rust_wasm",
      })
    );
    config.experiments = {
      syncWebAssembly: true,
      layers: true,
    };
    return config;
  },
};

export default nextConfig;

use wasm_bindgen::prelude::*;

#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(a: &str);
}

macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    console_log!("Hello, {}", name);
    format!("Hello, {}!", name)
}

#[wasm_bindgen]
pub fn add(a: isize, b: isize) -> isize {
    console_log!("called add function");
    a + b
}

"use client";
import { useEffect, useState } from "react";
import initSync, { greet, add } from "../../public/pkg";

export default function Home() {
  const [greeting, setGreeting] = useState("now loading...");
  const [num, setNum] = useState(0);

  const greetAndAdd = () => {
    const greeting = greet("World");
    setGreeting(greeting);
    setNum((num) => add(num, 1));
  };

  useEffect(() => {
    initSync();
  }, []);

  return (
    <center>
      <h1>{greeting}</h1>
      <h1>{num}</h1>
      <button onClick={greetAndAdd}>greet and add button</button>
    </center>
  );
}

Hello, World!
0
greet and add button

{
    ...
    "dependencies": {
        ...
        "file-name": "file:public/pkg"
    }
    ...
}

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.