[Next.js] API Routesでの実装方法の覚書

背景

基本的な使い方は公式ドキュメントに書いてあるが、実際に使ってみて気付いたことをまとめておく。

環境

• Next.js v14.2.15
  • Pages Router
  • next.config.js: pageExtensions

実装

ファイル構成

src/pages/api 以下にAPI Routesとなるファイルを配置する。

// src/pages/api/posts?slug=xxx でパラメータによって返却されるデータが変化するAPI
import type { PostProps } from '@/types/source';
import type { NextApiRequest, NextApiResponse } from 'next';
import posts from '~/source/posts.json';

type ResponseData = PostProps[] | PostProps;

export default function handler(req: NextApiRequest, res: NextApiResponse<ResponseData>) {
  const { slug } = req.query;

  if (slug === undefined) {
    return res.status(200).json(posts);
  }

  const post = posts.find((post) => post.slug === slug);

  if (post === undefined) {
    return res.status(404).json({ message: 'Not Found' });
  }

  res.status(200).json(post);
}

こういったファイルを作成するとhttps://localhost:8080/api/posts?slug=xxxにアクセスすることで該当するデータを取得できる。以上である。

pageExtensionsを利用している場合の注意点

next.config.js内でpageExtensionsの設定を利用している場合、この設定はPages RouterだけではなくAPI Routesも影響してしまう。

module.exports = {
  pageExtensions: ['page.tsx'],
};

例えば上記のような設定をしているとsrc/pages/api/posts.tsが有効にならない。上記の設定のままAPI Routesを有効にしたい場合はsrc/pages/api/posts.page.tsとしなければならない。

module.exports = {
  pageExtensions: ['page.tsx', 'api.ts'],
};

そのため、上記のように'api.ts'を追加して、ファイル名をsrc/pages/api/posts.api.tsとすることでAPI Routesを有効にできた。