Deploying Next.js Static App to Google App Engine

In this tutorial, I will be going over how to utilize the free tier of Google App Engine to host your next Next.js static application.

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:

Free Trial and Free Tier Services and 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

App Engine uses app.yaml config file to tell Google Cloud about your project structure and how to resolve different urls. Below is an example:

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/(.*)

If you haven’t already, create an App Engine application in your Google Cloud project. You can select any runtime. Why? Since you are only serving static files, App Engine won’t even bother to use the runtime environment.

The way your files are served is determined by url handlers.

• url is a POSIX regex expression that catches a url. Each of these handlers are checked from top to bottom, so make sure your regex only matches the url routes you want!
• secure makes sure that you are using http to https redirects
• static_files is where locally the file you want associated with a url exists. I moved my static files from out to another folder named after my project id. Inside this folder I have the app.yaml file and a www directory which contains all the static files. Notice how in the second url handler we are using \1 . This is a replacement for whatever route the url regex matches. So if about is matched, then \1 is the equivalent.
• upload just tells App Engine where to find these files once again. Don’t really know why it can’t be inferred by static_files but I include it just in case.

Deploying

Write gcloud app deploy in the command line you are done!