Introduction

Next.js has become a popular choice for building modern web applications, thanks to its powerful features and excellent developer experience. When it comes to deploying your Next.js app, Google Cloud Run offers a scalable and cost-effective solution. In this guide, we'll walk through the process of deploying a Next.js application on Google Cloud Run, step by step.

Prerequisites

Before we begin, make sure you have the following:

1. A Next.js application ready for deployment
2. A Google Cloud account
3. Google Cloud SDK installed on your local machine
4. Docker installed on your local machine

Step 1: Set Up Your Google Cloud Project

First, let's create a new project in Google Cloud:

1. Go to the Google Cloud Console
2. Click on the project dropdown and select "New Project"
3. Give your project a name and click "Create"

Once your project is created, make sure to note down the Project ID, as we'll need it later.

Step 2: Enable Required APIs

Enable the necessary APIs for your project:

1. In the Cloud Console, go to "APIs & Services" > "Dashboard"
2. Click on "+ ENABLE APIS AND SERVICES"
3. Search for and enable the following APIs:
   • Cloud Run API
   • Cloud Build API
   • Container Registry API

Step 3: Prepare Your Next.js Application

To deploy your Next.js app on Cloud Run, we need to make a few adjustments:

1. Update your package.json file to include a start script:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p $PORT"
  }
}

2. Create a .dockerignore file in your project root to exclude unnecessary files:

Dockerfile
.dockerignore
node_modules
npm-debug.log
README.md
.next
.git

3. Create a Dockerfile in your project root:

# Use the official Node.js 14 image as a parent image
FROM node:14-alpine

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of your app's source code
COPY . .

# Build your Next.js app
RUN npm run build

# Expose the port the app runs on
EXPOSE 3000

# Start the app
CMD ["npm", "start"]

Step 4: Build and Push Your Docker Image

Now, let's build and push your Docker image to Google Container Registry:

1. Authenticate Docker with Google Cloud:

gcloud auth configure-docker

2. Build your Docker image:

docker build -t gcr.io/[PROJECT-ID]/nextjs-app .

Replace [PROJECT-ID] with your Google Cloud Project ID.

3. Push the image to Google Container Registry:

docker push gcr.io/[PROJECT-ID]/nextjs-app

Step 5: Deploy to Google Cloud Run

With your image pushed to the Container Registry, you can now deploy it to Cloud Run:

1. Deploy your application:

gcloud run deploy nextjs-app \
  --image gcr.io/[PROJECT-ID]/nextjs-app \
  --platform managed \
  --region us-central1 \
  --allow-unauthenticated

2. Once the deployment is complete, Cloud Run will provide you with a URL where your app is accessible.

Step 6: Set Up Continuous Deployment with Cloud Build

To automate future deployments, let's set up Cloud Build:

1. Create a cloudbuild.yaml file in your project root:

steps:

# Build the container image
  - name: 'gcr.io/cloud-builders/docker'
    args: ['build', '-t', 'gcr.io/$PROJECT_ID/nextjs-app', '.']

# Push the container image to Container Registry
  - name: 'gcr.io/cloud-builders/docker'
    args: ['push', 'gcr.io/$PROJECT_ID/nextjs-app']

# Deploy container image to Cloud Run
  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
    entrypoint: gcloud
    args:
      - 'run'
      - 'deploy'
      - 'nextjs-app'
      - '--image'
      - 'gcr.io/$PROJECT_ID/nextjs-app'
      - '--region'
      - 'us-central1'
      - '--platform'
      - 'managed'
      - '--allow-unauthenticated'
images:
  - 'gcr.io/$PROJECT_ID/nextjs-app'

2. Set up a trigger in Cloud Build:
   • Go to Cloud Build > Triggers
   • Click "Create Trigger"
   • Connect your repository
   • Configure the trigger settings (e.g., branch to watch)
   • Select "Cloud Build configuration file" and enter cloudbuild.yaml
   • Create the trigger

Now, every time you push to your specified branch, Cloud Build will automatically build and deploy your Next.js app to Cloud Run.

Conclusion

You've successfully deployed your Next.js application on Google Cloud Run! This serverless platform allows your app to scale automatically based on traffic, and you only pay for the resources you use. With the continuous deployment setup, you can focus on developing your app while Cloud Build takes care of the deployment process.

Remember to monitor your app's performance and costs in the Google Cloud Console, and make adjustments as needed to optimize your deployment.