Upgrade react/next version

.storybook/storyshots/storybook.test.ts

@@ -1,5 +1,5 @@
 import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots'
-import path from 'path'
+const path = require('path')
 
 initStoryshots({
   configPath: path.resolve(__dirname, './main.js'),

package.json

@@ -19,48 +19,52 @@
   "dependencies": {
     "axios": "^0.27.2",
     "firebase": "^9.8.1",
-    "next": "12.1.6",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "next": "^13.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.5",
-    "@babel/preset-env": "^7.18.2",
-    "@storybook/addon-actions": "^6.5.8",
-    "@storybook/addon-essentials": "^6.5.8",
-    "@storybook/addon-links": "^6.5.8",
-    "@storybook/addon-storyshots": "^6.5.8",
-    "@storybook/builder-webpack5": "^6.5.8",
-    "@storybook/manager-webpack5": "^6.5.8",
-    "@storybook/react": "^6.5.8",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react-hooks": "^7.0.2",
-    "@types/node": "17.0.31",
-    "@types/react": "18.0.8",
-    "@types/react-dom": "18.0.3",
-    "babel-jest": "^28.1.1",
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/addon-storyshots": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/react": "^6.5.13",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "react-test-renderer": "^18.2.0",
+    "babel-jest": "^29.3.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "css-loader": "^6.7.1",
     "eslint": "8.14.0",
-    "eslint-config-next": "12.1.6",
+    "eslint-config-next": "^13.0.3",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "firebase-tools": "^10.8.0",
     "husky": "^7.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.1.0",
-    "jest-environment-jsdom": "^28.1.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^12.4.1",
     "nock": "^13.2.7",
     "prettier": "^2.6.2",
     "sass": "^1.52.3",
     "sass-loader": "^13.0.0",
-    "storybook-addon-next-router": "^4.0.0",
+    "storybook-addon-next-router": "^4.0.1",
     "style-loader": "^3.3.1",
-    "ts-jest": "^28.0.5",
-    "typescript": "4.6.4",
-    "webpack": "5.68.0"
+    "ts-jest": "^29.0.3",
+    "typescript": "^4.9.3",
+    "webpack": "^5.75.0"
+  },
+  "resolutions": {
+    "react-test-renderer": "18.2.0"
   },
   "lint-staged": {
     "src/**/*.{ts,tsx}": [

src/hooks/tests/useCSR.test.ts

@@ -1,12 +1,13 @@
-import Router, { useRouter } from 'next/router'
 import { renderHook, act, RenderResult } from '@testing-library/react-hooks'
 
 import { useCSR } from '../useCSR'
+import { redirect, usePathname } from 'next/navigation'
 
 jest.mock('next/router')
+jest.mock('next/navigation')
 
-const mockedUseRouter = jest.mocked(useRouter)
-const mockedRouter = jest.mocked(Router)
+const mockedUsePathName = jest.mocked(usePathname)
+const mockedRedirect = jest.mocked(redirect)
 
 let result: RenderResult<boolean> | undefined
 
@@ -21,14 +22,13 @@ describe('useCSR', () => {
       ${'/'}                  | ${'パスが`/`のとき、Router.replaceを実行せずにtrueを返す'}
       ${'/path/to/not/exist'} | ${'パスがROUTESに存在しないとき、Router.replaceを実行せずにtrueを返す'}
     `('$description', async ({ path }) => {
-      mockedUseRouter.mockReturnValue({ asPath: path } as any)
-      mockedRouter.replace.mockResolvedValue(true)
+      mockedUsePathName.mockReturnValue({ asPath: path } as any)
 
       await act(async () => {
         result = renderHook(() => useCSR()).result
       })
 
-      expect(mockedRouter.replace).toHaveBeenCalledTimes(0)
+      expect(mockedRedirect).toHaveBeenCalledTimes(0)
       expect(result?.current).toBe(true)
     })
   })
@@ -41,15 +41,14 @@ describe('useCSR', () => {
     `(
       '$path が $href のパターンに合致するとき、Router.replaceを実行し、falseを返す',
       async ({ path, href }) => {
-        mockedUseRouter.mockReturnValue({ asPath: path } as any)
-        mockedRouter.replace.mockResolvedValue(true)
+        mockedUsePathName.mockReturnValue(path)
 
         await act(async () => {
           result = renderHook(() => useCSR()).result
         })
 
-        expect(mockedRouter.replace).toHaveBeenCalledTimes(1)
-        expect(mockedRouter.replace).toHaveBeenCalledWith(href, path)
+        expect(mockedRedirect).toHaveBeenCalledTimes(1)
+        expect(mockedRedirect).toHaveBeenCalledWith(href)
         expect(result?.current).toBe(false)
       }
     )

src/hooks/useCSR.ts

@@ -1,14 +1,14 @@
 import { useState, useEffect } from 'react'
-import Router, { useRouter } from 'next/router'
 
 import { ROUTES } from '../config/routes'
+import { redirect, usePathname } from 'next/navigation'
 
 export const useCSR = (): boolean => {
   const [execRouting, setExecRouting] = useState(false)
-  const { asPath } = useRouter()
+  const asPath = usePathname()
 
   useEffect(() => {
-    if (asPath === '/') {
+    if (!asPath || asPath === '/') {
       // `/`の場合はCSRしない
       setExecRouting(true)
       return
@@ -17,7 +17,7 @@ export const useCSR = (): boolean => {
     const isCSR = ROUTES.some(path => {
       if (new RegExp(`^${path.pattern}$`).test(asPath)) {
         // パスが定義されたパターンと合致する場合CSRする
-        Router.replace(path.href, asPath).then()
+        redirect(path.href)
         return true
       }
     })

src/pages/Home/stories/__snapshots__/Home.stories.storyshot

@@ -17,6 +17,7 @@ Array [
           href="/login"
           onClick={[Function]}
           onMouseEnter={[Function]}
+          onTouchStart={[Function]}
         >
           ログイン画面（/login）
         </a>