Webpack 5 Static Asset Generation - mismatch between module import value and file location

[defx]

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

14.17.3

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

I am trying to use Webpack 5 to generate custom static content (e.g., asset with hashed filename) and then store these assets inside _next/static so that they are available to the application at runtime.

I am able to get Webpack to generate the file, however the new file location is _next/server/static/**/* while the imported module path is _next/static/**/*, so the asset 404's on the frontend.

See steps to reproduce below.

Expected Behavior

I expect the assets to be stored a .next/static/**/* so that they are available to the application at runtime.

To Reproduce

1. Modify the Webpack configuration in your next.config

    config.module.rules.push(
      {
        test: /\.woff2/,
        type: "asset/resource",
        generator: {
           filename: "static/[hash][ext][query]",
         },
      }
    )

2. Import one of the assets into _document.tsx

import futuraPro from "../../public/fonts/futura-pt-pro-book.woff2"

3. Check the import value

The value of futuraPro is now /_next/static/244be8576be754ff0614.woff2 👍

4. Check the filesystem location of the new asset

The file was generated and stored at .next/server/static/244be8576be754ff0614.woff2 so the asset 404's on the frontend.

[florian-milky]

What I found is that it doesn't seem to generate the asset for the frontend from _document. Have you tried importing from _app?
See #32165