前言：昨天我們分享了如何從建置 API 到使用 Apollo Studio 測試第一支 API 的過程。這個流程包括設定後端伺服器、定義 GraphQL schema 和 resolver、以及使用 Apollo Studio 進行測試。這些步驟能幫助我們了解如何快速建立並測試一個基本的 API。

今天我們將繼續這個主題，並介紹如何建立 Next.js 環境，建立測試頁面路由，並開始引入 lib。

1. 建立 Next.js 環境
   首先，我們需要安裝 Next.js。如果你還沒有安裝，請按照以下步驟進行：

開啟終端機並執行以下命令來建立新的 Next.js 專案：

npx create-next-app@latest

npm run dev

2. 建立測試頁面路由
   接下來，我們將建立一個簡單的測試頁面來驗證我們的 Next.js 環境是否正常工作。

在 src\app 資料夾中建立一個新的檔案 page.tsx：

import React from 'react';

export default function TestPage(){
  return (
    <div>
      <h1>This is a test page</h1>
    </div>
  );
};

在瀏覽器中開啟 http://localhost:3000/test 檢查是否顯示 "This is a test page"。

3.安裝依賴套件

npm install @apollo/client graphql

今天介紹了建立前端環境，明天繼續將如何將baseUrl API EndPoit設定到專案中