Next.js API Routes で REST API 実装

ツイート
2021年08月26日
2021年08月27日

ドキュメント

実装

jsx
import type { NextApiRequest, NextApiResponse } from 'next' export default async function handler(req: NextApiRequest, res: NextApiResponse) { switch (req.method) { case 'GET': res.status(200).json({ message: 'GET' }) break case 'POST': res.status(200).json({ message: 'POST' }) break case 'PATCH': res.status(200).json({ message: 'PATCH' }) break case 'DELETE': res.status(200).json({ message: 'PATCH' }) break default: res.status(405).end() break } }

API呼び出し

axiosを使用し、API を呼び出します。

jsx
yarn add axios
jsx
// GET Method await axios.get('/api/user', { params: { id: userId } }) // POST Method await axios.post('/api/user', { id: userId }) // PATCH Method await axios.patch('/api/user', { id: userId }) // DELETE Method await axios.delete('/api/user', { params: { id: userId } })
  • GET と DELETE は、リクエストのクエリに値を持つことができます(Bodyには含めることができません)
  • POST と PATCH は、Bodyに値を持つことができます

getServerSidePropsで API Routes を呼び出すのはあまりよくなさそうです 🤔

use getStaticProps with /api routes · Discussion #16068 · vercel/next.js

値の取得

jsx
const { id } = req.query // GET DELETE const { id } = req.body // POST PATCH

NextAuth

NextAuthを使用している場合は、sessionからuserIdを呼び出すこともできます。

jsx
import type { NextApiRequest, NextApiResponse } from 'next' import { getSession } from 'next-auth/client' export default async function handler(req: NextApiRequest, res: NextApiResponse) { const session = await getSession({ req }) if (!session?.user?.id) { res.status(401).send({ message: 'Unauthorized' }) return } const userId = session.user.id }

sessionにuserIdを含めるには、 pages/api/auth/[...nextauth].tscallbacks.session を変更します。

jsx
import NextAuth from 'next-auth' import Providers from 'next-auth/providers' import { PrismaAdapter } from '@next-auth/prisma-adapter' import { prisma } from '@/lib/server/prismaClient' export default NextAuth({ providers: [ Providers.Google({ clientId: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET, }), ], adapter: PrismaAdapter(prisma), callbacks: { session: async (session, user) => { return Promise.resolve({ ...session, user: { ...session.user, id: user.id // 👈 ココ } }) } } })