Next.js 14.2.28 Unable to access request Body in api route

[sptungG]

Summary
I am using NextJs with app directory and I am trying to access request's body in one api route but it is giving empty object. Here's the code:

export const config = {
  api: { bodyParser: false }
}

const HttpRes = (data: any, status = 200) => NextResponse.json(data || {}, { status });

export async function POST(request: NextRequest, { params }: TParams) {
  try {
    const body = await request.json(); // ---- still have body data
    return HttpRes(await httpReq.post(`/public/clients/`, body));
  } catch (error) {
    const mappedError = getErrorMessage(error);
    return HttpRes(mappedError, mappedError.status);
  }
}

import axios from "axios";
import queryString from "query-string";

const instance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL as string,
  paramsSerializer: {
    serialize: (params) => queryString.stringify(params, { skipNull: true, skipEmptyString: true }),
  },
  maxRedirects: 0,
  adapter: ["fetch", "xhr", "http"],
});

const interceptorReq = instance.interceptors.request.use(
  async (config) => {
    if (config.method && ["post", "put", "patch"].includes(config.method.toLowerCase())) {
      console.log("Request Body:", config.data); // ---- still have body data
    }
    config.headers["Content-Type"] = "application/json";
    return config;
  },
  (error) => Promise.reject(error),
);

instance.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  },
);

export const httpReq = instance;

Below is the image of the request I am sending via postman

here my BE log when use post nextjs api route

Bad Request: /public/appointments/
Creating client with payload: {}
Bad Request: /public/clients/

When I tried accessing request body direct the api in api route there and in that routes they are working perfectly.

Creating client with payload: {'name': 'abcnanccccccc', 'email': '', 'phone_number': '', 'phone_country': 'US', 'business': 'e70ec71a-3baa-4345-b3b9-e23b07476688'}
Client created successfully: {'id': '271a8311-f652-427d-a1d8-39707fcc5e8e', 'name': 'abcnanccccccc', 'phone_number': '', 'phone_country': 'US', 'email': '', 'business': UUID('e70ec71a-3baa-4345-b3b9-e23b07476688')}

environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.4.0: Fri Apr 11 18:33:47 PDT 2025; root:xnu-11417.101.15~117/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.19.2
  npm: 10.8.2
  Yarn: 1.22.22
  pnpm: 10.11.0
Relevant Packages:
  next: 14.2.28 // An outdated version detected (latest is 15.3.2), upgrade is highly recommended!
  eslint-config-next: 14.2.28
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.8.3
Next.js Config:
  output: N/A

[icyJoseph]

Hi,

I've used https://httpbin.dev/post to introspect the request data.

I used this app/api/route.ts on Next.js 15.3.2 and Next.js 14.2.28.

import { type NextRequest, NextResponse } from 'next/server';
import axios from "axios";
import queryString from "query-string";

const instance = axios.create({
  baseURL: 'https://httpbin.dev', // Switched the baseURL here
  paramsSerializer: {
    serialize: (params) => queryString.stringify(params, { skipNull: true, skipEmptyString: true }),
  },
  maxRedirects: 0,
  adapter: ["fetch", "xhr", "http"],
});

const interceptorReq = instance.interceptors.request.use(
  async (config) => {
    if (config.method && ["post", "put", "patch"].includes(config.method.toLowerCase())) {
      console.log("Request Body:", config.data); // ---- still have body data
    }
    config.headers["Content-Type"] = "application/json";
    return config;
  },
  (error) => Promise.reject(error),
);

instance.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  },
);

const httpReq = instance;

const HttpRes = (data: any, status = 200) => NextResponse.json(data || {}, { status });

export async function POST(request: NextRequest) {
  try {
    const body = await request.json(); 
    return HttpRes(await httpReq.post(`/post`, body)); // Switch the endpoint to `/post`
  } catch (error) {
    const mappedError = error instanceof Error ? error.message : 'Unexpected Exception'
    return HttpRes(mappedError, mappedError.status);
  }
}

And this is what I get:

➜ curl localhost:1234/api -H 'Content-Type: application/json' -d '{"foo": "bar"}' -X POST
{
  "args": {},
  "headers": {
    "Accept": [
      "application/json, text/plain, */*"
    ],
    "Accept-Encoding": [
      "br, gzip, deflate"
    ],
    "Accept-Language": [
      "*"
    ],
    "Content-Type": [
      "application/json"
    ],
    "Host": [
      "httpbin.dev"
    ],
    "Sec-Fetch-Mode": [
      "cors"
    ],
    "User-Agent": [
      "node"
    ]
  },
  "origin": "10.0.11.236",
  "url": "http://httpbin.dev/post",
  "method": "POST",
  "data": "{\"foo\":\"bar\"}",
  "files": null,
  "form": null,
  "json": {
    "foo": "bar"
  }
}

As you can see, the very last key "json", contains the data I sent.

Could it be something wrong in your BE?