Next.js API Routes で REST API 実装

ドキュメント

• API Routes: Introduction | Next.js
• HTTP リクエストメソッド - HTTP | MDN

実装

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 を呼び出します。

yarn add axios

// 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

値の取得

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

NextAuth

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

• Securing pages and API routes | NextAuth.js

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].tsの callbacks.session を変更します。

• Callbacks | NextAuth.js
• How to get userId on api Endpoints while using next-auth · Discussion #536 · nextauthjs/next-auth

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 // 👈 ココ
        }
      })
    }
  }
})