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)
発生するエラー1
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
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.
資料
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
fetchPriorityprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasefetchpriorityinstead. 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)発生するエラー1
Unhandled Runtime Error
https://nextjs.org/blog/next-13#nextlink
発生するエラー2