fix headers and rewrites

configs/nextjs/headers.js

@@ -1,5 +1,3 @@
-const getCspPolicy = require('../../lib/csp/getCspPolicy');
-
 async function headers() {
   return [
     {
@@ -14,10 +12,6 @@ async function headers() {
           key: 'X-Content-Type-Options',
           value: 'nosniff',
         },
-        {
-          key: 'Content-Security-Policy-Report-Only',
-          value: getCspPolicy(),
-        },
       ],
     },
   ];

configs/nextjs/redirects.js

@@ -0,0 +1,11 @@
+async function redirects() {
+  return [
+    {
+      source: '/',
+      destination: '/poa/core',
+      permanent: false,
+    },
+  ];
+}
+
+module.exports = redirects;

configs/nextjs/rewrites.js

@@ -1,15 +1,18 @@
-const parseNetworkConfig = require('../../lib/networks/parseNetworkConfig');
-
 async function rewrites() {
   // there can be networks without subtype
   // routing in nextjs allows optional params only at the end of the path
   // if there are paths with subtype and subsubtype, we will change the routing
   // but so far we think we're ok with this hack
-  const networksFromConfig = parseNetworkConfig();
-  return networksFromConfig.filter(n => !n.subType).map(n => ({
-    source: `/${ n.type }/:slug*`,
-    destination: `/${ n.type }/mainnet/:slug*`,
-  }));
+  //
+  // UPDATE: as for now I hardcoded all networks without subtype
+  // because we cannot do proper dynamic rewrites in middleware using runtime ENVs
+  // see issue - https://github.com/vercel/next.js/discussions/35231
+  // it seems like it's solved but it's not actually
+
+  return [
+    { source: '/astar/:slug*', destination: '/astar/mainnet/:slug*' },
+    { source: '/shiden/:slug*', destination: '/shiden/mainnet/:slug*' },
+  ];
 }
 
 module.exports = rewrites;

lib/csp/getCspPolicy.ts

@@ -1,4 +1,4 @@
-const parseNetworkConfig = require('../networks/parseNetworkConfig');
+import availableNetworks from 'lib/networks/availableNetworks';
 
 const KEY_WORDS = {
   BLOB: 'blob:',
@@ -16,11 +16,15 @@ const MAIN_DOMAINS = [ '*.blockscout.com', 'blockscout.com' ];
 const isDev = process.env.NODE_ENV === 'development';
 
 function getNetworksExternalAssets() {
-  const icons = parseNetworkConfig()
+  const icons = availableNetworks
     .filter(({ icon }) => typeof icon === 'string')
-    .map(({ icon }) => new URL(icon));
+    .map(({ icon }) => new URL(icon as string));
 
-  return icons;
+  const logos = availableNetworks
+    .filter(({ logo }) => typeof logo === 'string')
+    .map(({ logo }) => new URL(logo as string));
+
+  return icons.concat(logos);
 }
 
 function makePolicyMap() {
@@ -121,4 +125,4 @@ function getCspPolicy() {
   return policyString;
 }
 
-module.exports = getCspPolicy;
+export default getCspPolicy;

middleware.js

@@ -1,27 +0,0 @@
-const { NextResponse } = require('next/server');
-
-const { NAMES } = require('lib/cookies');
-const { link } = require('lib/link/link');
-const findNetwork = require('lib/networks/findNetwork').default;
-
-export function middleware(req) {
-  const [ , networkType, networkSubtype ] = req.nextUrl.pathname.split('/');
-  const networkParams = {
-    network_type: networkType,
-    network_sub_type: networkSubtype,
-  };
-  const selectedNetwork = findNetwork(networkParams);
-
-  if (selectedNetwork) {
-    const apiToken = req.cookies.get(NAMES.API_TOKEN);
-
-    if (!apiToken) {
-      const authUrl = link('auth', networkParams);
-      return NextResponse.redirect(authUrl);
-    }
-  }
-}
-
-export const config = {
-  matcher: '/:network_type/:network_sub_type/account/:path*',
-};

middleware.ts

@@ -0,0 +1,49 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+
+import { NAMES } from 'lib/cookies';
+import getCspPolicy from 'lib/csp/getCspPolicy';
+import { link } from 'lib/link/link';
+import findNetwork from 'lib/networks/findNetwork';
+
+const cspPolicy = getCspPolicy();
+
+export function middleware(req: NextRequest) {
+  const isPageRequest = req.headers.get('accept')?.includes('text/html');
+
+  if (!isPageRequest) {
+    return;
+  }
+
+  const [ , networkType, networkSubtype ] = req.nextUrl.pathname.split('/');
+  const networkParams = {
+    network_type: networkType,
+    network_sub_type: networkSubtype,
+  };
+  const selectedNetwork = findNetwork(networkParams);
+
+  if (!selectedNetwork) {
+    return;
+  }
+
+  // we don't have any info from router here, so just do straight forward sub-string search (sorry)
+  const isAccountRoute = req.nextUrl.pathname.includes('/account/');
+  const apiToken = req.cookies.get(NAMES.API_TOKEN);
+
+  if (isAccountRoute && !apiToken) {
+    const authUrl = link('auth', networkParams);
+    return NextResponse.redirect(authUrl);
+  }
+
+  const res = NextResponse.next();
+  res.headers.append('Content-Security-Policy-Report-Only', cspPolicy);
+  return res;
+}
+
+/**
+ * Configure which routes should pass through the Middleware.
+ * Exclude all `_next` urls.
+ */
+export const config = {
+  matcher: [ '/', '/:notunderscore((?!_next).+)' ],
+};

next.config.js

@@ -3,6 +3,7 @@ const withReactSvg = require('next-react-svg');
 const path = require('path');
 
 const headers = require('./configs/nextjs/headers');
+const redirects = require('./configs/nextjs/redirects');
 const rewrites = require('./configs/nextjs/rewrites');
 
 const moduleExports = {
@@ -18,24 +19,17 @@ const moduleExports = {
 
     return config;
   },
-  async redirects() {
-    return [
-      {
-        source: '/',
-        destination: '/poa/core',
-        permanent: false,
-      },
-    ];
-  },
-  headers,
+  // NOTE: all config functions should be static and not depend on any environment variables
+  // since all variables will be passed to the app only at runtime and there is now way to change Next.js config at this time
+  // if you are stuck and strongly believe what you need some sort of flexibility here please fill free to join the discussion
+  // https://github.com/blockscout/frontend/discussions/167
   rewrites,
+  redirects,
+  headers,
   output: 'standalone',
   sentry: {
     hideSourceMaps: true,
   },
-  publicRuntimeConfig: {
-    NEXT_PUBLIC_SUPPORTED_NETWORKS: process.env.NEXT_PUBLIC_SUPPORTED_NETWORKS,
-  },
 };
 
 const sentryWebpackPluginOptions = {