Deploy your Next.js Application on Google App Engine in minutes.
Hello Developers 👋. In this article, I will demonstrate how easily we can deploy the Next.js Application on Google App Engine within minutes.
Visit my other article if you want to deploy your Next.js Application on Firebase Platform using Cloud Function with Firebase Hosting.
2. Preparing a basic Next.js App
Let’s prepare a simple Next.js application to deploy on the google app Engine.
I will name my project as
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
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.
You configure your App Engine app’s settings in the
app.yamlfile. This file specifies how URL paths correspond to request handlers and static files. The
app.yamlfile 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.
- [Line 3]: Every App Engine application includes a
defaultservice. We can also deploy multiple projects in the same google app engine project with the help of different services.
- [Line 4–7]: The
handlersprovides 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:autofor 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
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: There are
F4_1Gdifferent 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.
min-idle-instancesmake reference to the instances that are ready to support your application in case you receive high traffic or CPU intensive tasks
min_instanceswhich 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)
- In our case it is ▶️ https://nextjs-deploy.an.r.appspot.com/
- If we configure service as
defaultthen URL becomes
We can create this file on the root of the project to indicate if we don't want to deploy certain files.
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
//Before running this command,you need to install google cloud SDK.Follow this link1. yarn build
2. gcloud app deploy --project nextjs-deployOR you may add this script in your package.json"deploy": "yarn build && gcloud app deploy --project nextjs-deploy"and simply run yarn deploy
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
COMPUTE section of your project dashboard➡️ Select
App Enine ➡️ Select
Services➡️ Under your desired service ➡️ Under the
Diagnose column select
debug option on
If you get lost on any part you can check my Github project.
Contribute to dipesh429/nextjs-gae-deploy development by creating an account on GitHub.
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 ☺.