Updated dependencies, Next.js 13

Author: shartte

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
 }

components/FeaturesSideNav.tsx

@@ -83,10 +83,6 @@ interface MenuEntry {
   children: (string | PageLink)[];
 }
 
-function isPageLink(child: PageLink): boolean {
-  return true;
-}
-
 function FeaturesSideNav() {
   const router = useRouter();
   const pageUrl = router.asPath + "/";
@@ -125,7 +121,7 @@ function FeaturesSideNav() {
                     <div className="icon-text">
                       {icon ? (
                         <span className="icon">
-                          <img src={icon} />
+                          <img src={icon} alt="" />
                         </span>
                       ) : null}
                       <span>{pageTitle ?? page.title}</span>

components/ItemIcon.tsx

@@ -10,7 +10,6 @@ export interface ItemIconProps {
 function ItemIcon({ itemId, nolink }: ItemIconProps) {
   const itemInfo = getItemInfo(itemId);
 
-  // eslint-disable-next-line @next/next/no-img-element
   const icon = (
     <img src={itemInfo.icon} alt={itemInfo.displayName} className="item-icon" />
   );

components/MdxImage.tsx

@@ -18,11 +18,25 @@ function MdxImage({
   if (!src) {
     return null;
   }
+
+  let actualWidth: number|undefined;
+  if (typeof width === "string") {
+    actualWidth = parseInt(width);
+  } else if (typeof width === "number") {
+    actualWidth = width;
+  }
+  let actualHeight: number|undefined;
+  if (typeof height === "string") {
+    actualHeight = parseInt(height);
+  } else if (typeof height === "number") {
+    actualHeight = height;
+  }
+
   return (
     <Image
-      alt={alt}
-      width={width}
-      height={height}
+      alt={alt ?? ""}
+      width={actualWidth}
+      height={actualHeight}
       src={src}
       loader={loadImage}
       unoptimized

components/loadImage.ts

@@ -1,5 +1,4 @@
-import { ImageLoader } from "next/image";
-import { ImageLoaderProps } from "next/dist/client/image";
+import { ImageLoader, ImageLoaderProps } from "next/image";
 
 const loadImage: ImageLoader = ({ src }: ImageLoaderProps) => {
   return src;

components/recipes/SmeltingRecipe.tsx

@@ -21,7 +21,7 @@ function SmeltingRecipe({ recipe }: SmeltingRecipeProps) {
       <div className={css.smeltingInputBox}>
         <RecipeIngredient itemIds={recipe.ingredient} />
         <div className={css.ingredientBox}>
-          <img className="item-icon" src={smelt.src} />
+          <img className="item-icon" src={smelt.src} alt="" />
         </div>
       </div>
       <RecipeArrow />

next.config.js

@@ -3,7 +3,7 @@
 const path = require("path");
 
 module.exports = {
-  swcMinify: true,
+  output: 'export',
   reactStrictMode: true,
   images: {
     loader: "custom",

package-lock.json

@@ -4,35 +4,37 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build && next export",
-    "start": "next start",
+    "build": "next build",
+    "serve": "serve out",
     "lint": "next lint",
     "prettier": "prettier --write .",
     "prettier:check": "prettier --check ."
   },
   "dependencies": {
-    "@docsearch/react": "^3.0.0-alpha.41",
+    "@docsearch/react": "^3.5.1",
     "@mdi/js": "^6.3.95",
-    "@mdi/react": "^1.5.0",
-    "@mdx-js/loader": "^2.1.1",
-    "@mdx-js/react": "^1.6.22",
+    "@mdi/react": "^1.6.1",
+    "@mdx-js/loader": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
     "@octokit/rest": "^18.12.0",
     "@tippyjs/react": "^4.2.5",
-    "@types/mdx-js__react": "^1.5.4",
+    "@types/mdx-js__react": "^1.5.5",
     "adm-zip": "^0.5.9",
     "bulma": "^0.9.3",
-    "next": "^12.1.6",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "next": "^13.4.13",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "remark-gfm": "^3.0.1",
-    "remark-slug": "^7.0.1"
+    "remark-slug": "^7.0.1",
+    "serve": "^14.2.0",
+    "sharp": "^0.32.4"
   },
   "devDependencies": {
     "@next/mdx": "^11.1.2",
     "@types/glob": "^7.1.4",
     "@types/react": "17.0.27",
     "eslint": "7.32.0",
-    "eslint-config-next": "11.1.2",
+    "eslint-config-next": "^13.4.13",
     "glob": "^7.2.0",
     "gray-matter": "^4.0.3",
     "image-size": "^1.0.0",