Next.js app/page routing vs. react-router in Abyss Starter Kit

The Abyss Starter Kit will only support react-router for the following reasons:

• Integration with Abyss Web Components: Our Abyss UI components are intrinsically built around react-router. Leveraging it would ensure seamless compatibility and potentially smoother development process, leveraging the full potential of the UI components we have crafted.

• Flexibility and Customization: While next.js does offer a structured approach to routing, react-router stands out in terms of the flexibility it offers. react-router also includes compatibility with Abyss Parcels.

• Independence from Next.js: Although next.js is a vibrant and continually evolving framework, it often undergoes frequent updates, requiring developers to constantly adapt and update their codebase to stay aligned with the latest versions. By using react-router, you can maintain a stable codebase that isn’t affected by the frequent updates in next.js, hence saving time and resources in the long run.

• Focused Usage of Next.js: In our starter kit, we have employed next.js primarily as a build tool rather than a foundational framework for the entire application.

• Community Support and Resources: react-router has a vast community and a wealth of resources available. Its wide adoption in the industry means that you can find a robust ecosystem of tools, tutorials, and community expertise to leverage during your development process.

• Limited Support for next.js: It is important to note that we do not plan on extending support for next.js app or page routing in our future roadmap. Our developmental efforts and updates will be squarely focused on enhancing the capabilities and functionalities woven around react-router. Hence, to ensure that you have the best support and resources available for your project in the long term, we recommend aligning with our core focus on react-router.

Check out our Abyss Routing documentation for more details.

Version Conflict: react-router

Sometimes you're application will have various versions of react-router. If the version you are using elsewhere is higher than the version of Abyss you must override the version in Abyss via the root package.json. Add the following:

{
  ...,
  "overrides": {
    "@uhg-abyss/web": {
      "react-router": "7.9.5" // Match the version used in your application
    }
  }
}

Once you've added the override you will need to delete every node_module folder as well as the package-lock.json and run npm install.

Note: This will only work with version 6 of react-router and it's minor versions

TypeError: Cannot read properties of undefined (reading 'default') at Object.interopDefault

To address the changes made in the next.js framework you must update the files in the pages directory inside your application. See below:

└── products
    └── web
        ├── .abyss
        ├── pages
        |   ├── _app.js
        |   ├── _document.js
        |   └── index.js
        ├── src
        └── package.json

Update the following files with the updated exports:

_app.js

export { default } from '@uhg-abyss/core/next-app';

_document.js

export { document as default } from '../src/document';

index.js

export { browser as default } from '../src/browser';