next.js7 Next/image에서 외부 이미지를 가져오지 못하는 이슈 다른 이미지는 괜찮은데, elasticbeanstalk-ap-northeast-2-319210348301.s3.ap-northeast-2.amazonaws.com 이와 같은 url을 가진 이미지를 불러오지 못하는 이슈가 발생했다. 402 (Payment Required) Response값에는 다음과 같은 문구가 있었다. Payment required OPTIMIZED_IMAGE_REQUEST_PAYMENT_REQUIRED 그리고 viewport의 width값을 조정하여, 472px 이하로 만들면 이미지가 정상적으로 보였다. 디바이스 크기가 바뀔 때마다 이미지 최적화 Request를 보내는데, 이것이 427px 이하일 때만 정상 작동하고 있었다. next/Image에서 디바이스 크기에 따라 최적화를 해주는.. 2023. 10. 16. 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로 마이그레이션하기 - style-components ssr방식에서 style-components기존 pages 라우터 방식에서는 server side rendering을 위해 아래 코드를 추가하여 사용했다. // _document.tsxexport default class MyDocument extends Document { static async getInitialProps(ctx: DocumentContext) { const sheet = new ServerStyleSheet() const originalRenderPage = ctx.renderPage try { ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) =>.. 2023. 2. 6. 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. Warning: Extra attributes from the server: style next.js 13 버전 app directory로 마이그레이션 하던 중 다음 경고 메시지를 발견했다. Warning: Extra attributes from the server: style body 태그에 빈 style 속성이 들어가서 경고가 뜬 것인데, 코드 동작에는 아무런 지장이 없다. // app/layout.tsx // Remove the server-side injected CSS. if (document.body.getAttribute("style") === "") { document.body.removeAttribute("style"); } 위 코드를 추가하면 warning이 사라지긴 한다. next.js 13버전의 문제인지, 아직 베타 버전인 app directory의 문제인지 추후 업데.. 2023. 1. 30. 이전 1 2 다음
