use next/image again (#2163)

## Description

This PR:
- removes the `nextImageExportOptimizer` directory with the rescaled
images,
- goes back to using `next/image` instead of
`next-image-export-optimizer`,
- switches off `output: export` 
- I considered using `lqip-modern`, but `plaiceholder` just fits really
well here and required very little code to integrate

@saihaj I can't believe you and that one comment from Benjie in the WG
issue got me to do this, but here it is.

This isn't _just_ a refactor, because the new placeholder do in fact
look better.

### How to use the placeholders?

- Use `placeholder=blur` with `blurDataURL` whenever you want something
very smooth.
- You don't have to pass `blurDataURL` explicitly if the `src` is
`StaticImageData` from file import.
- Use `plaiceholder` with `getStaticProps` in `pages` and server
components in `app` to get LQIPs for remote images.
- Use `placeholder={`data:image/${base64Placeholder}`} whenever you want
something a bit pixelated. Normally I wouldn't but in some places it
looks very appropriate with our design system.

**Disclaimer: This PR can be reverted if it turns out Vercel's Image
Optimization API is prohibitively expensive.**

### Context

One historic reason for using `next-image-export-optimizer` could have
been the incompatibility of `next/image` with `output: export`. However,
SSG in Next.js is no longer locked under `output: export`.

Author: hasparus

.eslintrc.cjs

@@ -59,25 +59,22 @@ module.exports = {
         "@next/next/no-img-element": "off", // straight up upsell, small `img`s actually don't need optimization
 
         "tailwindcss/classnames-order": "off",
-        "@typescript-eslint/no-restricted-imports": [
-          "error",
-          {
-            paths: [
-              {
-                name: "next/image",
-                message: "Please use `next-image-export-optimizer` instead",
-                allowTypeImports: true,
-              },
-            ],
-          },
-        ],
         "prefer-const": ["error", { destructuring: "all" }],
         "prefer-rest-params": "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",
+        "no-restricted-syntax": [
+          "error",
+          {
+            selector:
+              "JSXElement[openingElement.name.name=/^(Image|NextImage)$/]:not(:has(JSXAttribute[name.name='placeholder']))",
+            message:
+              "Pass `placeholder: 'empty' | 'blur'` when calling <Image> or <NextImage>.",
+          },
+        ],
       },
       settings: {
         tailwindcss: {

next.config.js

@@ -7,6 +7,7 @@ import withLess from "next-with-less"
 import nextBundleAnalyzer from "@next/bundle-analyzer"
 import fs from "fs"
 import rehypeMermaid from "rehype-mermaid"
+import withPlaiceholder from "@plaiceholder/next"
 
 import { remarkGraphiQLComment } from "./src/remark-graphiql-comment.js"
 import { syntaxHighlightingThemes } from "./src/_design-system/syntax/index.js"
@@ -109,27 +110,15 @@ const config = {
 
     return config
   },
-  // Comment this out if you're working on OG images.
-  output: "export",
   images: {
-    loader: "custom",
-    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    remotePatterns: [
+      {
+        hostname: "avatars.sched.co",
+        pathname: "**",
+      },
+    ],
   },
-  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",
     NEXT_PUBLIC_GA_ID:
       process.env.NODE_ENV === "production" ? "UA-44373548-16" : "",
   },
@@ -180,7 +169,9 @@ const withBundleAnalyzer = nextBundleAnalyzer({
   enabled: process.env.ANALYZE === "true",
 })
 
-export default withBundleAnalyzer(withLess(withNextra(config)))
+export default withBundleAnalyzer(
+  withLess(withNextra(withPlaiceholder(config))),
+)
 
 function mermaidConfig() {
   return [

package.json

@@ -6,7 +6,7 @@
   "packageManager": "[email protected]+sha512.0e155aa2629db8672b49e8475da6226aa4bdea85fdcdfdc15350874946d4f3c91faaf64cbdc4a5d1ab8002f473d5c3fcedcd197989cf0390f9badd3c04678706",
   "scripts": {
     "analyze": "ANALYZE=true next build",
-    "build": "next build && next-image-export-optimizer",
+    "build": "next build",
     "check:links": "lychee --verbose --no-progress './src/pages/**/*.mdx' --base https://graphql.org",
     "dev": "next",
     "format": "pnpm format:check --write",
@@ -16,7 +16,7 @@
     "lint:docs:ci": "eslint --ignore-path .gitignore src/pages/learn --format eslint-formatter-github",
     "postbuild": "next-sitemap",
     "prebuild": "tsx scripts/get-github-info",
-    "serve": "pnpx serve out",
+    "start": "next start",
     "test": "playwright test && pnpm test:unit",
     "test:e2e": "playwright test",
     "test:ui": "playwright test --ui",
@@ -36,6 +36,7 @@
     "@igorkowalczyk/is-browser": "^5.1.0",
     "@lezer/highlight": "^1.2.1",
     "@next/bundle-analyzer": "^15.4.5",
+    "@plaiceholder/next": "^3.0.0",
     "@radix-ui/react-radio-group": "^1.2.2",
     "@sparticuz/chromium": "^138.0.2",
     "@tailwindcss/container-queries": "^0.1.1",
@@ -57,7 +58,6 @@
     "markdown-to-jsx": "^7.7.2",
     "motion": "^12.11.0",
     "next": "^14.2.32",
-    "next-image-export-optimizer": "^1.18.0",
     "next-query-params": "^5.0.1",
     "next-sitemap": "^4.2.3",
     "next-with-less": "^3.0.1",
@@ -66,6 +66,7 @@
     "numbro": "2.5.0",
     "p-limit": "^4.0.0",
     "parser-front-matter": "1.6.4",
+    "plaiceholder": "^3.0.0",
     "playwright-core": "^1.54.2",
     "postcss": "^8.4.49",
     "postcss-import": "^16.1.1",

patches/nextra.patch

@@ -5,7 +5,7 @@ index 239d72f5921e2d1b7359e569ae5b74c12d7c9d8a..ebeb619da1e3ccb7722e9388c92c1e21
 @@ -1,5 +1,5 @@
  import { jsx } from "react/jsx-runtime";
 -import NextImage from "next/image";
-+import NextImage from "next-image-export-optimizer";
++import NextImage from "next/image"; // :)
  import { forwardRef } from "react";
  const Image = forwardRef((props, ref) => {
    const ComponentToUse = typeof props.src === "object" ? NextImage : "img";