NuxtのサーバールートとAPIエンドポイント

Nuxtはフルスタック

server/apiディレクトリ

server/
  api/
    hello.ts   ->  /api/hello
    posts.ts   ->  /api/posts

defineEventHandler

// server/api/hello.ts
export default defineEventHandler((event) => {
  return { message: 'Hello from the server' }
})

HTTPメソッドのサフィックス

server/api/
  users.get.ts   ->  GET /api/users
  users.post.ts  ->  POST /api/users

クエリパラメータの読み取り

export default defineEventHandler((event) => {
  const query = getQuery(event)
  return { search: query.q }
})

リクエストボディの読み取り

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  return { received: body }
})

動的なサーバールート

export default defineEventHandler((event) => {
  const id = getRouterParam(event, 'id')
  return { id }
})

HTTPエラーのスロー

export default defineEventHandler((event) => {
  const id = getRouterParam(event, 'id')
  if (!id) {
    throw createError({ statusCode: 400, statusMessage: 'Missing id' })
  }
})

H3イベントオブジェクト

ステータスとヘッダーの設定

export default defineEventHandler((event) => {
  setResponseStatus(event, 201)
  setHeader(event, 'Cache-Control', 'no-cache')
  return { created: true }
})

ページからAPIを呼び出す

const { data } = await useFetch('/api/posts')

理解度チェック

まとめ