3

Next.js 8.0 just introduced a new target: "serverless" config setting, described on this blog post. I set up a basic hello world app (here) to test it out. Copy-pasted the output of .next/serverless/pages/index.js to a Google Cloud Function (their equivalent of AWS Lambda) and had it call render() as outlined in the above blog post.

The problem I run into is that the page itself renders fine, but then it tries to fetch static assets (script files) at the same domain as the lambda, which of course doesn't work because there's nothing there but the lambda script.

You can see this happening here: enter image description here

The idea I was going for was to use this new feature of Next.js to implement a micro-frontend architecture. Each page in pages/ could have its own development team / lifecycle, and be scaled accordingly on the backend. That is one of the main selling points of this feature, right?

What is the standard way of solving this? Do I need to set up a separate server for the static assets? Then put both behind a load balancer or router of some sort? If so, doesn't that defeat the purpose of using this to develop micro-frontends, since the static assets would include "index.js", "about.js", and script files for each page, and would need to be redeployed any time any page is updated?

Hope what I'm saying makes sense. Any help appreciated!

NateQ
  • 781
  • 9
  • 13

2 Answers2

3

Do I need to set up a separate server for the static assets?

I'm new nextjs, but yes, I believe that is what you need.

Since you are on GCP, you might want to try Firebase because it includes the Google Cloud Functions (a FB Function is a Google Cloud Function just packaged and marketed separately) and static hosting that takes care of your requirement including the details you mentioned.

The one other issue is that this new serverless feature of nextjs seems a little more oriented towards AWS Lambda in that it packages the functions seperately. You are probably already aware but I will note anyway that GCP is 'project' oriented and all the functions in your project share a single entry point. I won't go into any more detail since it is not what you question is about, but this popular SO question goes into how to do that.

edit: I wrote that and then remembered this FB sample... a different way to host a nextjs app on Firebase based on an older version of nextjs.

Tom
  • 17,103
  • 8
  • 67
  • 75
  • Thank you! The info and links you provided are genuinely helpful. But also helpful in the sense that after playing around with FB as you suggested, I'm more certain that I'm trying to do the wrong thing. Seems that lambdas / cloud functions are not a way to implement micro-frontends, since the individual UI services would each still require a single server for the static assets, which defeats the point of splitting them up in the first place. – NateQ Feb 14 '19 at 20:56
1

In order for next.js to work with your google cloud functions, you need to create a next.config.js (I assume you already did) and add the assetprefix

const isProd = process.env.NODE_ENV === 'production'
module.exports = {
    target: 'serverless',
    assetPrefix: isProd ? 'https://yourRegion-projectId.cloudfunctions.net/functionName' : '',
}

after this, npm build and deploy again.

Google Cloud functions free invocations is 2,000,000. Firebase is 125,000.

Update - Firebase free invocation is now 2,000,000/month

Someone Special
  • 12,479
  • 7
  • 45
  • 76
  • According to here https://firebase.google.com/pricing, it seems like now Firebase is 2million free invocations a month as well – forestclown May 30 '21 at 14:53