next.js - API Routes

為 next.js 練習紀錄。

引言

先練習二種基本的 Next.js 的 API Routes：Basic API Routes 與 Dynamic API Routes。

參考文章

API Routes: Introduction | Next.jsvercel

API Routes: Dynamic API Routes | Next.jsvercel

程式碼紀錄

next.js 本身就支援 WebApi能力，routing 的組態也高度整合簡化。固定放在目錄api下面。詳紀說明不在此詳述。拜讀官方文件或模拜google大神皆能找到。

Basic API Routes 紀錄

後端

api/counter.ts

import type { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'

/// NextApiHandler
export default async function (req: NextApiRequest, res: NextApiResponse) {
  const { amount = 1 } = req.body

  // simulate IO latency
  await new Promise((resolve) => setTimeout(resolve, 500))

  res.json({ data: amount })
}

前端

counterAPI.ts

export async function fetchCount(amount = 1): Promise<{ data: number }> {
  const response = await fetch('/api/counter', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ amount }),
  })
  
  const result = await response.json()
  return result
}

Dynamic API Routes

後端

api/form01/[action].ts

import type { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'

export default function (req: NextApiRequest, res: NextApiResponse) {
    const { method, query: { action } } = req

    // method 只支援 POST。
    if (method !== 'POST') {
        res.status(404).end(`Your Princess Is In Another Castle!`);
        return
    }

    // 取得 相應的 Action Handler
    const actionHandler = actions[action as string];

    // 若不存在相應的 Action Handler
    if (!actionHandler) {
        res.status(404).end(`Your Princess Is In Another Castle!`)
        return
    }

    // invoke action
    actionHandler(req, res)
}

const actions = {
    getFormData: (req: NextApiRequest, res: NextApiResponse) => {
        const { formNo } = req.body
        const { action } = req.query
        res.json({ message: '取得表單資料', action, formNo })
    },
    updFormData: (req: NextApiRequest, res: NextApiResponse) => {
        const { formNo } = req.body
        const { action } = req.query
        res.json({ message: '更新表單資料', action, formNo })
    },
    delFormData: (req: NextApiRequest, res: NextApiResponse) => {
        const { formNo } = req.body
        const { action } = req.query
        res.json({ message: '刪除表單資料', action, formNo })
    },
    addFormData: (req: NextApiRequest, res: NextApiResponse) => {
        const { formNo } = req.body
        const { action } = req.query
        res.json({ message: '新增表單資料', action, formNo })
    },
}

前端

/// apiClient
async function getFormData(formNo: string): Promise<any> {
  const res = await fetch('/api/form01/getFormData', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ formNo }),
  })

  if (res.status !== 200) {
    const { status, statusText } = res
    return { status, statusText }
  }

  // success
  const result = await res.json()
  return result
}