Joonas' blog

Next.js: request parameter reference

published
Server componentsClient componentsRoute handlersServer actions
Route parameters
app/[foo]/[bar]/page.tsx
export default function Page({
params,
}) {
const { foo, bar } = params;
}
import { useParams } from "next/navigation"
export default function Page() {
const params = useParams()
const { foo, bar } = params;
}
export async function GET(
request: Request,
{ params }
) {
const { foo, bar } = params;
}

cannot access

URL Query parameters
my/route?foo=bar
export default function Page({
searchParams
}) {
const { foo } = searchParams;
}
import { useSearchParams } from "next/navigation";
export default function Page() {
const params = useSearchParams()
const { foo, bar } = params;
}
export async function GET(
request: Request
) {
const searchParams = request.nextUrl.searchParams;
const foo = searchParams.get("foo");
}

cannot access

Headers and cookies
import { headers, cookies } from "next/headers";
export default function Page() {
headers().get("x");
cookies().get("x");
}

N/a

import { headers, cookies } from "next/headers";
export async function GET() {
headers().get("x");
cookies().get("x");
}
import { headers, cookies } from "next/headers";
export async function myServerAction() {
"use server";
headers().get("x");
cookies().get("x");
}
Redirects
import { redirect } from "next/navigation";
export default function Page() {
redirect("foo");
}
import { redirect } from "next/navigation";
export default function Page() {
redirect("foo");
}
import { redirect } from "next/navigation";
export async function GET() {
redirect("foo");
}
import { redirect } from "next/navigation";
export async function myServerAction() {
"use server";
redirect("foo");
}
IP Address

cannot access (but you can use x-forwarded-for header)

N/a

export async function GET(
request: Request
) {
const ip = request.ip;
}

cannot access (but you can use x-forwarded-for header)