동적 라우팅, 서버 컴포넌트에서 pathname에 접근하기

미리 정의할 수 없는 동적 경로는, 대괄호([])를 사용해 폴더 이름을 작성합니다.

그러면 URL의 세그먼트 값이, params Prop으로 전달되고, 대괄호 사이의 폴더 이름이 속성 이름이 됩니다.

만약 쿼리스트링(Query String)을 사용하는 경우, searchParams Prop으로 전달됩니다.


export default function page(props: any) {
  console.log(props)
  return <div>hi</div>
}

// 현재 폴더가 [id] 로 되어있음.

url: http://localhost:3000/signin/asdsad?asd=asd

⇒ { params: { id: 'asdsad' }, searchParams: { asd: 'asd' } }

위처럼 다이나믹 라우트일경우 이렇게 가져올 수 있음


type Movie = { // 응답 결과 타이핑
  Title: string
  Plot: string
}

export default async function MovieDetails({
  params,
  searchParams // 쿼리스트링
}: {
  params: { movieId: string }
  searchParams: { plot?: 'short' | 'full' }
}) {
  const res = await fetch(`https://omdbapi.com/?apikey=7035c60c&i=${params.movieId}&plot=${searchParams.plot || 'short'}`)
  const movie: Movie = await res.json()
  return (
    <>
      <h1>{movie.Title}</h1>
      <p>{movie.Plot}</p>
    </>
  )
}

타입스크립트 인경우 위처럼 searchParams의 값을 정의할 수 있어서 편한듯.

이외에

import { useSearchParams } from 'next/navigation' import { usePathname, useRouter } from "next/navigation";

useSearchParams 와 usePathname으로 가져오는것이 가능

서버 컴포넌트에서 pathname에 접근하기

서버컴포넌트에서 pathname에 접근하기 위해서 middleware 에서 추가적인 작업이 필요했습니다.

Nextjs middleware 공식문서 - https://nextjs.org/docs/app/building-your-application/routing/middleware

app 폴더와 같은 계층에 middleware.ts 파일을 생성하고 아래와 같이 작성하고


// 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);

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

사용하고자 하는 서버 컴포넌트에서 아래와같이 x-pathname을 get해서 사용하면 된다


// /app/layout.tsx
import { headers } from 'next/headers';

export default function RootLayout() {
  const headersList = headers();
  const headerPathname = headersList.get('x-pathname') || "";
}

만약 pathname 이 아닌 url에 접근하고 싶으면 request.url을 requestHeaders에 set 해주면 된다

또 서버에서 어떤 값을 설정하고싶을 떄 위처럼 헤더에 설정하면될듯?

참고

NextJS 서버 컴포넌트에서 url, pathname 접근하기

서버 컴포넌트에서 url, pathname 접근하기

https://velog.io/@taeyooooon/NextJS-서버-컴포넌트에서-url-pathname-사용하기