You have a Next JS application and you want to use a Google API. Here's how to do it!

Google exposes a ton of APIs for developers to tap into their services. Check out the full list of Google APIs.

This will work for all Google APIs but for this example we'll set up an integration with Google Analytics Data API (GA4) specifically.

Contents

• Contents
• Create an Analytics Property
• Enable the API
• Base64 Encode the Credentials file
• Create an Environment variable
• Install Client Libraries
• Create and Export Client

Create an Analytics Property

You'll first need to actually have a property setup in Analytics so that you have a project that you can pull data from.

Setting up and Analytics Property is not in the scope of this article it's recommended to refer to Google's documentation for this.

How to set up Google Analytics 4 ->

Enable the API

on the API Quickstart page, you'll want to select Enable the Google Analytics Data API v1 button. Enter in a name for your project and continue.

You'll recieve a downloaded .json file that holds credentials for a service account that can interact with your property.

Before the next step you'll also want to go ahead and add the service account to the property.

Base64 Encode the Credentials file

The easiest way to Base64 encode files like this is with Notepad++.

Once you have Notepad++ downloaded, you'll want to start by copying your credentials.json file to your clipboard.

In Notepad++ you can select the option Plugins -> MIME Tools -> Base64 Encode.

This should convert your json file to a long encoded string. This encoded string will be used as our environment variable in our Next JS application.

Create an Environment variable

In your Next JS application we'll need to create a local environment variable and also add that variable to our vercel deployment (if you're not using vercel you'll want to add this variable to whichever place you store and source environment variables for your application).

If you don't have any local environment files, go ahead and create a .env.local file at the root directory of your Next JS repository (don't forget to ignore your local environment variables inside of .gitignore so that you don't expose your secrets!).

# .env.local
GOOGLE_APPLICATION_CREDENTIALS=your_base64_encoded_string

Install Client Libraries

Since we're working in a Next JS project in the node ecosystem we'll want to install the node client.

npm install @google-analytics/data
# or
yarn add @google-analytics/data
# or
pnpm add @google-analytics/data

Create and Export Client

For Next JS projects, a good place to put your Google API clients is inside of a lib directory so that you can import clients and client functions inside of API routes, or inside of your pages (on the server).

// lib/google/client.ts

import { BetaAnalyticsDataClient } from '@google-analytics/data'
const credential = JSON.parse(
  Buffer.from(process.env.GOOGLE_APPLICATION_CREDENTIALS, 'base64').toString()
)
export const analyticsDataClient = new BetaAnalyticsDataClient({
  projectId: credential.project_id,
  credentials: {
    client_email: credential.client_email,
    private_key: credential.private_key,
  },
})

Now you can import analyticsDataClient in any of your server-side files and interact with the API!