Optimize images with next-image-export-optimizer

.eslintrc.cjs

@@ -1,16 +1,46 @@
+/* eslint-env node */
+
 module.exports = {
   root: true,
   overrides: [
     {
       files: ["**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts}"],
-      extends: ["plugin:tailwindcss/recommended"],
+      extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:tailwindcss/recommended",
+        "prettier",
+      ],
       parser: "@typescript-eslint/parser",
       parserOptions: {
         sourceType: "module",
         ecmaVersion: "latest",
       },
       rules: {
         "tailwindcss/classnames-order": "off",
+        "@typescript-eslint/no-restricted-imports": [
+          "error",
+          {
+            paths: [
+              {
+                name: "next/image",
+                message: "Please use `next-image-export-optimizer` instead",
+                allowTypeImports: true,
+              },
+            ],
+          },
+        ],
+        // TODO: fix below
+        "no-var": "off",
+        "no-useless-escape": "off",
+        "prefer-const": "off",
+        "prefer-rest-params": "off",
+        "prefer-spread": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/no-var-requires": "off",
+        "@typescript-eslint/ban-types": "off",
       },
       settings: {
         tailwindcss: {

next-sitemap.config.cjs

@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 /** @type {import('next-sitemap').IConfig} */
 module.exports = {
   siteUrl: process.env.SITE_URL || "https://graphql.org",

next.config.js

@@ -37,9 +37,28 @@ export default withLess(
     },
     output: "export",
     images: {
-      unoptimized: true,
+      loader: "custom",
+      imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+      deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    },
+    transpilePackages: ["next-image-export-optimizer"],
+    env: {
+      nextImageExportOptimizer_imageFolderPath: "public/images",
+      nextImageExportOptimizer_exportFolderPath: "out",
+      nextImageExportOptimizer_quality: "75",
+      nextImageExportOptimizer_storePicturesInWEBP: "true",
+      nextImageExportOptimizer_exportFolderName: "nextImageExportOptimizer",
+      // If you do not want to use blurry placeholder images, then you can set
+      // nextImageExportOptimizer_generateAndUseBlurImages to false and pass
+      // `placeholder="empty"` to all <ExportedImage> components.
+      nextImageExportOptimizer_generateAndUseBlurImages: "true",
+      // If you want to cache the remote images, you can set the time to live of the cache in seconds.
+      // The default value is 0 seconds.
+      nextImageExportOptimizer_remoteImageCacheTTL: "0",
     },
     trailingSlash: true,
+    // Only for local development, skip 200 statusCode due following error:
+    //
     // `statusCode` is not undefined or valid statusCode for route {"source":"/conf/attendee/:path*","destination":"https://graphql-conf-attendee-nextjs.vercel.app/:path*","statusCode":200}
     // `statusCode` is not undefined or valid statusCode for route {"source":"/swapi-graphql/:path*","destination":"https://graphql.github.io/swapi-graphql/:path*","statusCode":200}
     // Valid redirect statusCode values are 301, 302, 303, 307, 308

package.json

@@ -1,72 +1,81 @@
 {
+  "version": "0.0.0",
+  "type": "module",
   "repository": "graphql/graphql.github.io website",
   "private": true,
-  "version": "0.0.0",
   "scripts": {
-    "dev": "next",
     "//prebuild": "tsx --env-file=.env src/get-github-info.ts",
-    "build": "next build",
-    "postbuild": "next-sitemap --config next-sitemap.config.cjs",
-    "start": "next start",
+    "build": "next build && next-image-export-optimizer",
+    "dev": "next",
     "format": "pnpm format:check --write",
     "format:check": "prettier --cache --check \"**/*.{js,jsx,ts,tsx,json,md}\"",
     "lint": "eslint --ignore-path .gitignore .",
+    "postbuild": "next-sitemap --config next-sitemap.config.cjs",
+    "start": "next start",
     "test": "echo \"no tests\" && exit 1"
   },
-  "type": "module",
   "dependencies": {
     "@graphql-tools/schema": "10.0.3",
-    "codemirror": "5.65.1",
-    "codemirror-graphql": "1.3.2",
-    "graphql": "16.8.1",
-    "marked": "5.0.2",
-    "numbro": "2.3.6",
-    "parser-front-matter": "1.6.4",
-    "string-similarity": "^4.0.4",
-    "timeago.js": "4.0.2",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "leaflet": "^1.9.4",
-    "iframe-resizer-react": "^1.1.0",
-    "gray-matter": "^4.0.3",
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@svgr/webpack": "^8.0.1",
+    "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
+    "@tailwindcss/typography": "^0.5.10",
+    "autoprefixer": "^10.4.17",
     "clsx": "^2.1.0",
+    "codemirror": "5.65.1",
+    "codemirror-graphql": "1.3.2",
+    "date-fns": "^2.30.0",
     "fast-glob": "^3.3.2",
+    "graphql": "16.8.1",
+    "gray-matter": "^4.0.3",
+    "iframe-resizer-react": "^1.1.0",
+    "leaflet": "^1.9.4",
     "markdown-to-jsx": "^7.4.0",
+    "marked": "5.0.2",
     "next": "^14.1.4",
+    "next-image-export-optimizer": "^1.12.3",
     "next-query-params": "^5.0.0",
     "next-sitemap": "^4.2.3",
     "next-with-less": "^3.0.1",
     "nextra": "3.0.0-alpha.22",
     "nextra-theme-docs": "3.0.0-alpha.22",
+    "numbro": "2.3.6",
     "p-limit": "^4.0.0",
+    "parser-front-matter": "1.6.4",
+    "postcss": "^8.4.33",
+    "prettier-plugin-pkg": "^0.18.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-medium-image-zoom": "5.1.8",
     "server-only": "0.0.1",
     "server-only-context": "^0.1.0",
+    "string-similarity": "^4.0.4",
     "string-strip-html": "^13.4.5",
-    "unist-util-visit": "^5.0.0",
-    "use-query-params": "^2.2.1",
     "tailwindcss": "^3.4.1",
-    "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
-    "@tailwindcss/typography": "^0.5.10",
-    "postcss": "^8.4.33",
-    "@svgr/webpack": "^8.0.1",
-    "autoprefixer": "^10.4.17",
+    "timeago.js": "4.0.2",
     "tsx": "^4.7.0",
-    "react-medium-image-zoom": "5.1.8",
-    "date-fns": "^2.30.0"
+    "unist-util-visit": "^5.0.0",
+    "use-query-params": "^2.2.1"
   },
   "devDependencies": {
+    "@types/codemirror": "5.60.7",
     "@types/node": "^20.11.30",
     "@types/react": "^18.2.73",
-    "@types/codemirror": "5.60.7",
     "@types/string-similarity": "^4.0.2",
+    "@typescript-eslint/eslint-plugin": "7.4.0",
     "@typescript-eslint/parser": "7.4.0",
     "eslint": "8.57.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-tailwindcss": "3.15.1",
     "prettier": "3.2.5",
     "typescript": "^5.4.3"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "nextra@3.0.0-alpha.22": "patches/nextra@3.0.0-alpha.22.patch"
+    }
   }
 }