Fetch Google Docs content using the Google API with Next.js
Learn how to seamlessly integrate the Google Drive API with Next.js (or React.js) to retrieve files in your web applications. In this blog, I will show you how to fetch data from Google Docs using the Google Docs API and Google Drive API.
Step-by-Step Guide to Get Google Drive Service Account Credentials for File Uploading
1. Create a New Project on Google Cloud Platform
- Go to the Google Cloud Console: Google Cloud Console.
2. Create a New Project:
- Click on the project dropdown in the top navigation bar.
- Click on “New Project.”
- Enter a name for your project and click “Create.”
3. Enable Google API
- Navigate to the API Library:
- In the left-hand menu, go to APIs & Services > Library.
- Enable Google Drive API and Google Docs API:
- Search for “Google Drive API”
- Click on it and then click “Enable.”
- Search for “Google Docs API”
- Click on it and then click “Enable.”
4. Create a Service Account
- Navigate to the Service Accounts Page:
- Go to APIs & Services > Credentials.
- Click on Create Credentials and select Service Account.
- Fill in the Details:
- Enter a name for the service account and an optional description.
- Click Create and Continue.
- Grant the Service Account Permissions:
- You can skip this step or assign specific roles if needed.
- Click Continue.
- Create a Key:
- In the Keys section, click Add Key > Create New Key.
- Choose JSON and click Create.
Integrate with Google Drive and Google Docs API
Copy the JSON file you generated and place it in the root of your Next.js project. I recommend renaming it to credentials.json for easier reference later.
NOTE: If you're using GitHub for your project, make sure to add credentials.json to your .gitignore file. This step is crucial to prevent key leakage, which would give anyone full access to your service account.
Now, we will need only one dependency to access the all Google API in our Next.js project.
npm install googleapis
Next, create a file named page.tsx and copy the code below
import { google } from "googleapis" // authenticates the service account to be used in this context const auth = new google.auth.GoogleAuth({ // your credentials to authenticate keyFile: "./credentials.json", scopes: ["https://www.googleapis.com/auth/documents.readonly", "https://www.googleapis.com/auth/drive"], }) const getData = async () => { const drive = google.drive({ version: "v3", auth }); const docs = google.docs({ version: "v1", auth }); try { const res = await drive.files.list(); const files = res.data.files; console.log(files); return ( <div> {files.map(async (doc) => { const docContent = await docs.documents.get({ documentId: doc.id }); const docText = docContent.data.body.content .map((element) => element.paragraph?.elements?.map(e => e.textRun?.content).join("")) .join(""); return ( <div key={doc.id}> <strong>Document name:</strong> {doc.name} <br /> <strong>Document ID:</strong> {doc.id} <br /> <strong>Document Content:</strong> {docText} </div> ); })} </div> ); } catch (error) { console.error("Error fetching files or document content:", error.message); return error.message; } }; export default getData;
Bringing everything together:
- Return to your Google Cloud admin panel and find the email address of your service account. Copy this email to your clipboard.
- Log in to your personal Google Drive account and create a sample file if you haven't done so yet.
- To allow your code to access this file, you must share it with the service account.