Mapped Object App Router Hack

[buchananwill]

There are many things I really like about the Next.JS framework in terms of DX. However, I've recently started to find the file system-based App router extremely limiting for DRY and refactoring. The main issues I have are:

1. It is hard to dynamically generate and adjust the site structure as an API or domain model evolves, because having to migrate files is more difficult for an IDE to track changes than altering the contents of those files.
2. Re-linking moved content is therefore also harder.
3. This may be IDE or OS specific, but Webstorm on Windows 10 regularly refuses to rename routing directories, I presume due to access violations from the Next.JS server needing to track what they're called.
4. The conflating of project structure and site structure ends up causes a significant amount of cognitive load, in addition to all the above issues.
5. If I want several pages to have the same or similar routing variables, it is difficult to create branching structures where these variables are shared, without ending up with some degree of undesirable repetition.

It could be that I've been approaching routing wrongly, and if it sounds like I'm making any noob errors then feel free to suggest solutions. However, my current escape hatch is to entirely abandon the vast majority of my directory structure and page.tsx files, in favour of a single [[...pathVariables]] slug, that captures all pages. I then use these types, and a recursive pattern matching function to resolve the given url into the Component value of a navTreeData object.

This kind of feels against the grain of the App Router documentation, but it's massively simplified the process of adding site routes or refactoring existing ones. Has anyone else done anything like this? Am I reinventing a wheel here?

Types

export interface LeafComponentProps {
  pathVariables: string[];
  depth: number;
}

export type LeafComponent = (props: LeafComponentProps) => ReactNode;

export interface NavTree {
  [key: string]: NavTreeBranch | NavTreeLeaf;
}

export type NavTreeBranch = {
  type: 'branch';
  children: NavTree;
  component?: LeafComponent;
};

export type NavTreeLeaf = {
  type: 'leaf';
  component: LeafComponent;
};

export type NavTreeNode = NavTreeBranch | NavTreeLeaf | NavTree;

Pattern Matcher

export function ResolveNavTree({
  navTree,
  depth,
  pathVariables
}: {
  navTree: NavTreeNode;
  pathVariables: string[];
  depth: number;
}) {
  if (navTree.type === 'leaf') {
    const LeafNode = navTree.component;
    return <LeafNode pathVariables={pathVariables} depth={depth} />;
  } else if (navTree.type === 'branch') {
    if (pathVariables.length > depth) {
      const rootKey = getMatchString(pathVariables, depth);
      const nextTree = navTree.children;
      const nextMatch =
        nextTree[rootKey as keyof Omit<typeof nextTree, 'component' | 'type'>];
      if (nextMatch) {
        return (
          <ResolveNavTree
            navTree={nextMatch}
            pathVariables={pathVariables}
            depth={depth + 1}
          />
        );
      }
    }
    const Component = navTree.component;
    if (!Component) notFound();
    return <Component pathVariables={pathVariables} depth={depth} />;
  } else {
    if (pathVariables.length <= depth) {
      console.error('No path variable for this depth');
      notFound();
    }
    const rootKey = getMatchString(pathVariables, depth);
    const nextTreeNode = navTree[rootKey];
    if (!nextTreeNode) notFound();
    return (
      <ResolveNavTree
        navTree={nextTreeNode}
        pathVariables={pathVariables}
        depth={depth + 1}
      />
    );
  }
}

export function getMatchString(pathVariables: string[], depth: number) {
  return camelCase(pathVariables[depth]);
}

Example Object

export const navTreeData: NavTree = {
  navigation: { type: 'leaf', component: NavigationHome },
  cycles: { type: 'branch', children: cyclesNavTree, component: CyclesHome },
  serviceCategories: {
    type: 'branch',
    children: {
      create: { type: 'leaf', component: CreateServiceCategoryPage }
    },
    component: ServiceCategoriesHome
  },
  knowledgeDomains: {
    type: 'branch',
    children: {},
    component: KnowledgeDomains
  },
  knowledgeLevels: {
    type: 'branch',
    children: {},
    component: KnowledgeLevelsHome
  },
  workTaskType: { type: 'branch', children: {}, component: WorkTaskTypeHome },
  workProjectSeriesSchema: {
    type: 'branch',
    children: {},
    component: WorkProjectSeriesSchemaHome
  },
  users: rolePageTree,
  providers: rolePageTree,
  assets: rolePageTree,
  carouselGroups: {
    type: 'branch',
    children: { orders: { type: 'leaf', component: CarouselGroupOrdersHome } },
    component: CarouselGroupsAndOrders
  },
  workSchemaNodes: WorkSchemaNodeNavTree,
  workSchemaNodeAssignments: {
    type: 'leaf',
    component: WorkSchemaNodeAssignmentsHome
  },
  feasibility: feasibilityBranch,
  autoSchedule: { type: 'leaf', component: BuildSchedulePage },
  scheduling: schedulingNavTree
} as const;