Next.js v15 기준 서버 컴포넌트에서 쿼리 파라미터 접근하기

쿼리 파라미터에 접근하려면 클라이언트 컴포넌트에서 useSearchParams 를 사용하면 된다.

서버 컴포넌트에서 접근하려면 미들웨어를 이용해야 한다.

 

src/middleware.ts

import { NextRequest, NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-pathname', request.nextUrl.pathname);
  // 쿼리 파라미터도 헤더에 추가
  requestHeaders.set('x-search-params', request.nextUrl.search);

  return NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });
}

 

 

 

sample/page.tsx

import { redirect } from 'next/navigation';
import { headers } from 'next/headers';

const SamplePage = async () => {

  const headersList = await headers();

  // ?from=abc 형식으로 들어옴
  const searchParams = headersList.get('x-search-params') || '';

  const baseUrl = 'https://abc.com';
  const redirectUrl = searchParams
    ? `${baseUrl}${searchParams}`
    : baseUrl;

  redirect(redirectUrl);

};

export default SamplePage;

 

 

 

참고

https://velog.io/@taeyooooon/NextJS-%EC%84%9C%EB%B2%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%97%90%EC%84%9C-url-pathname-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0