Retrieve POST payload inside /app/page.tsx (RSC)

[milanbgd011]

Describe the feature you'd like to request

I would like to be able to read POST request from page.tsx inside /app folder, but there is only params and searchparams:

export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string };
  searchParams?: { [key: string]: string | string[] | undefined };
}) {
  return <h1>My Page</h1>;
}

I tried with headers:

import { headers } from 'next/headers';
const headersList = headers();

But no payload data there as expected.

In getServerProps we had req/res and I pulled data from req, now I am not sure how to catch POST request payload in /app/page.tsx server component.

Describe the solution you'd like

To simply retrieve POST payload in /app/page.tsx (server component).

Describe alternatives you've considered

none

[alex3ax]

Aren't API Routes supposed to be used in this case?

[milanbgd011]

Exactly.

In PHP, you POST to some page, catch the payload and do whatever you need to.

Here I do not see how to "catch" the payload from POST that is a simple non-API route.

Very strange if this is not possible, just need to know that it is not.

[n0th1ng-else]

yes this is useful when you submit the form with no javascript enabled, right, you have just a form with properties.

In the regular components (aka pages components) you can define something like this:

// pages/foo/index.tsx
export const getServerSideProps = async (context: GetServerSidePropsContext): Promise<GetServerSidePropsResult<Props>> => {
    try {
		const body = await parseBody(context.req, "1mb"); // This is your form payload
	    const data = await doStuff(body);
		    return {
		        props: {
					data
		        }
		    }
	} catch (err) {
	    return {
	        props: {
				error: 'Oops something went wrong' // render the page with error banner
	        }
	    }
	}
}

something like this would be super nice

// app/bar/page.tsx
import { req } from 'next/request';

const Page = () => {
	const body = await parseBody(req(), "1mb"); // This is your form payload
	// do stuff and render component;
}

export default Page

[ParadimeWeb]

I need to do this also. Has anyone figured out if it's possible with the App Router? You cannot render a page in a route API.

[curiousercreative]

Has anyone here found a workaround aside from just using the pages router?

[balazshq]

How about using the middleware to extract the payload from the request and put it into a custom header. Something like:

// middleware.ts
import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';

export async function middleware(request: NextRequest) {
  const url = new URL(request.url);
  const requestHeaders = new Headers(request.headers);
  if (request.method === 'POST' && url.pathname === '/page') {
    const formData = await request.formData();
    const email = formData.get('email') as string;
    requestHeaders.set('x-email', email ?? '');
  } 
   return NextResponse.next({ request: { headers: requestHeaders } });
}

// page.tsx

import { headers } from 'next/headers';
export default async function MyPage() {
  const h = headers();
  const email = h.get('x-email');
  return (
    <div>
      <span>{email}</span>
    </div>
  );
}

[joulev]

The POST method to app router page routes is reserved for server actions. You will need to structure your apps differently because this is fundamentally not possible.