feat(v3-uplift): build /dev/components on previews, not production

The showcase was gated only by client-side NODE_ENV checks. Since next
build sets NODE_ENV=production, the route existed and was fetchable on
every deployed build — including Vercel previews, where it rendered blank
— while all ~29 showcase modules still shipped in the production bundle.
Unusable where it was wanted, shipped where it wasn't.

Gates it via pageExtensions instead, the same build-time mechanism already
used for the *.governance.tsx pages (PR #379, 'feat: conditional build').
Renaming the pages to *.dev.tsx means Next never sees them unless that
extension is registered: no route, no chunk, a real 404 rather than a blank
page. The now-redundant NODE_ENV guards are removed — they would have kept
the page blank on preview.

VERCEL_ENV is Vercel's documented system variable for per-environment
behaviour, so previews work with no dashboard setup. The
VERCEL_ENV !== 'production' veto is deliberate: without it the gate is
purely additive, and NEXT_PUBLIC_ENABLE_DEV_PAGES=true left scoped to all
environments would leak the showcase into production.

Author: abjt14

.env.example

@@ -8,6 +8,8 @@ NEXT_PUBLIC_GOVERNANCE_CACHE_URL=https://governance-cache-api.aave.com/graphql
 # Client on/off gate for gasless voting. The relay only works if GELATO_SPONSOR_KEY is also set server-side.
 NEXT_PUBLIC_ENABLE_GASLESS_VOTING=false
 NEXT_PUBLIC_ENABLE_STAKING=true
+# Force-build the /dev/components showcase. Automatic on `next dev` and Vercel previews.
+NEXT_PUBLIC_ENABLE_DEV_PAGES=false
 NEXT_PUBLIC_API_BASEURL=https://aave-api-v2.aave.com
 NEXT_PUBLIC_TRANSAK_APP_URL=https://global.transak.com
 NEXT_PUBLIC_TRANSAK_API_URL=https://api.transak.com

custom.d.ts

@@ -6,6 +6,7 @@ namespace NodeJS {
   interface ProcessEnv {
     NEXT_PUBLIC_ENABLE_GOVERNANCE: string;
     NEXT_PUBLIC_ENABLE_STAKING: string;
+    NEXT_PUBLIC_ENABLE_DEV_PAGES?: string;
     NEXT_PUBLIC_ENV: string;
     NEXT_PUBLIC_API_BASEURL: string;
     NEXT_PUBLIC_FORK_BASE_CHAIN_ID?: string;

next.config.js

@@ -8,6 +8,17 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 const pageExtensions = ['page.tsx', 'ts'];
 if (process.env.NEXT_PUBLIC_ENABLE_GOVERNANCE === 'true') pageExtensions.push('governance.tsx');
 if (process.env.NEXT_PUBLIC_ENABLE_STAKING === 'true') pageExtensions.push('staking.tsx');
+// Component showcase at `/dev/components`. Its pages are named `*.dev.tsx`, so unless that
+// extension is registered here Next never sees them: no route, no bundle, a real 404 rather than a
+// blank page. On for `next dev` and Vercel preview builds; off for the production IPFS build, which
+// sets neither. A `VERCEL_ENV` of `production` vetoes it outright, so a dashboard variable left
+// scoped to every environment by mistake still can't leak the showcase into production.
+const enableDevPages =
+  process.env.VERCEL_ENV !== 'production' &&
+  (process.env.NEXT_PUBLIC_ENABLE_DEV_PAGES === 'true' ||
+    process.env.VERCEL_ENV === 'preview' ||
+    process.env.NODE_ENV === 'development');
+if (enableDevPages) pageExtensions.push('dev.tsx');
 
 /** @type {import('next').NextConfig} */
 module.exports = withSentryConfig(

pages/dev/components/[section].page.tsx pages/dev/components/[section].dev.tsxpages/dev/components/[section].page.tsx renamed to pages/dev/components/[section].dev.tsx

@@ -5,15 +5,12 @@ import { SHOWCASE_SECTIONS } from 'src/modules/dev/ComponentShowcase/utils/regis
 
 /**
  * One route per showcase section: `/dev/components/<slug>`. Renders only the active
- * section (lazily loaded via the registry) inside the shared sidebar layout. Dev-only.
+ * section (lazily loaded via the registry) inside the shared sidebar layout. Only built when
+ * dev pages are enabled (see `pageExtensions` in next.config.js).
  */
 export default function ComponentShowcaseSectionPage() {
   const router = useRouter();
 
-  if (process.env.NODE_ENV !== 'development') {
-    return null;
-  }
-
   const slug = typeof router.query.section === 'string' ? router.query.section : '';
   const section = SHOWCASE_SECTIONS.find((s) => s.slug === slug);
   const ActiveSection = section?.Component;

pages/dev/components/index.page.tsx pages/dev/components/index.dev.tsxpages/dev/components/index.page.tsx renamed to pages/dev/components/index.dev.tsx

@@ -2,14 +2,13 @@ import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import { SHOWCASE_SECTIONS } from 'src/modules/dev/ComponentShowcase/utils/registry';
 
-// `/dev/components` → redirect to the first section. Dev-only.
+// `/dev/components` → redirect to the first section. Only built when dev pages are enabled
+// (see `pageExtensions` in next.config.js).
 export default function ComponentShowcaseIndexPage() {
   const router = useRouter();
 
   useEffect(() => {
-    if (process.env.NODE_ENV === 'development') {
-      router.replace(`/dev/components/${SHOWCASE_SECTIONS[0].slug}`);
-    }
+    router.replace(`/dev/components/${SHOWCASE_SECTIONS[0].slug}`);
   }, [router]);
 
   return null;