4

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!

Improve this question

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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.
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

Improve this answer

1 Comment

According to here firebase.google.com/pricing, it seems like now Firebase is 2million free invocations a month as well
0 
7:07:50 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)

I had the error above. I solved it by ensuring the app ran locally without errors. In my case, I was using the .map with an <li></li> without providing a key.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.