Making POST to Server Components (app/page.jsx) or passing data there other way

[hubertlepicki]

So I am trying to do something Next.js is not created to do but I want to do it anyway ;).

I would love to embed some Next.js Server Components into a bigger application, which is written in Elixir/Phoenix. In order to do that, I am reverse-proxying the requests to Next.js server.

My Phoenix app already handles user authentication and sessions, so I only proxy to Next.js pages if the user is authenticated and has access to given page.

Then, I make a request back to Phoenix via API to fetch data, from the Server Component. That works, all great.

I am doing, however, a one extra HTTP request that I could avoid, if I was able to pass the payload required to render the server comonent with my proxied request. I had some ideas how to do it: stick the data into cookies, or headers before proxying, and I could read it. But I think both Cookies and Headers have size limit, so if I stick in a really large JSON payload in them, this will fail.

Now, the simplest way to do it would be for me in Next.js to accept POST requests to my routes, and I don't mean API routes but server component routes, and just read the payload from POST requests, that can be large.

It appears my Next.js apps does render my Server Components just fine over POST, but I have no idea how to read request body. Any tips?

Is this doable somehow? I don't see any way to make either pages or server components available over POST request, the documentation points to /api routes to accept the data but that's not what I want to do.

Any tips appreciated.

[GabenGar]

Are your pages in the /app or /pages directory?

[hubertlepicki]

@GabenGar /app

On /pages I seem to be able to use next-runtime https://next-runtime.meijer.ws/getting-started/1-introduction for that, especially the POST handling as described here: https://next-runtime.meijer.ws/getting-started/4-data-updates#handle-post

It doesn't seem to work out of the box in /app directory out of the box, but I didn't investigate in details yet...

[hubertlepicki]

I have asked a related question on next-runtime discussion board, let's see if anything comes out of either one...

https://github.com/smeijer/next-runtime/discussions/73

[hubertlepicki]

I made some progress. I figured I can create middleware to read request body

export default async function middleware(req) {                                                                                                                          
  console.debug(req.body)                                                                                                                                                
                                                                                                                                                                         
  if (req.body) {                                                                                                                                                        
    const body = await req.json();                                                                                                                                       
    console.debug(body)                                                                                                                                                  
  }                                                                                                                                                                      
} 

I am able to just put it in the middleware.js in the project root and indeed it prints out the request body as it is being sent.

Next on the todo list is to figure out how I can pass this to /app/page.jsx

[hubertlepicki]

I found a ridiculous solution that abuses headers (and doesn't work anyway for large payloads since these have limits)

https://clerk.dev/blog/nextjs-pass-value-from-middleware-to-api-routes-and-getserversideprops

[SksOp]

Did you got any solution around how we can get request body in tsx/jsx file over post req ?

[gauravprwl14]

@hubertlepicki any solution, I am trying the same, unable to find the solution so far

[hubertlepicki]

I ended up my experiment with next.js, repeated it again and found more bugs, decided to never look at it again. Stay safe folks, it's a trap.