Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Julian Bustos
Julian Bustos

Posted on

     

How to Integrate Google APIs in Your Next.js Project

Ever thought about using Google Docs or Sheets as more than just documents or spreadsheets? Imagine them as dynamic content sources or even simple databases for your applications. In this guide, we'll dive into how to set up Google's APIs to unlock these powerful services within your projects, transforming how you manage and access data.

The specific version of Next.js you're using won't impact this guide, as our focus is solely on obtaining API keys from Google's platform.

We will first need to create a new Service Account to do so gohere

Click on Start Free

Start Service Account

Read the terms of service and clickAgree & Continue.

  1. Create your Payment Profile (you won't be charged).
  2. SelectIndividual Profile Type if you're not a business.
  3. ClickCreate.
  4. Now add a payment method.
  5. ClickStart Free.
  6. Select your Cloud Platform options.

Great! Now that we have a Service Account set up, look for the menu on the left and click onAPIs & Services.

APIs & Services

Enable APIs & Services

Enable APIs & Services

Search for Google Sheets API and select it

Google Sheets API

ClickEnable

Great now we have the google sheets API enabled now let's create the credentials so we can programmatically connect to it.

Click onCreate Credentials

Create Credentials

Select Application Data & clickDone

Application Data

Now click on theIAM & Admin in the left menu and then clickService Accounts

Service Accounts

Now click on CreateService Account

Create Service Account

Give your account a name and a description and clickCreate And Continue

Select Owner as the Role and clickContinue

We can clickDone on the final step.

Now we can manage the keys for this account which will allow us to connect to Google Sheets.

Click on the 3 dots and selectManage Keys

Manage Keys

Click onAdd Key and then onCreate new key

Create New Key

Select theJSON option and clickCreate

Create JSON Keys

Save it somewhere safe and then open it in your code editor

Great all we really care about are the private_key and the client_email, these will allow us to establish the connection.

Go back to your Nextjs Project and in the .env.local (if you don't have a .env file yet create one in the root of your project) file let's create the environment variables we will need.

# .env.localGOOGLE_SERVICE_ACCOUNT_EMAIL=GOOGLE_PRIVATE_KEY=
Enter fullscreen modeExit fullscreen mode

Paste your keys from the JSON file in here.

Awesome! Now you are ready to start integrating google sheets like I didhere to store Newsletter subscribers from another nextjs app!

Happy coding! 😊

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Web developer based in Toronto, loves getting cut by the edge!
  • Location
    Toronto, Canada
  • Education
    Lighthouse Labs
  • Work
    Web Developer
  • Joined

More fromJulian Bustos

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp