fix: skew protection on prefetch without interfering with proxy (#1660)

.github/workflows/deploy-docs-bundle-preview.yml

@@ -96,7 +96,7 @@ jobs:
         uses: dawidd6/action-download-artifact@v2
         if: success() && github.event.number
         with:
-          workflow: nextjs_bundle_analysis.yml
+          workflow: Preview @fern-ui/docs-bundle
           branch: ${{ github.event.pull_request.base.ref }}
           path: packages/ui/docs-bundle/.next/analyze/base
 

packages/commons/next-seo/package.json

@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@fern-api/fdr-sdk": "workspace:*",
-    "next": "npm:@fern-api/[email protected].0",
+    "next": "npm:@fern-api/[email protected].1",
     "react": "^18.2.0"
   },
   "devDependencies": {

packages/ui/app/package.json

@@ -90,7 +90,7 @@
     "mdast-util-to-hast": "^13.1.0",
     "mdx-bundler": "^10.0.2",
     "moment": "^2.30.1",
-    "next": "npm:@fern-api/[email protected].0",
+    "next": "npm:@fern-api/[email protected].1",
     "next-mdx-remote": "^5.0.0",
     "nprogress": "^0.2.0",
     "numeral": "^2.0.6",

packages/ui/app/src/components/FernLink.tsx

@@ -1,6 +1,6 @@
 import { OpenNewWindow } from "iconoir-react";
 import { atom, useAtomValue } from "jotai";
-import Link from "next/link";
+import Link, { LinkProps } from "next/link";
 import { ReactElement, forwardRef, useEffect, useState, type ComponentProps } from "react";
 import { format, parse, resolve, type UrlObject } from "url";
 import { useMemoOne } from "use-memo-one";
@@ -91,6 +91,12 @@ const FernExternalLink = forwardRef<HTMLAnchorElement, FernExternalLinkProps>(
 
 FernExternalLink.displayName = "FernExternalLink";
 
+const LinkWith404Fallback = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
+    return <Link ref={ref} {...props} />;
+});
+
+LinkWith404Fallback.displayName = "LinkWith404Fallback";
+
 export function toUrlObject(url: string | UrlObject): UrlObject {
     if (url == null) {
         return {};

packages/ui/app/src/hooks/useApiRouteSWR.ts

@@ -5,11 +5,15 @@ import { FernDocsApiRoute, useApiRoute } from "./useApiRoute";
 
 interface Options<T> extends SWRConfiguration<T, Error, Fetcher<T>> {
     disabled?: boolean;
-    request?: RequestInit;
+    request?: RequestInit & { headers?: Record<string, string> };
 }
 
-function createFetcher<T>(init?: RequestInit): (url: string) => Promise<T> {
-    return (url: string): Promise<T> => fetch(withSkewProtection(url), init).then((r) => r.json());
+function createFetcher<T>(init?: RequestInit & { headers?: Record<string, string> }): (url: string) => Promise<T> {
+    return async (url: string): Promise<T> => {
+        const request = { ...init, headers: withSkewProtection(init?.headers) };
+        const r = await fetch(url, request);
+        return await r.json();
+    };
 }
 
 export function useApiRouteSWR<T>(route: FernDocsApiRoute, options?: Options<T>): SWRResponse<T> {

packages/ui/app/src/hooks/useInterceptNextDataHref.ts

@@ -8,7 +8,6 @@ import { parseRelativeUrl } from "next/dist/shared/lib/router/utils/parse-relati
 import { removeTrailingSlash } from "next/dist/shared/lib/router/utils/remove-trailing-slash";
 import { Router } from "next/router";
 import { useEffect } from "react";
-import { withSkewProtection } from "../util/withSkewProtection";
 
 /**
  * This function is adapted from https://github.com/vercel/next.js/blob/canary/packages/next/src/client/page-loader.ts
@@ -26,7 +25,7 @@ function createPageLoaderGetDataHref(basePath: string | undefined): PageLoader["
 
         const getHrefForSlug = (path: string) => {
             const dataRoute = getAssetPathFromRoute(removeTrailingSlash(addLocale(path, locale)), ".json");
-            return addPathPrefix(`/_next/data/${buildId}${dataRoute}${withSkewProtection(search)}`, basePath);
+            return addPathPrefix(`/_next/data/${buildId}${dataRoute}${search}`, basePath);
         };
 
         const toRet = getHrefForSlug(

packages/ui/app/src/util/withSkewProtection.ts

@@ -1,12 +1,10 @@
 const deploymentId = process.env.NEXT_DEPLOYMENT_ID;
-export function withSkewProtection(url: string): string {
+
+// appears to be a browser bug where `Headers` object is not settable, so we will use a plain object instead
+export function withSkewProtection(h?: Record<string, string>): HeadersInit | undefined {
     if (!deploymentId) {
-        return url;
+        return h;
     }
 
-    if (url.includes("?")) {
-        return `${url}&dpl=${deploymentId}`;
-    } else {
-        return `${url}?dpl=${deploymentId}`;
-    }
+    return new Headers({ ...h, "X-Deployment-Id": deploymentId });
 }

packages/ui/docs-bundle/next.config.mjs

@@ -147,7 +147,7 @@ const nextConfig = {
 function withVercelEnv(config) {
     return {
         ...config,
-        deploymentId: process.env.VERCEL_DEPLOYMENT_ID, // skew protection
+        deploymentId: process.env.VERCEL_DEPLOYMENT_ID ?? "dpl_development", // skew protection
         productionBrowserSourceMaps: process.env.VERCEL_ENV === "preview",
     };
 }

packages/ui/docs-bundle/package.json

@@ -52,7 +52,7 @@
     "form-data": "4.0.0",
     "jose": "^5.2.3",
     "jsonpath": "^1.1.1",
-    "next": "npm:@fern-api/[email protected].0",
+    "next": "npm:@fern-api/[email protected].1",
     "node-fetch": "2.7.0",
     "postcss-import": "^16.0.1",
     "react": "^18.2.0",

packages/ui/fern-docs-utils/package.json

@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@fern-api/fdr-sdk": "workspace:*",
-    "next": "npm:@fern-api/[email protected].0",
+    "next": "npm:@fern-api/[email protected].1",
     "path-to-regexp": "6.3.0",
     "url-join": "5.0.0"
   },

packages/ui/fontawesome-cdn/package.json

@@ -45,7 +45,7 @@
     "@types/react": "^18.0.20",
     "depcheck": "^1.4.3",
     "eslint": "^8.56.0",
-    "next": "npm:@fern-api/[email protected].0",
+    "next": "npm:@fern-api/[email protected].1",
     "organize-imports-cli": "^0.10.0",
     "prettier": "^3.3.2",
     "stylelint": "^16.1.0",

packages/ui/local-preview-bundle/package.json

@@ -43,7 +43,7 @@
     "cssnano": "^6.0.3",
     "jsonpath": "^1.1.1",
     "lodash-es": "^4.17.21",
-    "next": "npm:@fern-api/[email protected].0",
+    "next": "npm:@fern-api/[email protected].1",
     "node-fetch": "2.7.0",
     "postcss-import": "^16.0.1",
     "react": "^18.2.0",