How do you access the request/response from an app router page?

Question

In the pages router, you could create a getStaticProps function, which would then feed props into your component function. getStaticProps in turn got an argument of the request and response objects, so you could pass any information you wanted from them to your page.

In the app router, there is no longer a getStaticProps function: you're just supposed to fetch your data from the component function. However, the component function doesn't get passed the request/response, so it seems impossible to access them now.

Is there some other mechanism to access the request/response objects in the latest version of Next.js?

https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration — jonrsharpe, Aug 01 '23 at 23:33
seems related posts: \ https://github.com/vercel/next.js/discussions/42732 Access Request Object in New App Directory Page Route #42732 \ https://www.reddit.com/r/nextjs/comments/yef3xc/nextjs_13_how_do_you_access_the_request_object/ \ seems not possible idk why — Nor.Z, Aug 16 '23 at 12:29

score 1 · Accepted Answer · answered Aug 01 '23 at 23:50

Based on jonrsharpe's comment, it looks like there no longer is a way to access the request from a page.

You can use an API route instead (which does get the full request), or you can use the headers and cookies functions (from the next/headers package) to access just those parts of the request ... but it seems it's impossible to get any other information from the request, or to get the request object itself.

score -2 · Answer 2 · answered Aug 02 '23 at 00:05

If you need to access the request and response objects, you should use server-side rendering methods like getServerSideProps. However, getServerSideProps is not available at the _app.js level, as it's designed to work with individual pages.

To access request/response objects or perform server-side logic at the app level, you may consider creating an API route in the pages/api directory, where you can access the req and res objects directly:

export default function handler(req, res) {
  // You have access to the request and response objects here
}

This is the only thing that comes to mind, otherwise you may need to re thing your approach.

How do you access the request/response from an app router page?

2 Answers2