Closed nek0meshi closed 3 months ago
npm i next@13 react@latest react-dom@latest eslint-config-next@13
⚠ It looks like there is a custom Babel configuration can be removed :
⚠ Next.js supports the following features natively:
⚠ - 'styled-components' can be enabled via 'compiler.styledComponents' in 'next.config.js'
⚠ For more details configuration options, please refer https://nextjs.org/docs/architecture/nextjs-compiler#supported-features
○ Compiling / ...
✓ Compiled / in 6s (965 modules)
Image with src "/profile.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Warning: React does not recognize the fetchPriority
prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase fetchpriority
instead. If you accidentally passed it from a parent component, remove it from the DOM element.
at img
at eval (webpack-internal:///./node_modules/next/dist/client/image-component.js:175:5)
at eval (webpack-internal:///./node_modules/next/dist/client/image-component.js:306:45)
at I (/Users/yushiw/workspace/apps/blog/frontend/node_modules/styled-components/dist/styled-components.cjs.js:1:19189)
at section
at I (/Users/yushiw/workspace/apps/blog/frontend/node_modules/styled-components/dist/styled-components.cjs.js:1:19189)
at aside
at I (/Users/yushiw/workspace/apps/blog/frontend/node_modules/styled-components/dist/styled-components.cjs.js:1:19189)
at SideMenu (webpack-internal:///./components/SideMenu.tsx:56:3)
at I (/Users/yushiw/workspace/apps/blog/frontend/node_modules/styled-components/dist/styled-components.cjs.js:1:19189)
at div
at I (/Users/yushiw/workspace/apps/blog/frontend/node_modules/styled-components/dist/styled-components.cjs.js:1:19189)
at MainContainer (webpack-internal:///./components/MainContainer.tsx:34:3)
at Index (webpack-internal:///./pages/index.tsx:49:3)
at Layout (webpack-internal:///./components/Layout.tsx:19:3)
at MyApp (webpack-internal:///./pages/_app.tsx:26:3)
at StyleRegistry (/Users/yushiw/workspace/apps/blog/frontend/node_modules/styled-jsx/dist/index/index.js:449:36)
at ek (/Users/yushiw/workspace/apps/blog/frontend/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:30:13126)
at eY (/Users/yushiw/workspace/apps/blog/frontend/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:39:1766)
at eV (/Users/yushiw/workspace/apps/blog/frontend/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:39:3110)
at div
at e1 (/Users/yushiw/workspace/apps/blog/frontend/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:48:761)
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <a> in <a>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
https://nextjs.org/blog/next-13#nextlink
Unhandled Runtime Error
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.