Next.js: Guide for hosting Next's static assets with Now?

[jonikorpi]

https://zeit.co (which I think is a Next app?) seems to host its static assets at https://cdn.zeit.co, which seems to be a serve app?

How does this setup work? Does it do cache-busting? Would be great to see a guide or example of some sort, as this seems to be something more people than just me are interested in (Slack thread).

This seems like a viable alternative to using something like CloudFlare, a more complicated CDN solution, or messing around with Docker to host static Next assets. Would be great to be able to keep the entire app inside Now. :)

[sergiodxa]

If you use now to deploy you can do this:

• deploy your Next app and set an alias like frontend.domain.com
• deploy your statics with now
• alias your statics to cdn.domain.com
• use now path aliases to alias /static to your cdn.domain.com and use the next app as default path

This way you have your statics with serve (default static deploy) or set a docker with nginx, or whatever you want to use.

[jonikorpi]

Thank you! I _almost_ got this to work.

If I do my path aliasing like this:

{
  "rules": [
    { "pathname": "/static/**", "dest": "cdn.kausi.xyz" },
    { "dest": "app.kausi.xyz" }
  ]
}

It means that a request to /static/favicon.png goes to cdn.kausi.xyz/static/favicon.png. Which means I need to deploy not only the contents of the /static/ folder, but also the folder itself.

So I can't just add another package.json to my /static/ folder and have that handle the asset deployment, because that will only deploy the folder's contents, resulting in cdn.kausi.xyz/favicon.png.

Any ideas for a sane way to get around this? Something like…

• Change the path alias rules somehow so that they point to cdn.kausi.xyz/ instead of cdn.kausi.xyz/static/?
• Tell serve to wrap the assets in a folder named "static" before deploying?
• Somehow handle the deployment from a single package.json at the app's root?
• Symlinks? 😨

My code is viewable here, if it helps: https://github.com/jonikorpi/kausi/tree/master/static

[arunoda]

It means that a request to /static/favicon.png goes to cdn.kausi.xyz/static/favicon.png. Which means I need to deploy not only the contents of the /static/ folder, but also the folder itself.

Actually, you can write/use a simple proxy which capture static resources, if they are not there on your CDN server.

Change the path alias rules somehow so that they point to cdn.kausi.xyz/ instead of cdn.kausi.xyz/static/?

One other option is to to not to do path aliases. Then use a custom server to send a 301 redirect link to your CDN when someone hits a /static url.

[jonikorpi]

While I did eventually get this working, it turned into a pretty overly complex setup that also used up an extra now instance. Seems like it's not worth the hassle to me, at least. I eventually ended up just using express's static serving, and now also next export + serve for simpler apps.

I'm closing this for now, but feel free to reopen if you plan to write up a guide or further support a setup like this.