#vercel 에서 배포했을 때

1 messages · Page 1 of 1 (latest)

wild shore
#

vercel 에서 배포했을 때만, page.tsx 에서 searchParams 을 읽어오지 못하는 문제가 발생해.
왜 이런 문제가 발생하는지 확인하고 싶어.

한글로 대답해줘

rich emberBOT
#

Hi @wild shore. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

NextJS에서 searchParams를 사용할 때 일부 사용자들이 비슷한 문제를 경험했습니다. 특히, Vercel에서 배포한 후에 searchParams가 비어있는 것으로 나타나는 문제가 있었습니다. 이 문제는 로컬 환경에서는 발생하지 않았지만, Vercel에 배포한 후에만 발생했습니다.

이 문제의 원인은 아직 명확하게 밝혀지지 않았습니다. 하지만 일부 사용자들은 params와 searchParams의 이름이 같을 때 문제가 발생한다는 것을 발견했습니다. 또한, 일부 사용자들은 searchParams를 사용하는 컴포넌트가 서버 사이드에서 렌더링되지 않는 경우에도 이 문제가 발생한다고 보고했습니다.

이 문제를 해결하기 위한 몇 가지 제안이 있습니다:

  1. params와 searchParams의 이름이 같지 않도록 합니다.
  2. searchParams를 사용하는 컴포넌트가 서버 사이드에서 렌더링되도록 합니다.

이러한 제안이 문제를 해결하는 데 도움이 되지 않는다면, 이 문제에 대한 추가적인 정보를 찾기 위해 NextJS의 GitHub 이슈를 확인해 보시는 것이 좋습니다.

참고 링크:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@wild shore kapa.ai is still learning and improving, please let us know how it did by reacting below

wild shore
#

params와 searchParams의 이름이 같지 않도록 합니다. @rich ember

rich emberBOT
#

Let me check the knowledge base for you. One moment! :books:

#

params와 searchParams의 이름이 같으면, searchParams가 비어있게 되는 문제가 발생할 수 있습니다. 이는 params의 값이 searchParams의 값을 덮어쓰기 때문입니다. 이를 해결하기 위해서는 params와 searchParams의 키 이름을 다르게 설정해야 합니다.

예를 들어, 다음과 같은 코드에서는 slug라는 이름이 params와 searchParams 모두에 사용되었습니다.

interface CategoryPageProps {
    params: {
        slug: string
    }
    searchParams: {
        slug: string
    }
}

이 경우, slug라는 이름을 params와 searchParams에서 모두 사용하면 안 됩니다. 대신, 각각 다른 이름을 사용해야 합니다. 예를 들어, 다음과 같이 변경할 수 있습니다.

interface CategoryPageProps {
    params: {
        slug: string
    }
    searchParams: {
        query: string
    }
}

이렇게 하면 params의 slug와 searchParams의 query가 서로 다른 이름을 가지므로, searchParams가 비어있는 문제를 해결할 수 있습니다.

참고 링크: Issue #62452 (https://github.com/vercel/next.js/issues/62452)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: