Fix /api/outfitImage for Vercel

Sigh, okay, serverless functions limiting us again :p

Still, though, we are *much closer* to portability than our original CRA+Vercel stuff though!!

api/README

@@ -1,12 +1,15 @@
-This is a hack to work around a limitation deploying to Vercel!
+This is a hack to work around limitations deploying to Vercel!
-https://github.com/vercel/vercel/issues/4739#issuecomment-926879578
 
-API endpoints declared in here *won't* work during local development, but *will*
+- https://github.com/vercel/vercel/issues/4739#issuecomment-926879578
+- https://github.com/vercel/vercel/issues/3460
+
+API endpoints declared in here _won't_ work during local development, but _will_
 work when deployed to production.
 
 Putting the endpoint here code-splits it separately from the rest of the app
 bundle, so its large dependencies aren't grouped in with the others, and thereby
-it just barely stays within the dependency bundle size of 50MB.
+it just barely stays within the dependency bundle size of 50MB. It also enables
+the dependencies in our `vercel-build` step to deploy with the bundle.
 
 If we move off Vercel, it'll be a good idea to move these endpoints back into
 the /pages/api folder!

api/outfitImage.js

@@ -39,12 +39,12 @@ import fetch from "node-fetch";
 import gql from "graphql-tag";
 import { print as graphqlPrint } from "graphql/language/printer";
 
-import connectToDb from "../../src/server/db";
+import connectToDb from "../src/server/db";
-import { renderOutfitImage } from "../../src/server/outfit-images";
+import { renderOutfitImage } from "../src/server/outfit-images";
 import getVisibleLayers, {
   petAppearanceFragmentForGetVisibleLayers,
   itemAppearanceFragmentForGetVisibleLayers,
-} from "../../src/shared/getVisibleLayers";
+} from "../src/shared/getVisibleLayers";
 
 const VALID_LAYER_URLS = [
   /^https:\/\/(impress-asset-images\.openneo\.net|impress-asset-images\.s3\.amazonaws\.com)\/(biology|object)\/[0-9]{3}\/[0-9]{3}\/[0-9]{3}\/[0-9]+\/(150|300|600)x(150|300|600)\.png(\?[a-zA-Z0-9_-]+)?$/,

next.config.js

@@ -2,18 +2,6 @@ module.exports = {
   env: {
     PUBLIC_URL: "",
   },
-  async rewrites() {
-    return [
-      {
-        source: "/outfits/:id/:size(150|300|600).png",
-        destination: "/api/outfitImage?size=:size&id=:id",
-      },
-      {
-        source: "/outfits/:id/v/:updatedAt/:size(150|300|600).png",
-        destination: "/api/outfitImage?size=:size&id=:id&updatedAt=:updatedAt",
-      },
-    ];
-  },
   async redirects() {
     return [
       {

vercel.json

@@ -1,5 +1,13 @@
 {
   "routes": [
+    {
+      "src": "/outfits/(?<id>[^/]+)/(?<size>150|300|600)\\.png",
+      "dest": "/api/outfitImage.js?size=$size&id=$id"
+    },
+    {
+      "src": "/outfits/(?<id>[^/]+)/v/(?<updatedAt>[^/]+)/(?<size>150|300|600)\\.png",
+      "dest": "/api/outfitImage.js?size=$size&id=$id&updatedAt=$updatedAt"
+    },
     {
       "handle": "filesystem"
     },