Chapter 04

バックエンドの準備

Thirosue
Thirosue
2021.08.28に更新
このチャプターの目次

画面での動きを出すために、バックエンドAPIの準備をしていきます。
フロントのみに興味がある方は、本チャプターはスキップし、Vercelに公開しているAPIサンプルを用いて色々試してみてください。

作成したAPI

エンドポイント メソッド 名前 補足
https://next-typescript-sample-mu.vercel.app/api/auth POST ログインAPI ユーザ認証を行う
https://next-typescript-sample-mu.vercel.app/api/auth/signout POST ログアウトAPI ログアウトを行う
https://next-typescript-sample-mu.vercel.app/api/auth/check POST トークンチェックAPI jwtトークンのチェックを行う
https://next-typescript-sample-mu.vercel.app/api/password/change POST パスワード変更API
https://next-typescript-sample-mu.vercel.app/api/code/verify POST 認証コード検証API パスワード変更要求の確認に利用する
https://next-typescript-sample-mu.vercel.app/api/products GET 商品一覧取得API 商品一覧を取得する
https://next-typescript-sample-mu.vercel.app/api/products/post POST 商品登録API
https://next-typescript-sample-mu.vercel.app/api/products/put PUT 商品更新API
https://next-typescript-sample-mu.vercel.app/api/products/delete DELETE 商品削除API

利用方法

APIの利用方法は、Httpieを用い、README.mdで紹介しています。

https://github.com/Thirosue/next-typescript-sample

Swaggerなどを用意するのは、サボりました。。。

APIの実装方法

ボイラーテンプレートのAPIや公式ドキュメントを参考にコードをカスタマイズ、追加していくと簡単にAPIが作成できます。

https://github.com/vercel/next.js/blob/canary/examples/with-typescript-eslint-jest/pages/api/hello.ts

https://nextjs.org/docs/api-routes/introduction
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

import { NextApiRequest, NextApiResponse } from 'next'

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ name: 'John Doe' })
}

export default handler

今回のサンプルでは、モック実装であるため、詳細な解説は割愛します。