feat: Bumped Next.js to 12.

Author: kkomelin

build/utils/loader.js

@@ -12,7 +12,8 @@ function uploadcareLoader({ src, width, quality }) {
         ? (0, helpers_1.generateDefaultProxyEndpoint)(customProxyDomain)
         : null;
     const proxyEndpoint = customProxyEndpoint || (0, helpers_1.generateDefaultProxyEndpoint)(publicKey);
-    const root = (0, helpers_1.trimTrailingSlash)(proxyEndpoint);
+    const basePath = (0, helpers_1.trimTrailingSlash)(process.env.NEXT_PUBLIC_UPLOADCARE_APP_BASE_PATH || '');
+    const proxy = (0, helpers_1.trimTrailingSlash)(proxyEndpoint);
     const isOnCdn = (0, helpers_1.isCdnUrl)(src, cdnDomain);
     if (!(0, helpers_1.isProduction)() && !isOnCdn) {
         const isPublicKeySet = !(0, helpers_1.isDotenvParamEmpty)(publicKey);
@@ -21,15 +22,22 @@ function uploadcareLoader({ src, width, quality }) {
             throw new Error(`Both NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY and NEXT_PUBLIC_UPLOADCARE_CUSTOM_PROXY_DOMAIN are not set. Please set either one.`);
         }
         if (src.startsWith('/')) {
-            throw new Error(`Failed to parse "${src}" in "uploadcareLoader", Uploadcare loader doesn't support relative images.`);
+            return src;
         }
     }
+    // Process local images in Production.
+    if ((0, helpers_1.isProduction)() && !isOnCdn && src.startsWith('/')) {
+        const isBasePathSet = !(0, helpers_1.isDotenvParamEmpty)(basePath);
+        if (!isBasePathSet) {
+            return src;
+        }
+        return `${basePath}${src}`;
+    }
     const filename = (0, helpers_1.getFilename)(src);
     const extension = (0, helpers_1.getExtension)(filename);
     // Some extensions are not processed by Uploadcare, e.g. SVG.
     if (constants_1.NOT_PROCESSED_EXTENSIONS.includes(extension)) {
-        // @todo: Test non-CDN urls.
-        return isOnCdn ? src : `${root}${src}`;
+        return isOnCdn ? src : `${basePath}${src}`;
     }
     // Demo: https://ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/-/format/auto/-/resize/300x/vercel.png
     const userParams = (0, helpers_1.parseUserParamsString)(userParamsString);
@@ -48,6 +56,6 @@ function uploadcareLoader({ src, width, quality }) {
         const withoutFilename = src.slice(0, src.lastIndexOf('/'));
         return `${withoutFilename}${apiParamsString}${filename}`;
     }
-    return `${root}${apiParamsString}${src}`;
+    return `${proxy}${apiParamsString}${src}`;
 }
 exports.uploadcareLoader = uploadcareLoader;

example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/nextjs-loader-demo",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,15 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "11.1.2",
     "@uploadcare/nextjs-loader": "*",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "next": "^12.0.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@types/react": "17.0.27",
-    "eslint": "7.32.0",
-    "eslint-config-next": "11.1.2",
-    "typescript": "4.4.3"
+    "@types/react": "^17.0.27",
+    "eslint": "^7.32.0",
+    "eslint-config-next": "^11.1.2",
+    "typescript": "^4.4.3"
   }
 }

example/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -12,8 +16,15 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }