Hi @dusty hollow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Retrieving Request object from Next.js page with App Router?
lunar scaffoldBOT
In Next.js, you can retrieve request-based data based on the Node.js HTTP API. For example, you can retrieve the req object from getServerSideProps and use it to retrieve the request's cookies and headers. Here's an example from the pages directory:
// `pages` directory
export async function getServerSideProps({ req, query }) {
const authHeader = req.getHeaders()['authorization'];
const theme = req.cookies['theme'];
return { props: { ... }}
}
export default function Page(props) {
return ...
}
However, in the app directory, you cannot directly access the raw request object. Instead, Next.js exposes new read-only functions to retrieve request data: headers() and cookies(). These functions are based on the Web Headers API and Web Cookies API respectively, and can be used inside Server Components to retrieve request headers and cookies.
// `app` directory
import { cookies, headers } from 'next/headers'
async function getData() {
const authHeader = headers().get('authorization')
return '...'
}
export default async function Page() {
// You can use `cookies()` or `headers()` inside Server Components
// directly or in your data fetching function
const theme = cookies().get('theme')
const data = await getData()
return '...'
}
Please note that these methods are designed to enforce consistent and predictable behavior for layouts across different pages, simplify development and debugging, and prevent the execution of potentially slow or expensive user code within the layout, which could negatively impact performance (source (https://nextjs.org/docs/app)).
If you need to validate sessions, you might want to consider using middleware. You can respond from Middleware directly by returning a Response or NextResponse instance. Here's an example:
import { NextRequest, NextResponse } from 'next/server'
import { isAuthenticated } from '@lib/auth'
// Limit the middleware to paths starting with `/api/`
export const config = {
matcher: '/api/:function*',
}
export function middleware(request: NextRequest) {
// Call our authentication function to check the request
if (!isAuthenticated(request)) {
// Respond with JSON indicating an error message
return new NextResponse(
JSON.stringify({ success: false, message: 'authentication failed' }),
{ status: 401, headers: { 'content-type': 'application/json' } }
)
}
}
This example uses a function isAuthenticated() to check the request (source (https://nextjs.org/docs/pages/building-your-application/routing/middleware)).