feat: Use next.config.js dynamic redirects (#10722)

.gitignore

@@ -95,7 +95,3 @@ public/page-data
 tsconfig.tsbuildinfo
 
 public/mdx-images/*
-
-# the vercel.json should be generated by the ./scripts/make-vercel-json.mjs script
-# to differentiate between SDK docs and developer docs redirects
-vercel.json

docs/contributing/pages/redirects.mdx

@@ -10,9 +10,17 @@ Redirects allow you to automatically redirect an incoming request path to a new
 There are two ways to add redirects in the Sentry docs:
 
 - [Add a New Redirect in `middleware.ts` (Recommended)](#add-a-new-redirect-in-middlewarets-recommended)
-- [Add a New Redirect in `vercel.json`](#add-a-new-redirect-in-verceljson)
+- [Add a New Redirect in `redirects.js`](#example-redirect-in-redirectsjs)
 
-Because Sentry has a limited number of Vercel redirects, you should configure your redirects in `middleware.ts` whenever possible. You should only use `vercel.json` if you need to use regular expressions in your redirects.
+<Note>
+  Both files make the distinction between SDK docs (ie. end user docs) and developer docs.
+</Note>
+
+Because Sentry has a limited number of `next.config.js` redirects, you should configure your redirects in `middleware.ts` whenever possible. You should only use `redirects.js` ie (`next.config.js`) if you need to use regular expressions and wildcard path segments in your redirects.
+
+<Alert level="warning">
+  It's no longer recommended to use `vercel.json` for redirects due to its limitations (doesn't work on localhost, requires a static file ...)
+</Alert>
 
 ### Add a New Redirect in `middleware.ts` (Recommended)
 
@@ -36,24 +44,26 @@ const REDIRECTS: {from: PathWithTrailingSlash; to: string}[] = [
 ];
 ```
 
-### Add a New Redirect in `vercel.json`
+### Add a New Redirect in `redirects.js`
 
 Sentry has a limited number of Vercel redirects, so you should only configure redirects in `vercel.json` if your redirects need to use regular expressions. Otherwise, use [`middleware.ts`](#add-a-new-redirect-in-middlewarets-recommended).
 
-To add a new redirect in [`vercel.json`](https://github.com/getsentry/sentry-docs/blob/master/vercel.json#L34), add a new object in `redirects` with the following properties:
+To add a new redirect in `redirects.js` (which is consumed by `next.config.js`'s [`redirects`](https://nextjs.org/docs/app/api-reference/next-config-js/redirects)), add a new object to the corresponding redirects with the following properties:
 
 - `source`: The incoming request path pattern.
 - `destination`: The new destination path you want to route to.
 
-#### Example Redirect in `vercel.json`
+#### Example Redirect in `redirects.js`
+
+The example below redirects URLs like `https://docs.sentry.io/cli/:path*` to `https://docs.sentry.io/product/cli/:path*` with a [path pattern](https://nextjs.org/docs/app/api-reference/next-config-js/redirects#path-matching) or a [Regex](https://nextjs.org/docs/app/api-reference/next-config-js/redirects#regex-path-matching).
 
-The example below redirects URLs like `https://docs.sentry.io/cli/(.*)` to `https://docs.sentry.io/product/cli/$1` with a matching regex pattern. For example, `https://docs.sentry.io/cli/installation/` would be redirected to `https://docs.sentry.io/product/cli/installation/`.
+For example, `https://docs.sentry.io/cli/installation/` would be redirected to `https://docs.sentry.io/product/cli/installation/`.
 
-```json {filename:vercel.json}
+```json {filename:redirects.js}
  "redirects": [
     {
-      "source": "/cli/(.*)",
-      "destination": "/product/cli/$1"
+      "source": "/cli/:path*",
+      "destination": "/product/cli/:path*",
     },
  ]
 ```

next.config.js

@@ -1,3 +1,5 @@
+const {redirects} = require('./redirects.js');
+
 const createMDX = require('@next/mdx');
 const remarkPrism = require('remark-prism');
 const {codecovWebpackPlugin} = require('@codecov/webpack-plugin');
@@ -28,6 +30,7 @@ const nextConfig = {
     // This is used on middleware
     DEVELOPER_DOCS_: process.env.NEXT_PUBLIC_DEVELOPER_DOCS,
   },
+  redirects,
 };
 
 const withMDX = createMDX({

package.json

@@ -11,10 +11,10 @@
     "url": "https://github.com/getsentry/sentry-docs/issues"
   },
   "scripts": {
-    "dev": "yarn vercel-json && concurrently \"yarn sidecar\" \"node ./src/hotReloadWatcher.mjs\" \"next dev\"",
-    "dev:developer-docs": "NEXT_PUBLIC_DEVELOPER_DOCS=1 yarn dev",
-    "build:developer-docs": "git submodule init && git submodule update && NEXT_PUBLIC_DEVELOPER_DOCS=1 yarn build",
-    "build": "prisma generate && yarn vercel-json && next build",
+    "dev": "yarn enforce-redirects && concurrently \"yarn sidecar\" \"node ./src/hotReloadWatcher.mjs\" \"next dev\"",
+    "dev:developer-docs": "yarn enforce-redirects && NEXT_PUBLIC_DEVELOPER_DOCS=1 yarn dev",
+    "build:developer-docs": "yarn enforce-redirects && git submodule init && git submodule update && NEXT_PUBLIC_DEVELOPER_DOCS=1 yarn build",
+    "build": "yarn enforce-redirects && prisma generate && next build",
     "start": "next start",
     "migrate:dev": "dotenv -e .env.development -- yarn prisma migrate reset",
     "lint": "next lint",
@@ -26,8 +26,8 @@
     "lint:prettier:fix": "prettier --write \"./{src,app,scripts}/**/*.{md,mdx,ts,tsx,js,jsx,mjs}\"",
     "lint:fix": "yarn run lint:prettier:fix && yarn run lint:eslint:fix",
     "sidecar": "yarn spotlight-sidecar",
-    "vercel-json": "node scripts/make-vercel-json.mjs",
-    "test": "jest"
+    "test": "jest",
+    "enforce-redirects": "node ./scripts/no-vercel-json-redirects.mjs"
   },
   "prisma": {
     "seed": "node prisma/seed/seed.mjs"