Merge pull request #69 from mrskiro/bump-next-13

chore: migrate next13

.github/workflows/ci.yml

@@ -1,6 +1,6 @@
 name: CI
 
-on: 
+on:
   push:
     branches:
       - main
@@ -15,7 +15,7 @@ jobs:
         with:
           node-version: 16
           cache: "yarn"
-      - name: Install dependencies 
+      - name: Install dependencies
         run: yarn --frozen-lockfile
       - name: lint
         run: yarn lint
@@ -37,7 +37,7 @@ jobs:
       - name: Install commitlint
         run: |
           yarn add conventional-changelog-conventionalcommits
-          yarn add commitlint@latest
+          yarn add commitlint@17.5.1
 
       - name: Validate current commit (last commit) with commitlint
         if: github.event_name == 'push'
@@ -54,7 +54,7 @@ jobs:
         with:
           node-version: 16
           cache: "yarn"
-      - name: Install dependencies 
+      - name: Install dependencies
         run: yarn --frozen-lockfile
       - name: test
-        run: yarn test --ci 
+        run: yarn test --ci

package.json

@@ -23,7 +23,7 @@
   "dependencies": {
     "@notionhq/client": "2.2.3",
     "@sentry/nextjs": "7.50.0",
-    "next": "12.2.2",
+    "next": "13",
     "prismjs": "1.28.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -50,12 +50,12 @@
     "@types/jest-axe": "3.5.5",
     "@types/node": "18.0.0",
     "@types/prismjs": "1.26.0",
-    "@types/react": "18.0.14",
-    "@types/react-dom": "18.0.5",
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
     "@types/styled-components": "5.1.25",
     "@typescript-eslint/eslint-plugin": "5.38.0",
-    "eslint": "8.18.0",
-    "eslint-config-next": "12.1.6",
+    "eslint": "8.57.0",
+    "eslint-config-next": "14.1.3",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-storybook": "0.6.12",

src/components/app-link/index.tsx

@@ -23,8 +23,8 @@ export const AppLink = (props: PropsWithChildren<Props>) => {
   }
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <Link {...props} passHref>
+    <Link {...props} passHref legacyBehavior>
       <S.Nav isActive={props.isActive || false}>{props.children}</S.Nav>
     </Link>
-  )
+  );
 }

src/features/post/components/post-detail/block/image/image.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components"
-import NextImage from "next/image"
+import NextImage from "next/legacy/image"
 import { generateImagePath } from "@/lib/image"
 
 type Props = {

src/features/post/components/posts/components/post-item/components/tag/index.tsx

@@ -1,4 +1,4 @@
-import Image from "next/image"
+import Image from "next/legacy/image"
 import * as S from "./styled"
 
 type Props = {
@@ -13,8 +13,8 @@ export const ExternalTag = (props: Props) => {
         <Image
           src="/assets/zenn-logo.png"
           alt="zenn"
-          width="52px"
-          height="20px"
+          width={52}
+          height={20}
           objectFit="contain"
         />
       </S.Wrap>
@@ -28,8 +28,8 @@ export const ExternalTag = (props: Props) => {
         <Image
           src="/assets/qiita-logo.png"
           alt="qiita"
-          width="52px"
-          height="20px"
+          width={52}
+          height={20}
           objectFit="contain"
         />
       </S.Wrap>

src/features/theme/context.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import * as S from "styled-components"
+import { ThemeProvider as StyledComponentProvider } from "styled-components"
 import { darkTheme, ligthTheme } from "./theme"
 
 const Context = React.createContext<{ isDark: boolean; onToggle: () => void }>({
@@ -37,9 +37,13 @@ export const ThemeProvider = (props: React.PropsWithChildren) => {
     // TODO
     // eslint-disable-next-line react/jsx-no-constructed-context-values
     <Context.Provider value={{ isDark, onToggle }}>
-      <S.ThemeProvider theme={isDark ? darkTheme : ligthTheme}>
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-ignore */}
+      <StyledComponentProvider theme={isDark ? darkTheme : ligthTheme}>
+        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+        {/* @ts-ignore */}
         {props.children}
-      </S.ThemeProvider>
+      </StyledComponentProvider>
     </Context.Provider>
   )
 }

src/lib/bmc/bmc-button.tsx

@@ -1,13 +1,13 @@
-import Image from "next/image"
+import Image from "next/legacy/image"
 import { AppLink } from "@/components/app-link"
 
 export const BmcButton = () => (
   <AppLink isExternal href="https://www.buymeacoffee.com/mrskiro">
     <Image
       src="/assets/bmc.png"
       alt="by me a coffee"
-      width="140px"
-      height="80px"
+      width={140}
+      height={80}
       objectFit="contain"
     />
   </AppLink>

src/pages/_app.tsx

@@ -13,6 +13,8 @@ const MyApp = (props: AppProps) => {
   return (
     <>
       {isPrd() && <GoogleAnalytics />}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-ignore */}
       <ResetStyle />
       <ThemeProvider>
         {/* TODO: ThemeProvider内でのerrorを感知できないのでどうするか考える */}

src/pages/_document.tsx

@@ -18,13 +18,17 @@ class MyDocument extends Document {
     try {
       ctx.renderPage = () =>
         originalRenderPage({
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
           enhanceApp: (App) => (props) =>
             // eslint-disable-next-line react/jsx-props-no-spreading
             sheet.collectStyles(<App {...props} />),
         })
       const initialProps = await Document.getInitialProps(ctx)
       return {
         ...initialProps,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         styles: [initialProps.styles, sheet.getStyleElement()],
       }
     } finally {