Building a Customer Support Portal with Strapi, GPT, and Next.js (Part 2)

In Part 1 of this series, we set up the foundational backend structure in Strapi, creating the necessary collections and fields for managing customer support queries and responses. Moving forward in Part 2, we will integrate GPT with Strapi and Next.js, enabling automated responses for support tickets. This will include configuring GPT, linking it to Strapi for handling queries, and testing the integration with sample data.

Create a new Next.js Project

Let's jump into setting up our Next.js project!

First, navigate to the directory where you want to create your project. In this example, I will use a folder named strapi-customer-support-frontend:

mkdir strapi-customer-support-frontend
cd strapi-customer-support-frontend

Once you're inside the directory, initialize a new Next.js project by running the following command:

npx create-next-app@latest

You will then be prompted to customize your project. Here are the options I chose for this setup:

✔ What is your project named? … support-client
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … No
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

The command will generate a new Next.js application in a subdirectory named strapi-customer-support-frontend. Once everything is ready, move into the project directory and start the development server:

cd strapi-customer-support-frontend
yarn dev

Navigate to http://localhost:3000 in your browser to see your Next.js app in action. You should be greeted with the default Next.js welcome page. Congratulations, you now have a Next.js app up and running!

Next, we will set up our user interface and layout to give our app a structure and design.

Building the ChatboxComponent Component

To begin, we'll create a new folder named components within the src/app directory. Inside this folder, we will add a new file called ChatboxComponent.tsx. This file will house our chatbox component.

Now, let's add the following code to ChatboxComponent.tsx:

---

Fetch Data from the Strapi API

To interact with our Strapi backend, we'll set up a TypeScript function that fetches the data we need. First, let's define our API URL and use the fetch method to get our support ticket data. Here's how we can achieve this:

const baseUrl = 'http://localhost:1337';
const apiUrl = `${baseUrl}/api/customer-queries`;

export async function fetchCustomerQueries() {
  try {
    const response = await fetch(apiUrl, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching customer queries:', error);
    throw error;
  }
}

This fetchCustomerQueries function sends a GET request to our Strapi API endpoint to retrieve the support ticket data. If the request is successful, it returns the data in JSON format. Otherwise, it logs and throws an error.

Next, let's ensure our frontend can display this data seamlessly.