在 Google App Engine 上运行的 NextJs 应用程序的正确配置是什么？

Question

I feel like I've tried everything inside of app.yaml and next.config.js and so I'm just asking, what is the proper configuration to get a NextJs app running on Google App Engine?

The only way that I'm able to get it working is to remove all instances of <Link href="..."> and using the following app.yaml.

runtime: nodejs10

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

env_variables:
  ...

I've tried the following with no luck

runtime: nodejs10

service: default
handlers:
  - url: /_next
    static_dir: .next
    secure: always
  - url: /static
    static_dir: static
    secure: always
  - url: /.*
    secure: always
    script: auto

env_variables:
  ...

Here are the versions of modules that I'm using.

"dependencies": {
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "@zeit/next-workers": "1.0.1-canary.1",
    "apollo-cache-inmemory": "^1.6.3",
    "apollo-client": "^2.6.4",
    "apollo-link-http": "^1.5.16",
    "autoprefixer": "^9.6.4",
    "cannon": "^0.6.2",
    "compression": "^1.7.4",
    "d3-ease": "^1.0.5",
    "express": "^4.17.1",
    "firebase": "^7.2.1",
    "firebase-admin": "^8.6.1",
    "graphql": "^14.5.8",
    "graphql-tag": "^2.10.1",
    "gsap": "^2.1.3",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-optipng": "^7.1.0",
    "imagemin-pngquant": "^8.0.0",
    "imagemin-svgo": "^7.0.0",
    "isomorphic-unfetch": "^3.0.0",
    "next": "9.1.2",
    "next-compose-plugins": "^2.2.0",
    "next-fonts": "^0.18.0",
    "next-images": "^1.2.0",
    "next-optimized-images": "^2.5.3",
    "next-react-svg": "1.1.0",
    "node-sass": "^4.12.0",
    "postcss-loader": "^3.0.0",
    "react": "16.11.0",
    "react-cookie": "^4.0.1",
    "react-dom": "16.11.0",
    "react-ga": "^2.7.0",
    "react-howler": "^3.7.4",
    "react-icons": "^3.7.0",
    "react-no-ssr": "^1.1.0",
    "react-progress-label": "^3.1.3",
    "react-resize-detector": "^4.2.0",
    "react-scroll": "^1.7.14",
    "react-slick": "^0.25.2",
    "react-spring": "^8.0.27",
    "shortid": "^2.2.15",
    "styled-jsx": "3.2.1",
    "tailwindcss": "^1.1.2",
    "three": "^0.108.0"
},
"devDependencies": {
    "@storybook/addon-a11y": "^5.2.0",
    "@storybook/addon-actions": "^5.2.1",
    "@storybook/addon-backgrounds": "^5.2.0",
    "@storybook/addon-console": "^1.2.1",
    "@storybook/addon-knobs": "^5.2.1",
    "@storybook/addon-links": "^5.2.1",
    "@storybook/addon-viewport": "^5.2.0",
    "@storybook/addons": "^5.2.1",
    "@storybook/react": "^5.2.1",
    "@storybook/storybook-deployer": "^2.8.1",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-inline-react-svg": "^1.1.0",
    "chalk": "^2.4.2",
    "dopl": "^0.2.0",
    "entities": "^2.0.0",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "eslint": "^6.4.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-loader": "^3.0.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-hooks": "^2.2.0",
    "gulp": "^4.0.2",
    "jest": "^24.9.0",
    "minimist": "^1.2.0",
    "packpath": "^0.1.0",
    "react-generate-props": "^0.6.0",
    "require-context.macro": "^1.1.1",
    "storybook-loader": "^0.1.4",
    "worker-loader": "^2.0.0"
}

Answer 1

When working with SSR(Sever Side Rendering) make sure you to check the intended code is running on server or the browser. If getIntialProps is fetching from localhost when running on browser your code will will break.

Answer 2

Just in case someone else stumbles across this, have this little nugget. It'll help you get your NextJS working with local isomorphic fetches on GAE (Google App Engine). I've converted this into a module. See @layerframers/whereami

https://gist.github.com/robksawyer/476e05c2f6a34f4f48ca4fc33e01bd91