API

在Next.js 13，如果採用app router，API的寫法與Next.js 12(page router)的寫法不同，在Next.js 13的app router下，有一些檔案名稱是有特殊的用途，前面提到，例如: page.tsx、layout.tsx，今天介紹route.ts。

<aside> 📢 route.js/route.ts在Next 13.2.0以後才提供

</aside>

• File Conventions
• route.js
• Route Handlers

我們在app底下，新增一個test資料夾，並且新增一個route.ts

注意，route.ts跟page.ts不能放在同一個檔案夾 (app router會不知道要執行哪一個)

route handler支援一般的HTTP協定，如:GET、POST、PUT、PATCH、DELETE

檔案的內容

import { NextResponse } from "next/server";

export async function GET() {
  const data = [{ id: 123 }, { id: 124 }, { id: 125 }];
  return NextResponse.json({ data });
}

這樣就完成一個簡單的GET API了。

我們為了簡化課程的內容，都以讀取firestore為例，如果要使用mysql，就必須透過API去讀取資料庫，再提供給前端。從node.js的崛起開始，Javascript 統一前後端的夢想，正在逐步實現中。

• Next.js 13 + MySQL - User Registration and Login Tutorial with Example App

未來可以將讀資料的部分都透過API，好處是next.js預設啟動cache，當內容異動頻率很低的時候 (例如產品的類別)，這樣的寫法可以大量降低讀取的次數。

Email API

在react裡發送email，最常使用的是emailjs。很多同學會問:「為何要使用email服務?」，當我們的系統透過gmail發送信件時，因為gmail常被拿來當作攻擊的跳板，當大量發信時，通常會被判斷為垃圾信。而這些email服務就是讓我們可以發大量信件而不會被判斷為垃圾信。另外，也提供一些管理功能，例如，可以讓我們轉換郵件服務提供者的時候，不必改寫程式。

• emailjs
  • 目前emailjs除了提供package(sdk)之外，也提供簡易的服務設定、email樣板設定。emailjs除了利用npm安裝之外，也提供browser script，讓純JS使用者也可以使用這個服務。