fix nextjs routes after migrating to turbopack

Dockerfile

@@ -49,6 +49,7 @@ RUN set -a && \
 
 # Build app for production
 ENV NODE_OPTIONS="--max-old-space-size=8192"
+RUN pnpm routes:generate
 RUN pnpm run build
 
 

eslint.config.mjs

@@ -409,6 +409,9 @@ export default tseslint.config(
       '@stylistic/template-curly-spacing': [ 'error', 'always' ],
       '@stylistic/wrap-iife': [ 'error', 'inside' ],
     },
+    ignores: [
+      'next-env.d.ts',
+    ],
   },
 
   {

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import './.next/dev/types/routes.d.ts';
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

next.config.js

@@ -74,6 +74,9 @@ const moduleExports = {
       'static': 180,
     },
   },
+
+  // workaround for passing outDir to nextjs-routes CLI
+  outDir: 'nextjs',
 };
 
 module.exports = withBundleAnalyzer(withRoutes(moduleExports));

nextjs/nextjs-routes.d.ts

@@ -1,11 +1,17 @@
 // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 // This file will be automatically regenerated when your Next.js server is running.
-// nextjs-routes version: 1.0.8
+// nextjs-routes version: 2.2.5
 /* eslint-disable */
 
 // prettier-ignore
 declare module "nextjs-routes" {
+  import type {
+    GetServerSidePropsContext as NextGetServerSidePropsContext,
+    GetServerSidePropsResult as NextGetServerSidePropsResult
+  } from "next";
+
   export type Route =
+    | StaticRoute<"/">
     | StaticRoute<"/404">
     | StaticRoute<"/account/api-key">
     | StaticRoute<"/account/custom-abi">
@@ -15,9 +21,10 @@ declare module "nextjs-routes" {
     | StaticRoute<"/account/watchlist">
     | StaticRoute<"/accounts">
     | DynamicRoute<"/accounts/label/[slug]", { "slug": string }>
-    | DynamicRoute<"/address/[hash]/contract-verification", { "hash": string }>
     | DynamicRoute<"/address/[hash]", { "hash": string }>
+    | DynamicRoute<"/address/[hash]/contract-verification", { "hash": string }>
     | StaticRoute<"/advanced-filter">
+    | StaticRoute<"/api-docs">
     | StaticRoute<"/api/config">
     | StaticRoute<"/api/csrf">
     | StaticRoute<"/api/healthz">
@@ -26,24 +33,23 @@ declare module "nextjs-routes" {
     | StaticRoute<"/api/monitoring/invalid-api-schema">
     | StaticRoute<"/api/proxy">
     | DynamicRoute<"/api/tokens/[hash]/instances/[id]/media-type", { "hash": string; "id": string }>
-    | StaticRoute<"/api-docs">
-    | DynamicRoute<"/apps/[id]", { "id": string }>
     | StaticRoute<"/apps">
+    | DynamicRoute<"/apps/[id]", { "id": string }>
     | StaticRoute<"/auth/profile">
+    | StaticRoute<"/batches">
     | DynamicRoute<"/batches/[number]", { "number": string }>
     | DynamicRoute<"/batches/celestia/[height]/[commitment]", { "height": string; "commitment": string }>
-    | StaticRoute<"/batches">
     | DynamicRoute<"/blobs/[hash]", { "hash": string }>
     | DynamicRoute<"/block/[height_or_hash]", { "height_or_hash": string }>
-    | DynamicRoute<"/block/countdown/[height]", { "height": string }>
     | StaticRoute<"/block/countdown">
+    | DynamicRoute<"/block/countdown/[height]", { "height": string }>
     | StaticRoute<"/blocks">
     | DynamicRoute<"/cc/tx/[hash]", { "hash": string }>
     | DynamicRoute<"/chain/[chain_slug]/accounts/label/[slug]", { "chain_slug": string; "slug": string }>
     | DynamicRoute<"/chain/[chain_slug]/advanced-filter", { "chain_slug": string }>
     | DynamicRoute<"/chain/[chain_slug]/block/[height_or_hash]", { "chain_slug": string; "height_or_hash": string }>
-    | DynamicRoute<"/chain/[chain_slug]/block/countdown/[height]", { "chain_slug": string; "height": string }>
     | DynamicRoute<"/chain/[chain_slug]/block/countdown", { "chain_slug": string }>
+    | DynamicRoute<"/chain/[chain_slug]/block/countdown/[height]", { "chain_slug": string; "height": string }>
     | DynamicRoute<"/chain/[chain_slug]/csv-export", { "chain_slug": string }>
     | DynamicRoute<"/chain/[chain_slug]/op/[hash]", { "chain_slug": string; "hash": string }>
     | DynamicRoute<"/chain/[chain_slug]/token/[hash]", { "chain_slug": string; "hash": string }>
@@ -57,42 +63,41 @@ declare module "nextjs-routes" {
     | StaticRoute<"/deposits">
     | StaticRoute<"/dispute-games">
     | StaticRoute<"/ecosystems">
-    | DynamicRoute<"/epochs/[number]", { "number": string }>
     | StaticRoute<"/epochs">
+    | DynamicRoute<"/epochs/[number]", { "number": string }>
     | DynamicRoute<"/essential-dapps/[id]", { "id": string }>
     | StaticRoute<"/gas-tracker">
     | StaticRoute<"/hot-contracts">
-    | StaticRoute<"/">
     | StaticRoute<"/internal-txs">
     | StaticRoute<"/interop-messages">
     | StaticRoute<"/login">
     | StaticRoute<"/mud-worlds">
+    | StaticRoute<"/name-services">
     | DynamicRoute<"/name-services/clusters/[name]", { "name": string }>
     | DynamicRoute<"/name-services/domains/[name]", { "name": string }>
-    | StaticRoute<"/name-services">
     | DynamicRoute<"/op/[hash]", { "hash": string }>
     | DynamicRoute<"/operation/[id]", { "id": string }>
     | StaticRoute<"/operations">
     | StaticRoute<"/ops">
     | StaticRoute<"/output-roots">
-    | DynamicRoute<"/pools/[hash]", { "hash": string }>
     | StaticRoute<"/pools">
+    | DynamicRoute<"/pools/[hash]", { "hash": string }>
     | StaticRoute<"/public-tags/submit">
     | StaticRoute<"/search-results">
     | StaticRoute<"/sprite">
-    | DynamicRoute<"/stats/[id]", { "id": string }>
     | StaticRoute<"/stats">
+    | DynamicRoute<"/stats/[id]", { "id": string }>
+    | StaticRoute<"/token-transfers">
     | DynamicRoute<"/token/[hash]", { "hash": string }>
     | DynamicRoute<"/token/[hash]/instance/[id]", { "hash": string; "id": string }>
-    | StaticRoute<"/token-transfers">
     | StaticRoute<"/tokens">
     | DynamicRoute<"/tx/[hash]", { "hash": string }>
     | StaticRoute<"/txn-withdrawals">
     | StaticRoute<"/txs">
     | DynamicRoute<"/txs/kettle/[hash]", { "hash": string }>
     | StaticRoute<"/uptime">
-    | DynamicRoute<"/validators/[id]", { "id": string }>
     | StaticRoute<"/validators">
+    | DynamicRoute<"/validators/[id]", { "id": string }>
     | StaticRoute<"/verified-contracts">
     | StaticRoute<"/visualize/sol2uml">
     | StaticRoute<"/withdrawals">;
@@ -113,55 +118,79 @@ declare module "nextjs-routes" {
     [key: string]: string | string[] | undefined;
   };
 
-  export type RoutedQuery<P extends Route["pathname"]> = Extract<
+  export type RoutedQuery<P extends Route["pathname"] = Route["pathname"]> = Extract<
     Route,
     { pathname: P }
   >["query"];
 
   export type Locale = undefined;
 
+  type Brand<K, T> = K & { __brand: T };
+
+  /**
+   * A string that is a valid application route.
+   */
+  export type RouteLiteral = Brand<string, "RouteLiteral">
+
   /**
    * A typesafe utility function for generating paths in your application.
    *
    * route({ pathname: "/foos/[foo]", query: { foo: "bar" }}) will produce "/foos/bar".
    */
-  export declare function route(r: Route): string;
+  export declare function route(r: Route): RouteLiteral;
+
+  /**
+   * Nearly identical to GetServerSidePropsContext from next, but further narrows
+   * types based on nextjs-route's route data.
+   */
+  export type GetServerSidePropsContext<
+    Pathname extends Route["pathname"] = Route["pathname"],
+    Preview extends NextGetServerSidePropsContext["previewData"] = NextGetServerSidePropsContext["previewData"]
+  > = Omit<NextGetServerSidePropsContext, 'params' | 'query' | 'defaultLocale' | 'locale' | 'locales'> & {
+    params: Extract<Route, { pathname: Pathname }>["query"];
+    query: Query;
+    defaultLocale?: undefined;
+    locale?: Locale;
+    locales?: undefined;
+  };
+
+  /**
+   * Nearly identical to GetServerSideProps from next, but further narrows
+   * types based on nextjs-route's route data.
+   */
+  export type GetServerSideProps<
+    Props extends { [key: string]: any } = { [key: string]: any },
+    Pathname extends Route["pathname"] = Route["pathname"],
+    Preview extends NextGetServerSideProps["previewData"] = NextGetServerSideProps["previewData"]
+  > = (
+    context: GetServerSidePropsContext<Pathname, Preview>
+  ) => Promise<NextGetServerSidePropsResult<Props>>
 }
 
 // prettier-ignore
 declare module "next/link" {
-  import type { Route } from "nextjs-routes";
+  import type { Route } from "nextjs-routes";;
   import type { LinkProps as NextLinkProps } from "next/dist/client/link";
-  import type {
-    AnchorHTMLAttributes,
-    DetailedReactHTMLElement,
-    MouseEventHandler,
-    PropsWithChildren,
-  } from "react";
-  export * from "next/dist/client/link";
+  import type React from "react";
 
-  type Query = { query?: { [key: string]: string | string[] | undefined } };
   type StaticRoute = Exclude<Route, { query: any }>["pathname"];
 
-  export interface LinkProps
-    extends Omit<NextLinkProps, "href" | "locale">,
-      AnchorHTMLAttributes<HTMLAnchorElement> {
-    href: Route | StaticRoute | Query;
+  export type LinkProps = Omit<NextLinkProps, "href" | "locale"> & {
+    href: Route | StaticRoute | Omit<Route, "pathname">;
     locale?: false;
   }
 
-  type LinkReactElement = DetailedReactHTMLElement<
-    {
-      onMouseEnter?: MouseEventHandler<Element> | undefined;
-      onClick: MouseEventHandler;
-      href?: string | undefined;
-      ref?: any;
-    },
-    HTMLElement
-  >;
-
-  declare function Link(props: PropsWithChildren<LinkProps>): LinkReactElement;
-
+  /**
+   * A React component that extends the HTML `<a>` element to provide [prefetching](https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching)
+   * and client-side navigation between routes.
+   *
+   * It is the primary way to navigate between routes in Next.js.
+   *
+   * Read more: [Next.js docs: `<Link>`](https://nextjs.org/docs/app/api-reference/components/link)
+   */
+  declare const Link: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps> & LinkProps & {
+      children?: React.ReactNode;
+  } & React.RefAttributes<HTMLAnchorElement>>;
   export default Link;
 }
 
@@ -174,34 +203,49 @@ declare module "next/router" {
 
   type NextTransitionOptions = NonNullable<Parameters<Router["push"]>[2]>;
   type StaticRoute = Exclude<Route, { query: any }>["pathname"];
-  type Query = { query?: { [key: string]: string | string[] | undefined } };
 
   interface TransitionOptions extends Omit<NextTransitionOptions, "locale"> {
     locale?: false;
   }
 
+  type PathnameAndQuery<Pathname> = Required<
+    Pick<Extract<Route, { pathname: Pathname }>, "pathname" | "query">
+  >;
+
+  type AutomaticStaticOptimizedQuery<PaQ> = Omit<PaQ, "query"> & {
+    query: Partial<PaQ["query"]>;
+  };
+
+  type BaseRouter<PaQ> =
+    | ({ isReady: false } & AutomaticStaticOptimizedQuery<PaQ>)
+    | ({ isReady: true } & PaQ);
+
   export type NextRouter<P extends Route["pathname"] = Route["pathname"]> =
-    Extract<Route, { pathname: P }> &
+    BaseRouter<PathnameAndQuery<P>> &
       Omit<
         Router,
-        | "push"
-        | "replace"
-        | "locale"
-        | "locales"
         | "defaultLocale"
         | "domainLocales"
+        | "isReady"
+        | "locale"
+        | "locales"
+        | "pathname"
+        | "push"
+        | "query"
+        | "replace"
+        | "route"
       > & {
         defaultLocale?: undefined;
         domainLocales?: undefined;
         locale?: Locale;
         locales?: undefined;
         push(
-          url: Route | StaticRoute | Query,
+          url: Route | StaticRoute | Omit<Route, "pathname">,
           as?: string,
           options?: TransitionOptions
         ): Promise<boolean>;
         replace(
-          url: Route | StaticRoute | Query,
+          url: Route | StaticRoute | Omit<Route, "pathname">,
           as?: string,
           options?: TransitionOptions
         ): Promise<boolean>;

package.json

@@ -20,6 +20,7 @@
     "start:docker:preset": "./tools/scripts/docker.preset.sh",
     "chakra:snippets:add": "chakra snippet add --outdir ./toolkit/chakra",
     "chakra:typegen": "chakra typegen ./toolkit/theme/theme.ts",
+    "routes:generate": "nextjs-routes",
     "lint:eslint": "eslint .",
     "lint:eslint:fix": "eslint . --fix",
     "lint:tsc": "tsc -p ./tsconfig.json",
@@ -117,7 +118,7 @@
     "monaco-editor": "^0.34.1",
     "next": "16.1.7",
     "next-themes": "0.4.4",
-    "nextjs-routes": "^1.0.8",
+    "nextjs-routes": "2.2.5",
     "node-fetch": "^3.2.9",
     "papaparse": "^5.3.2",
     "path-to-regexp": "8.1.0",

tools/scripts/dev.preset.sh

@@ -40,6 +40,10 @@ dotenv \
 source ./deploy/scripts/build_sprite.sh
 echo ""
 
+# generate routes
+pnpm routes:generate
+echo ""
+
 # generate envs.js file and run the app
 dotenv \
   -v NEXT_PUBLIC_GIT_COMMIT_SHA=$(git rev-parse --short HEAD) \

tools/scripts/dev.sh

@@ -16,6 +16,10 @@ dotenv \
 source ./deploy/scripts/build_sprite.sh
 echo ""
 
+# generate routes
+pnpm routes:generate
+echo ""
+
 # generate envs.js file and run the app
 dotenv \
   -v NEXT_PUBLIC_GIT_COMMIT_SHA=$(git rev-parse --short HEAD) \