Deploy your Next.js Application on Google App Engine in minutes.
By: Dipesh K.C.
Tags: Programming, Deployment, JavaScript, Google App Engine, Nodejs

2. Preparing a basic Next.js App

Let’s prepare a simple Next.js application to deploy on the google app Engine.

npx create-next-app

I will name my project as next-gae-deploy .

This is the initial folder structure we get by running the above command.

Now lets edit pages/index.js file to write a basic sample code to deploy.

Running App Locally

If we run yarn dev on our project, it runs successfully as expected.

Starting Deployment Process

Let's start by configuring the project on the google cloud Console.

Step1: Visit here and make a new project with your project name and organization.

Step 2: Under Compute section of your dashboard. Click on App Engine . Then click on Create Application .

Step 3: Select the desired region for you and click on Create app .

Step 4: Since we need Nodejs server for our Nextjs Application, we select Node.js as our language. There are two environments i.e. Standard and Flexible to choose from. For this article, I will show configuration with both standard and flexible. For now, we will go with the Standard environment. You can visit here for detailed comparisons.

Step 5: Enable billing.

That’s what we need to do for the cloud console configuration. Now we can get back to our code.

Configuration on Nextjs Project

The main file we need to add is app.yml on the root of the project.

app.yaml

You configure your App Engine app’s settings in the app.yaml file. This file specifies how URL paths correspond to request handlers and static files. The app.yaml file also contains information about your app's code, such as the runtime and the latest version identifier.

The syntax of app.yaml is the YAML format.

Here I will show three different configurations. You can choose according to your requirements.

Configuration 1(Simple Standard Setup)

Let me explain this code briefly.

[Line 1]: There are two environments available to choose from i.e. Standard and Flexible. You can visit here for detailed comparisons. We will use the Standard environment.

[Line 2]: We need a Node.js server for handling our Nextjs project for cases like SSR. Here we go with the latest available Nodejs runtime i.e. nodejs14 .

. [Line 3]: Every App Engine application includes a default service. We can also deploy multiple projects in the same google app engine project with the help of different services.

service. We can also deploy multiple projects in the same google app engine project with the help of different services. [Line 4–7]: The handlers provides a list of URL patterns and descriptions of how they should be handled. But in our case, there are none of the static mappings. In our case For every request, /.* we want GAE to rely on Nextjs to indicate what files to load. So we mention script:auto for this use case. Similarly, Requests for a URL that match this handler that does not use HTTPS are automatically redirected to the HTTPS URL with the same path with the use of secure: always option.

Configuration 2 (Solves the cold start problem with Standard Environment)

In the previous configuration, we will feel a cold start if there is no request for a while[even 15–20 minutes]. Then the request after the first request will take around 10 seconds [waiting for the full duration of the new instance to be started].

Here we use warmup requests to reduce request and response latency during the time when your app’s code is being loaded to a newly created instance.

Line[3]: There are F1 , F2 , F4 , F4_1G different options for instance_class in case of automatic scaling. You can select as per your requirements. Visit here for more details.

, , , different options for instance_class in case of automatic scaling. You can select as per your requirements. Visit here for more details. Line[7–9]: We have added automatic scaling here. Visit here for a more detailed explanation.

The min-idle-instances make reference to the instances that are ready to support your application in case you receive high traffic or CPU intensive tasks The min_instances which are the instances used to process the incoming request immediately.

For this property to work we must make sure that warmup request is enabled. We have enabled on Line[5–6]. You can also create your handler that does any warmup logic that is needed by your app to the requests that are sent to the warmup requests URL i.e. /_ah/warmup . Visit here for example.

Configuration 3 (Flexible Environment)

Nextjs Features like Image Component with Optimization, Incremental Static Regeneration requires nextjs cache folder to be read/written on runtime. But our Standard Environment has read and write access only to the /tmp directory. So in such cases, we can use a flexible Environment. Basic Configuration is shown below. You can tweak them as per your requirements following this official documentation.

Note: This Setup has no cold start problem because it has a minimum 1 instance running(default:2)

URL Formation

For default service

In our case it is ▶️ https://nextjs-deploy.an.r.appspot.com/

2. For custom service

If we configure service as api instead of default then URL becomes

instead of then URL becomes https://api-dot-nextjs.an.r.appspot.com/

.gcloudignore

We can create this file on the root of the project to indicate if we don't want to deploy certain files.

package.json

We will include start script[Line 8]. GAE runs on port 8080 and uses the start script by default in the package.json file.

Final Folder Structure

Deployment

//Before running this command,you need to install google cloud SDK.Follow this link 1. yarn build

2. gcloud app deploy --project nextjs-deploy OR you may add this script in your package.json "deploy": "yarn build && gcloud app deploy --project nextjs-deploy" and simply run yarn deploy

Detecting Logs

Option1: You can view logs by running the following command.

gcloud app logs tail -s default — project nextjs-deploy

Option2: Visiting your google console Dashboard

Under COMPUTE section of your project dashboard➡️ Select App Enine ➡️ Select Services ➡️ Under your desired service ➡️ Under the Diagnose column select debug option on Tools Dropdown.

CONCLUSION

If you get lost on any part you can check my Github project.

That’s it for this article. This is the end of our short journey to deploying Next.js Application on Google App Engine. Hope this will help you with your project. Any kind of suggestions would be highly appreciable. Happy Coding ☺.