Can I make zoned apps deploy statics to the same bucket and share identical chunks?

[guilhermehn]

I have a scenario similar to this:

• https://example.com -> nginx reverse proxy
• https://example.com/a -> Next.js app A
• https://example.com/b -> Next.js app B
• https://example.com/c -> Next.js app C

All apps:

• share the same exact configs (next.config.js and babel.config.js)
• use the same next, react, react-dom versions
• runs on the same node versions (10)
• only SSR (because of user authentication)
• statics are exported and published to the same S3 bucket

This already works in Next 9.1, but with the introduction of granular chunks (specially the framework chunk) it means that two or more apps can generate the same exact chunk.

Is this a foreseen scenario? Is it safe for an app to use chunks generated by another app?

[timneutkens]

You'll want to upload them to separate directories and update assetPrefix accordingly as it's not guaranteed to be safe (and the buildid changes also).

[alexandre-marchina]

Thank you @timneutkens for your answer.

Adding more details to what @guilhermehn already stated, we share this build configuration between these zoned apps, and we have a custom file-loader setup to extract images and webfonts to the root directory of the exported assets (similar with the expected behavior that the splitted chunks will have, outside of the generated BUILD_ID), in which the extracted file names are based on it's contents

So, as an example, the build of two different apps running in zones - using the exact same config - looks something like this (without even upgrading to Next 9.3)

ZONED APP A
next/
├── static
    ├── 01c89454b7ec6291af4a6a6d6ef4a66d.png
    ├── c8f760d021cebb7ae68dc4cf808ac917.svg
    ├── (... and other extracted files)
    ├── chunks
    │   ├── commons.64823f2a09095940a2c6.js
    │   └── styles.9ed31753355a3e77db0f.js
    ├── css
    │   ├── commons.dedc14ad.chunk.css
    │   └── styles.31225a2b.chunk.css
    ├── runtime
    │   ├── main-91d6e8e1f1df5a5fc0e2.js
    │   └── webpack-11a9822115acf8ceee4b.js
    └── (BUILDID)
        └── pages
            ├── _app.js
            ├── _error.js
            ├── zone-a
            │   ├── zoned-page.js


ZONED APP B
 next/
├── static
    ├── 01c89454b7ec6291af4a6a6d6ef4a66d.png
    ├── c8f760d021cebb7ae68dc4cf808ac917.svg
    ├── (... and other extracted files, same ones from the other zone)
    ├── chunks
    │   ├── commons.962a18de4e20f8db308b.js (different chunk names)
    │   └── styles.999d8844503cdd39c478.js
    ├── css
    │   ├── commons.a1471c43.chunk.css  (different chunk names)
    │   └── styles.661ed070.chunk.css
    ├── runtime
    |    ├── main-f0a754ba481afb932d52.js  (different chunk names)
    |    └── webpack-9369c5c69dbf6d4912cb.js
    └── (BUILDID)  (different build IDs)
        └── pages
            ├── _app.js
            ├── _error.js
            ├── zone-b
            │   ├── zoned-page.js

Is there a safe and recommended way of sharing assets between zoned apps (not being with that upload on the same root of a bucket)? Our main goal it's to spare the end user from downloading again those same files as they navigate between different zones.