pages router3 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 다음
