Deploying Next.js Static App to Google App Engine

Note

All a static website needs is a web server to serve your static files. Luckily, many cloud storage buckets can act like a web server. Google cloud storage buckets can host static websites; however, it does not support http to https redirects out of the box. In order for that to work, you would need to set up a load balancer in front of your bucket. And that costs money…

App Engine is one of products that Google Cloud offers in their free tier. You can find a list of other free tier products here: Google Cloud Free Tier Products

It is weird because to serve static files with App Engine it will automatically create a bucket for you and is also much easier to setup http to https redirects.

Setup

1. Create a Google Cloud project. Note that you are only allowed one App Engine application per project.
2. Download the Google Cloud SDK https://cloud.google.com/sdk/docs/install

Setting up Next.js

We need to build our files. Make sure you use none of dynamic server functions in Next, such as cookies, redirects, middleware, etc. This will prevent you from creating a static export. Simply, we will generate HTML, CSS, and JS files by adding this to our Next config file.

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
}
 
module.exports = nextConfig

Now, if we run next build , in our root directory we will find a out directory that contains all our static files. The above step is the same as running next build then next export .

Configuring your app.yaml for deployment

runtime: python27
api_version: 1
threadsafe: true

handlers:
  - url: /
    secure: always
    static_files: www/index.html
  
  - url: /(about|blog|faq|login|contact|privacy)
    secure: always
    mime_type: text/html
    static_files: www/\1.html
    upload: www/(.+).html
  
  - url: /(.*)
    secure: always
    static_files: www/\1
    upload: www/(.*)