Update deps in web

web/package.json

@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.8",
-    "@chakra-ui/icons": "^1.1.1",
-    "@chakra-ui/react": "^1.8.0",
-    "@chakra-ui/system": "^1.10.0",
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/react": "^2.8.1",
+    "@chakra-ui/system": "^2.6.1",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@graphql-tools/schema": "^8.3.1",
@@ -26,44 +26,44 @@
     "@vivliostyle/viewer": "2.25.8",
     "apollo-server-micro": "^3.6.2",
     "chakra-ui-contextmenu": "^1.0.3",
-    "dotenv": "^14.3.2",
+    "dotenv": "^16.3.1",
     "firebase": "^9.6.4",
     "firebase-admin": "^10.0.1",
-    "framer-motion": "^5",
+    "framer-motion": "^10.16.4",
     "graphql": "^16.8.1",
-    "i18next": "^21.6.10",
-    "i18next-browser-languagedetector": "^6.1.3",
-    "isomorphic-unfetch": "^3.1.0",
+    "i18next": "^23.6.0",
+    "i18next-browser-languagedetector": "^7.1.0",
+    "isomorphic-unfetch": "^4.0.2",
     "json5": "^2.2.2",
     "lodash": "^4.17.21",
-    "micro": "^9.3.4",
+    "micro": "^10.0.1",
     "micro-cors": "^0.1.1",
     "mime-types": "^2.1.34",
-    "monaco-editor": "^0.31.1",
-    "next": "^12.1.0",
+    "monaco-editor": "^0.44.0",
+    "next": "^14.0.1",
     "npm-api.js": "^1.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-i18next": "^11.15.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^13.3.1",
     "react-icons": "^4.3.1",
     "react-reflex": "^4.0.3",
-    "swr": "^1.1.2",
+    "swr": "^2.2.4",
     "upath": "^2.0.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
     "@babel/core": "^7.16.12",
     "@types/micro-cors": "^0.1.2",
     "@types/mime-types": "^2.1.1",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
     "@types/scss-parser": "^1.0.1",
-    "babel-plugin-i18next-extract": "^0.8.3",
+    "babel-plugin-i18next-extract": "^0.9.0",
     "babel-preset-react-app": "^10.0.1",
     "eslint": "^8.7.0",
-    "eslint-config-next": "^12.0.8",
-    "fs-extra": "^10.0.0",
-    "typescript": "^4.5.5"
+    "eslint-config-next": "^14.0.1",
+    "fs-extra": "^11.1.1",
+    "typescript": "^5.2.2"
   },
   "main": "index.js",
   "license": "ISC",

web/src/components/GithubReposList.tsx

@@ -40,6 +40,7 @@ export const GithubReposList: React.FC<{}> = ({}) => {
           href="github/[owner]/[repo]"
           as={`/github/${repo.full_name}`}
           key={repo.id}
+          legacyBehavior
         >
           <a>
             <UI.Box key={repo.node_id}>

web/src/components/Header.tsx

@@ -87,7 +87,7 @@ export const Header: React.FC = () => {
   return (
     <UI.Flex w="100%" h={16} backgroundColor="gray.200">
       <UI.Container w="100%" justify="space-between" align="center">
-        <Link href="/">
+        <Link href="/" legacyBehavior>
           <a>
             <UI.Heading size="sm">Vivliostyle Pub</UI.Heading>
           </a>

web/src/pages/api/github/branches.ts

@@ -18,7 +18,7 @@ const branches: NextApiHandler<BranchesApiResponse | null> = async (
   res,
 ) => {
   const {owner, repo} = req.query;
-  if (req.method !== 'GET' || Array.isArray(owner) || Array.isArray(repo)) {
+  if (req.method !== 'GET' || typeof owner !== 'string' || typeof repo !== 'string') {
     console.log("validation error")
     return res.status(400).send(null);
   }

web/src/pages/api/github/contentOfRepository.ts

@@ -20,10 +20,10 @@ const contentOfRepository: NextApiHandler<ContentOfRepositoryApiResponse | null>
     const {owner, repo, path, branch, oid} = req.query;
     if (
       req.method !== 'GET' ||
-      Array.isArray(owner) ||
-      Array.isArray(repo) ||
-      Array.isArray(path) ||
-      Array.isArray(branch)
+      typeof owner !== 'string' ||
+      typeof repo !== 'string' ||
+      typeof path !== 'string' ||
+      typeof branch !== 'string'
     ) {
       console.log('validation error');
       return res.status(400).send(null);
@@ -101,12 +101,10 @@ const contentOfRepository: NextApiHandler<ContentOfRepositoryApiResponse | null>
           }
         }
       }
-    `);
-      if (oid == repository.content.oid) {
-      // ハッシュが同じなら取得しない
-      res
-          .status(200)
-          .json({content: '', encoding: '', oid: repository.content.oid});
+      `) as { repository: { content: { isBinary: boolean; oid: string; text: string } } };
+      if (oid == repository.content?.oid) {
+        // ハッシュが同じなら取得しない
+        res.status(200).json({content: '', encoding: '', oid});
       } else if (repository.content.isBinary) {
         const octokit = new Octokit({
           auth: `token ${decrypted}`,

web/src/pages/api/github/tree.ts

@@ -13,7 +13,13 @@ const commits: NextApiHandler<CommitsOfRepositoryApiResponse | null> = async (
   res,
 ) => {
   const {owner, repo, branch, path} = req.query;
-  if (req.method !== 'GET' || Array.isArray(owner) || Array.isArray(repo) || Array.isArray(branch) || Array.isArray(path)) {
+  if (
+    req.method !== 'GET' ||
+    typeof owner !== 'string' ||
+    typeof repo !== 'string' ||
+    typeof branch !== 'string' ||
+    typeof path !== 'string'
+  ) {
     console.log('validation error');
     return res.status(400).send(null);
   }

web/src/pages/github/[owner]/[repo].tsx

@@ -149,7 +149,7 @@ const GitHubOwnerRepo = () => {
   // }, [session, currentFile]);
 
   const onModified = useCallback(
-    (updatedText) => {
+    (updatedText: string) => {
       setWarnDialog(true);
     },
     [setWarnDialog],