728x90 nextjs2 [Next.js] Next.js에서 여러개의 쿼리 파라미터를 전달하는 방법 (url로 파라미터 전달) Next.js를 사용하여 웹사이트를 구축하고 있는데, 페이지 URL에서 여러 개의 쿼리 파라미터를 전달하고 싶을 수 있습니다. 이번 포스트에서는 Next.js에서 여러 개의 쿼리 파라미터를 URL에 추가하고 이를 읽는 방법을 알아봅니다. 1.먼저, 원하는 페이지 파일을 만듭니다. 이 예에서는 `pageName.tsx` 파일로 하겠습니다. 파일경로: `pages/pageName.tsx` 2.페이지에서는 Next.js의 `useRouter` 훅을 사용하여 쿼리 파라미터 값을 받아올 수 있습니다. import { useRouter } from 'next/router'; const PageName = () => { const router = useRouter(); const { id1, id2 }.. 2023. 8. 18. [Error] Hydration failed because the initial UI does not match what was rendered on the server, Text content does not match server-rendered HTML - hydration 비활성화 위 에러는 일반적으로 서버 렌더링과 클라이언트 렌더링이 다르게 동작할 때 발생합니다. Hydration이란? 더보기 Hydration은 React에서 클라이언트 사이드 렌더링 시 초기 렌더링된 HTML과 클라이언트 측에서 생성된 HTML이 동일한지 비교하는 과정을 의미합니다 React는 클라이언트 사이드 렌더링 시 이전에 서버 측에서 렌더링된 HTML과 일치하는지 확인하여, 일치하지 않으면 해당 부분을 재생성합니다. React에서 hydration을 사용하면, 서버에서 렌더링된 HTML을 기반으로 클라이언트 측에서 생성된 HTML을 업데이트하므로, 초기 렌더링 시간을 단축시킬 수 있습니다. 또한, 사용자가 페이지를 로드할 때 초기 HTML을 보여줌으로써 사용자 경험을 향상시킬 수 있습니다. 하지만, Re.. 2023. 4. 7. 이전 1 다음 728x90