Next.js: Assets (images) in firebase examples

[paintedbicycle]

In the firebase examples (I'm using Typescript from the next.js example folder) but have also tried https://github.com/jthegedus/firebase-functions-next-example), it's not clear how to add images - as any attempt to add them to the /src/public folder included in the examples or indeed a /src/static folder (to match what is recommended in the next.js docs) ends in a 404 error for the static resources (at least when running npm run dev).

It seems to be a particularity of the way firebase wants the assets (in their public folder) vs the way next.js wants them. A workaround that I came up with is to add an extra build step in package.json that duplicates the assets folder inside src in order to get assets working in dev. You can see more in https://github.com/jthegedus/firebase-functions-next-example/issues/24#issuecomment-461571124 but it seems less than ideal. Is there a clean way to do this?

/cc @sampsonjoliver

[santoshyadavdev]

Hi @timneutkens ,
Is this issue still open, i can take it, just need guidance.

[timneutkens]

I guess it is, feel free to have a look @santoshyadav198613!

[jthegedus]

I am in the process of updating the example. Next.js v9.1 begins the deprecation of static in favor of a public folder which should remove any confusion, however, either way should work without conflict because of the resolution of Firebase Hosting routes:

The different Firebase Hosting configuration options described on this page can sometimes overlap. If there is a conflict, Hosting determines its response using the following priority order:

1. Reserved namespaces that begin with a /__/* path segment
2. Configured redirects
3. Exact-match static content
4. Configured rewrites
5. Custom 404 page
6. Default 404 page

Docs: https://firebase.google.com/docs/hosting/full-config#hosting_priority_order

3 matches content in public/ before 4 matches /static/* content.

As you correctly point out, it doesn't work with dev command, because this is just running next dev and not the Firebase Hosting emulator and therefore it does not use the above resolution order and you would need to duplicate the content in each folder to see the content in dev mode.

Hopefully the addition of a public folder will align these features and there will no longer be this discrepancy.

[paintedbicycle]

Cool, looking forward to the docs updates. So far I can't update past next 9.0.6 because it won't deploy to firebase at all, complaining about /src/ first and now complaining about /pages/ folder

[paintedbicycle]

As an update, I moved the static assets to the public directory as is the new best practice in my app.

So:

--app
--functions
--public
--stylesheets

and used the default package.json scripts from the firebase example to copy and create the dist

  "scripts": {
    "dev": "next \"src/app/\"",
    "preserve": "npm run build-public && npm run build-funcs && npm run build-app && npm run copy-deps && npm run install-deps",
    "serve": "cross-env NODE_ENV=production firebase serve",
    "predeploy": "npm run build-public && npm run build-funcs && npm run build-app && npm run copy-deps",
    "deploy": "firebase deploy",
    "clean": "rimraf \"dist/functions/**\" && rimraf \"dist/public\"",
    "build-public": "cpx \"src/public/**/*.*\" \"dist/public\" -C",
    "build-funcs": "babel \"src/functions\" --out-dir \"dist/functions\"",
    "build-app": "next build \"src/app/\"",
    "copy-deps": "cpx \"*{package.json,package-lock.json,yarn.lock}\" \"dist/functions\" -C",
    "install-deps": "cd \"dist/functions\" && npm i"
  },

This still works on the server side, but locally the assets (images, fonts) don't work with npm run dev until you duplicate the src/public folder to src/app/public. Similar to my hack from before.

It will work with npm run serve locally, but that's not ideal.

So for now you need still need to add another script in the package.json folder than copies your public folder to this location locally (or just do it manually)