NextJS13 API Request Body is null in API handler

Question

I set up a new NextJs project (v13.4.1). In the path src>app>api I have a route.js file. Here is the code in the route.js file

import { NextResponse } from "next/server";

export async function POST(request) {
  console.log("Request :: ", request);
  return NextResponse.json({ msg: "success" });
}

In the console, the request does not contain body I passed. I called the API with a JSON body.

Here is the console.

Request ::  NextRequest [Request] {
  [Symbol(realm)]: { settingsObject: { baseUrl: undefined } },
  [Symbol(state)]: {
    method: 'POST',
    localURLsOnly: false,
    unsafeRequest: false,
    body: { stream: undefined, source: null, length: null },
    client: { baseUrl: undefined },
    reservedClient: null,
    replacesClientId: '',
    window: 'client',
    keepalive: false,
    serviceWorkers: 'all',
    initiator: '',
    destination: '',
    priority: null,
    origin: 'client',
    policyContainer: 'client',
    referrer: 'client',
    referrerPolicy: '',
    mode: 'cors',
    useCORSPreflightFlag: true,
    credentials: 'same-origin',
    useCredentials: false,
    cache: 'default',
    redirect: 'follow',
    integrity: '',
    cryptoGraphicsNonceMetadata: '',
    parserMetadata: '',
    reloadNavigation: false,
    historyNavigation: false,
    userActivation: false,
    taintedOrigin: false,
    redirectCount: 0,
    responseTainting: 'basic',
    preventNoCacheCacheControlHeaderModification: false, 
    done: false,
    timingAllowFailed: false,
    headersList: HeadersList {
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: [Map]
    },
    urlList: [ [URL] ],
    url: URL {
      href: 'http://localhost:3000/api',
      origin: 'http://localhost:3000',
      protocol: 'http:',
      username: '',
      password: '',
      host: 'localhost:3000',
      hostname: 'localhost',
      port: '3000',
      pathname: '/api',
      search: '',
      searchParams: URLSearchParams {},
      hash: ''
    }
  },
  [Symbol(signal)]: AbortSignal { aborted: false },      
  [Symbol(headers)]: HeadersList {
    [Symbol(headers map)]: Map(15) {
      'accept' => [Object],
      'cache-control' => [Object],
      'connection' => [Object],
      'content-type' => [Object],
      'custom-header' => [Object],
      'host' => [Object],
      'transfer-encoding' => [Object],
      'user-agent' => [Object],
      'x-forwarded-for' => [Object],
      'x-forwarded-host' => [Object],
      'x-forwarded-port' => [Object],
      'x-forwarded-proto' => [Object],
      'x-invoke-path' => [Object],
      'x-invoke-query' => [Object],
      'x-middleware-invoke' => [Object]
    },
    [Symbol(headers map sorted)]: Map(15) {
      'accept' => 'application/json',
      'cache-control' => '',
      'connection' => 'close',
      'content-type' => 'application/json',
      'custom-header' => 'This is a custom header',      
      'host' => 'localhost:3000',
      'transfer-encoding' => 'chunked',
      'user-agent' => 'Thunder Client (https://www.thunderclient.com)',
      'x-forwarded-for' => '::ffff:127.0.0.1',
      'x-forwarded-host' => 'localhost:3000',
      'x-forwarded-port' => '3000',
      'x-forwarded-proto' => 'http',
      'x-invoke-path' => '/api',
      'x-invoke-query' => '%7B%7D',
      'x-middleware-invoke' => ''
    }
  },
  [Symbol(internal request)]: {
    cookies: RequestCookies { _parsed: Map(0) {}, _headers: [HeadersList] },
    geo: {},
    ip: undefined,
    nextUrl: NextURL { [Symbol(NextURLInternal)]: [Object] },
    url: 'http://localhost:3000/api'
  }
}

Here is the headers and Body when I hit the API.

Calling API header Calling API body

Here, the API call is a success, and I am getting the response I send from the above function.
I tried calling the API from Different clients,

Nothing helped.

Answer 1

Since you're using the App Router, you need to use the standard Web API methods in order to read the request body

import { NextResponse } from 'next/server';
 
export async function POST(request) {
  const body = await request.json(); // 👈
  console.log("Request :: Body :: ", body);
  return NextResponse.json({ msg: "success" });
}

See Route Handlers - Request Body