How to deploy a next.js app to google app engine (GAE)

[Pixelatex]

I cannot find any documentation on how to deploy next.js apps to GAE.

There are 2 issues with these deploys:

1. You cannot include public files to be copied over (app.yaml file should be in the root of my build)
2. The output folder (.next) is not recognized as a valid file for GAE deploys.

I've searched high and low but cannot find anything on this.

[bradrisse]

next.config.js

module.exports = {
  distDir: 'build',
}

• Google App Engine doesn't recognize .next folder so you need to change the folder from .next to build using the distDir parameter in the next.config.js

app.yaml

env: standard
runtime: nodejs12
service: default

handlers:
  - url: /.*
    secure: always
    script: auto

• The newest version of nextjs has dependencies that require nodejs12, so setting the runtime to nodejs12 fixes that issue
• the /.* ensures access to all folders and sub folders within the build folder
• secure always ensures https is used
• script auto tells GAE to rely on nextjs to indicate what files to load instead of index.js

package.json -> scripts

"start": "next start -p 8080"

• GAE runs on port 8080 and uses the start script by default in the package.json file

BONUS POINTS

package.json -> scripts

"build": "rm -rf ./build && NODE_ENV=production next build",
"start": "next start -p 8080",
"deploy": "npm run build && gcloud app deploy"

• the build script command removes the existing build folder and then runs a new build, this prevents nextjs making multiple versions and running into issues uploading many unnecessary previous builds during deploy

• the deploy script command runs the build script and the app deploy command

• if your fearless "deploy": "npm run build && gcloud app deploy --quiet" use the quiet tag so you don't have to type "y" to confirm deploy

.gcloudignore

You should only be upload the build folder and public folder to GAE. To prevent uploading source code you should add these lines to the .gcloudignore files. /pages is just the standard folder for basic next projects, if you have more like /components/, or /store/ you should add those too.

# Next.js source code
/pages/

Dynamic Catch All Route

If you are using the dynamic catch all route blog/[...slug].js then you might get this error

ERROR: (gcloud.app.deploy) INVALID_ARGUMENT: Filename cannot contain '.', '..', '\r', start with '-', '_ah/', or '\n': blog/[...slug]/index.js

Basically GAE doesn't like when files names have ... in them. To fix this your package.json scripts should now be

"gcp-predeploy": "find ./build -name '\\[...*' -exec bash -c 'mv \"$1\" \"${1/.../@@@}\"' -- {} \\;",
"gcp-build": "find ./build -name '\\[@@@*' -exec bash -c 'mv \"$1\" \"${1/@@@/...}\"' -- {} \\;",
"build": "rm -rf ./build && NODE_ENV=production next build",
"start": "next start -p 8080",
"deploy": "npm run build && npm run gcp-predeploy && gcloud app deploy"

So now the deploy script runs build which removes the existing build folder, builds a new one, then replaces the dynamic all route file names from [...slug].js to [@@@slug].js, deploys the app, and once the app is uploaded GAE runs gcp-build and renames them back to [...slug].js

This fix was taken from here and modified #10556 (comment)

[FBosler]

What a thorough answer :) Kudos!

[ollyde]

Also reguarding --quiet I would suggest just using pipe y, cause they will let you accept any issues/config changes etc, y | gcloud app deploy. --quiet can introduce bugs.

[christianguevara]

Google fixed the [...] problem in files :)
#10556 (comment)

[jonolayton]

Epic help - thanks very much

[bradrisse]

I have created a demo repository https://github.com/bradrisse/nextjs-9-gae-demo

[sriramveeraghanta]

Can you update the repo with gcloudignore file also?

[bradrisse]

Added

[forest1206]

Thanks for your great work.
I followed same approach with your repo and tried to deploy to gae, but could not succeed.
it shows 500 error and I guess the server didn't start correctly.
This is app.yaml

env: standard
runtime: nodejs14
service: default

handlers:
  - url: /.*
    secure: always
    script: auto

Here is my package.json

... ...
 "scripts": {
    "dev": "next -p 3030",
    "start": "next start",
    "serve": "next start",
    "build": "rimraf build && next build",
    "deploy": "gcloud app deploy --project stars-website-nextjs",
    "analyze": "cross-env ANALYZE=1 next build",
    "heroku-postbuild": "npm run build"
  }
... ...

It's wired since I have successfully deployed same project to vercel.
Can you please let me know what's wrong with my project?

[paulineramos]

@smartdev1206, try specifying the port for the start script, like "start": "next start -p 8080". I think that was one change that I had to do in my current project.

[stephen099]

Has anyone tried using the App Engine static file handler for Nextjs static content? Curious if there is a performance benefit as it should bypass the node server.

https://cloud.google.com/appengine/docs/standard/nodejs/serving-static-files

[clieee]

Anyone have experience of App engine and revalidate in getStaticProps since GAE is read only, I guess that wont work?

[dipeshhkc]

@clieee You can use "flexible" environment for the GAE deployment.[has write access since it uses docker setup]

[anthwinter]

Yeah, it doesn't work. App Engine logs explorer even shows that it can't write the file when it attempts this.

[Khalilw1]

I have struggled to find anyone talking about this. This is gold and not well documented in any tutorial. Thank you for the info <3

[Nickprovs]

Has anyone noticed a very slow first-page load when deploying to AppEngine standard? Once the server has been launched for the first time in a while - subsequent loads are very fast.

I've heard that you can configure a warmup route on standard which can increase speed - but I'm not too sure what I'd put in there.

If the app is deployed in AppEngine flex, page loads are very fast. But AppEngine Flex is FAR more expensive.

[dipeshhkc]

I think this article can help you 🙇

[forest1206]

Hi,@bradrisse
I followed your approach and tried to deploy to google app engine, but didn't succeed.
This is my package.json

 "scripts": {
    "dev": "next -p 3030",
    "start": "next start",
    "serve": "next start",
    "build": "rimraf build && next build",
    "deploy": "gcloud app deploy --project stars-website-nextjs",
    "analyze": "cross-env ANALYZE=1 next build",
    "heroku-postbuild": "npm run build"
  },

After uploading the src to gcp, server shows 500 error.
I guess the nodejs server didn't start correctly.
It's very wired since I successfully deployed same src to verce.com.
Any ideas why this isn't working?
Thank you in advance

[bradrisse]

Take a look at https://github.com/bradrisse/nextjs-9-gae-demo/blob/master/package.json, you are missing some scripts in the package

[odedbendov]

Anyone managed to use next/Image on GAE?

Images are optimized dynamically upon request and stored in the /cache/images directory.

which lead to EROFS: read-only file system, unlink errors, since it's not deployed in /tmp

Couldn't find where to customize this.

[christianguevara]

This might help https://medium.com/wesionary-team/deploy-your-next-js-application-on-google-app-engine-in-minutes-cf04c18011ac

Also according to https://cloud.google.com/appengine/docs/the-appengine-environments
Standard envs only have access to read/write to /tmp dir, making next/image not usable. Solution update to flex instance or just host in Vercel x)

[knowbody]

has anyone been successful with deploying to GAE and getting the images to work? if yes, what's your config?

I tried numerous ways and for me after building some images from the domain X load and some don't, with the response:
"url" parameter is valid but upstream response is invalid
and status code 444

tried it both on the standard and flex env

[Nickprovs]

Might look at this in more detail later but I've not had any trouble with my websites deployment.

Check my example client (next.js) yaml in
https://github.com/Nickprovs/showcase

[knowbody]

tried it just now, but also getting the same results... but thank you 🙌🏻

[Nickprovs]

Do you have a repo you can show us and a page/component where it's showing up as an issue?

[knowbody]

unfortunately it's not a public repo. I'm running "next": "^11.1.3-canary.7" (this is what was recommended on some other threads), and here's my next.config.js:

module.exports = {
  reactStrictMode: true,
  images: {
    domains: [
      "mydoimain.com"
    ],
  },
};

and the app.yaml (commented out part is what else I tried):

# env: standard
# runtime: nodejs14
# service: web-next

# handlers:
#   - url: /.*
#     secure: always
#     script: auto

# ---

# runtime: nodejs
# env: flex
# service: web-next
# automatic_scaling:
#     cool_down_period_sec: 180
#     cpu_utilization:
#         target_utilization: 0.9
# resources:
#     cpu: 1
#     memory_gb: 1
#     disk_size_gb: 10
# readiness_check:
#   app_start_timeout_sec: 1800

# ---

runtime: nodejs14
env: standard

service: web-next
handlers:
  - url: /.*
    secure: always
    script: auto

instance_class: F1
automatic_scaling:
  max_instances: 2
  min_instances: 0

[geekysaurabh001]

is the answer above still valid in 2023 NextJS version 13?