Skip to content

refactor: migrate to NextJS

Allard Oelen requested to merge nextjs-migration into master

This MR is mainly to keep track of the branch for testing NextJS. By checking out this code, it should be possible to run NextJS locally. Also the codemods are included here, just to keep track of them, they won't be merged to master.

Notes

  • Removed cross-fetch as NextJS already includes a polyfill for the fetch API.

Todo

  • Reset redux states on page changes because redux-first-history is removed (it is incompatible with Next router)
  • Ensure the env file is working with live variable updates
  • Fix disabled value plugins (fixed in NextJS 14)
  • Ensure env switching is working. _This doesn't seem to work with NextJS, as only specific env files can be used. This is not such an important feature, so for now it is fine to remove and deprecate the linked documentation page. _
  • Try to improve loading speeds in dev mode. Some pages take several seconds to render, I hope something can be done here. Partially fixed by some NextJS updates. Turbopack might further update it, but currently causes some errors, so it cannot be used.
  • Fix lint rules and husky
  • There are some issues with importing paths that are absolute (e.g. import network from 'network'). This happens in Turbopack and with Jest. Although it is possible to assign an alias for the broken imports, it might make more sense to update all imports by adding an alias to it. E.g. import network from '@/network' (this isn't an issue for now, only when we upgrade to Turbopack, so we can postpone it)
  • Fix tests
  • Test new server setup
  • More testing and finding bugs

Todo after release

  • Fully replace react-cookie with next-client-cookies
  • Use the Metadata object for setting the page titles and descriptions (instead of using document.title = ... ). For this, pages need to be server components, so a major refactoring is needed.
  • Check if image loading can be optimized
  • Check out more settings of NextJS
  • Update lint rules by extending from the next lint rules

Run npm install --force and then npm run dev for starting the test server.

Edited by Allard Oelen

Merge request reports