[Next.JS Integration] making webpack-nextjs sample project work

[derais]

Link to the "webpack-nextjs" sample project in question

Related update: #1539

Recently found out the update that fixes the next.js implementation and the sample project along with it and I'm really happy it works! Doesn't work straight out the box, though. I originally made this discussion trying to find out how to fix it but I figured it out, so just here to share.

The fix involves simply moving the font and soundfont to the public folder. I'm not sure if I was missing anything but this fixed all the problems with the project.

It seems there might a missing file src/alphaTab.ts in the sample project as mentioned in the README.md, or at least I can't find them. I can't find it in alphaTab/src/webpack either. Wonder what it does, but the project seems to work fine.

Initial Setup:

1. git clone https://github.com/CoderLine/alphaTabSamplesWeb.git
2. /src/webpack-nextjs
3. pnpm install
4. pnpm dev

Initial Output:

Fixed Output

[Danielku15]

Seems there is still a slight problem with the copying of assets (web and sound fonts).

The WebPack plugin copies the files (to the output directory) and registers them as assets into WebPack. Normally this ensures they are served by the dev server.

In case of next.js npm run dev this seem to fail:

1. The output path is set to node_modules/.next/ and you will see the font and soundfont directories there.
2. But when trying to open the paths, WebPack doesn't serve the assets but a 404 page is shown.

This is a known problem in next.js:

vercel/next.js#32836
vercel/next.js#45478

I updated the sample at https://github.com/CoderLine/alphaTabSamplesWeb/tree/main/src/webpack-nextjs to work.