Next.js 13으로 개발한 웹사이트를 배포후 프로덕션 환경에서 쿼리 매개변수가 받아와지지 않는 것 같습니다

Question

깊게는 모르고 생활코딩 Next.js 13 인강에서 배운 것들과 유데미에 있는 인강을 보고 Next.js 13을 공부 중인 사람입니다. 분명 개발 과정에서는 문제가 없었는데... 다 만들고 배포를 하고 나니 카테고리 이동도 잘 되지 않고 API를 받아올 때 아예 안되는 것은 아니지만 버벅거리고 새로고침을 해야만 받아와지는 현상이 발생하고 있습니다. 찾아보니 쿼리 매개변수를 제대로 받아오지 못해 API를 받아오거나 페이지 이동이 제대로 이뤄지지 않는 것 같은데... 이걸 어떻게 해결해야 할까요 ㅜㅠㅠ 인강이 완전한 최신판이 아니라 내용이 다르기도 하고 너무 헷갈리네요..일단 쿼리 매개변수를 제대로 받아오지 못할 경우 export const dynamic = "force-dynamic"; 코드를 페이지 시작 부분에 추가하면 된다고 하여 추가하였습니다. 이렇게 동적으로 변경해주면 쿼리 매개변수를 받아올 수 있다고 하여 변경을 하였는데 여전히 작동이 버벅거리고 잘 안되는 것 같습니다... 애초에 쿼리 매개변수의 문제가 아니었던 걸까 하는 생각도 들고 너무 머릿속이 복잡합니다... 도와주세요 ㅜ 배포한 사이트도 함께 공유드립니다https://imdb-clone-version2.vercel.app/ Next.js 13 공부시 꼭 공부해야 할 것들도 같이 알려주시면 참 좋을 것 같아요...ㅠㅠㅠ// page.js // Fix the problem for "search params object is empty in production with next 13 app dir" // for more info "https://github.com/vercel/next.js/issues/43077" export const dynamic = "force-dynamic"; // this is the fix import MovieCards from "./components/MovieCards"; const API_KEY = process.env.API_KEY; export default async function Home({ searchParams }) { const genre = searchParams.genre || "fetchTrending"; const res = await fetch( `https://api.themoviedb.org/3/${ genre === "fetchTopRated" ? "movie/top_rated" : "trending/movie/week" }?api_key=${API_KEY}&language=en-US&page=1`, { next: { revalidate: 10000 } } ); if (!res.ok) { throw new Error("Failed to fetch data"); } const data = await res.json(); // data.results에 배열로 값이 들어 있음. const results = data.results; return (

{results?.map((movie) => { return ; })}

); }

tjdwls604 · Answer

hook 사용해서 home funciton을 async로 쓰지말고 일반 싱크 함수로 변경useStateuseEffect

Hee Sung Son · Answer

혹시 배포시 API_KEY env 설정 하셨나요?

얌탱이 · Answer

우선 로컬환경에서 운영환경처럼 빌드해서 서버 실행시켜보시구요.이 때 로그로 searchParams가 찍히는지 터미널에서 확인해보셔요.로그가 제대로 찍히고 서버단에서 fetch한 응답도 최신데이타가 맞다면, 제 생간엔 클라이언트에 문제가 있을거 같아요.next13에서는 클라이언트단 라우터에서 각 라우트(페이지)를 캐시도 하거든요. 이건 페이지가 정적이라면 캐시가 5분이고 동적이라면 30초라고 알고 있어요. 이를 무효화할 수 있는 방법은 페이지를 refresh하는 방법밖에 없을거에요.한 번 원인이 무엇인지 정확히 파악해보시는게 좋을 것 같아요.참고: https://nextjs.org/docs/app/building-your-application/caching#router-cache

Next.js 13으로 개발한 웹사이트를 배포후 프로덕션 환경에서 쿼리 매개변수가 받아와지지 않는 것 같습니다

3개의 답변

#next.js13 목록