app router4 next.js app라우터에서 useId 사용시 발생하는 hydration 에러 Hydration mismatch when using the useId hook, when using the app router https://github.com/vercel/next.js/issues/53110 위 게시물에 자세하게 나와있었다. 요약하자면 next에 여러 PR이 합쳐지면서 ReactDevOverlay가 여러 개 생겼고, 서로 다른 React 트리를 생성하여 useId 차이가 발생하고 있다는 것이었다. next를 최신버전으로 업그레이드하자 위 에러로그는 더 이상 발생하지 않았다. yarn berry를 사용하면서 기존 yarn classic과 달라진 명령어가 매번 헷갈렸는데 아래 링크에 자세하게 나와있었다. https://yarnpkg.com/cli/up 특정 dependencies를 업그.. 2023. 9. 29. Next.js 13 pages 라우터에서 app router로 마이그레이션하기 - Routing Hooks Migrating Routing Hooks app router에서는 기존 next/router대신 next/navigation의 useRouter(), usePathname(), useSearchParams()를 사용한다. 만약 app 디렉토리에서 기존 next/router을 임포트할 경우 다음과 같은 에러가 발생할 수 있다. Error: Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted Uncaught Error: Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted useRout.. 2023. 2. 2. Next.js 13 pages 라우터에서 app router로 마이그레이션하기 - next/head next/head migration pages 라우터에서는 next/head를 이용하여 meta, title와 같은 html 요소를 관리하였다. // pages/index.tsx import Head from 'next/head' export default function Page() { return ( ) } app 라우터에서는 이것이 head.js라는 special 파일로 대체되었다. // app/head.tsx export default function Head() { return ( My Page Title ) } 이에 따라 기존에 웹폰트 방식으로 사용하던 폰트 또한 마이그레이션 해야 했다. // pages/_document/tsx render() { return ( ); } } next/font.. 2023. 2. 1. Next.js 13 pages 폴더에서 app router로 마이그레이션하기 next.js 13 migration from pages router to app router app routernext.js 13 버전이 도입되면서 기존 pages 폴더와는 다르게 동작하는 app router가 생겼다. app 디렉토리는 아직 베타버전이지만, 새로 등장한 기능들을 사용하기 위해선 앱 디렉터리를 사용해야 한다. pages 라우터와 app라우터의 가장 큰 차이점은 app에선 기본적으로 server component가 적용된다는 것이다. pages 폴더에서 app 폴더로 마이그레이션1. next.config.js 코드 추가app directory는 아직 베타버전으로, 사용하기 위해선 next.config.js에 아래 코드를 추가해줘야 한다./** @type {import('next').Nex.. 2023. 1. 29. 이전 1 다음
