An existing code base, even one as recent as 4 years old, gives you something to test against. You haven't specified why you have to abandon it, especially as it's practically brand new.
If you have to migrate to a new platform, try to get buy in from everyone that you're going to only match feature for feature, until the old one is turned off for the last time.
You can make decisions with upgrades in mind, but just push to get it moved completely first. You don't want to end up paying technical debt in 2 places forever.
Generally, the older it is, the harder it is to redo. There's a lot of undocumented bug fixes that accumulate as a project gets older. Some things are so bad that you just can't do anything with it and it's easier rebuilt than done.
Often it's best to have high test coverage when migrating. You can push this to be part of the current project if it's not there and it's some productivity anyway. I usually skip things that test/mock the code and just do things like UI or API tests.
Migrations may take much, much, much, much longer than anticipated. If you have a gantt chart of some kind, make sure it's not reliant on the migration.
What is it for? Why do you want to upgrade? What are the constraints? Do you need to maintain 100% feafure parity?
10 to modern Next is a pretty big leap, especially if you're also going to move to the app router. The code mods might help a bit but not completely. Do you have older React code (class components etc.) or libs (old redux) and huge state trees?
If so it might be easier to rewrite the whole thing.
I've had to do a few rewrites like that and would typically do an exploratory investigation of each approach for a day or two, trying to better estimate the difficulty of each by partially starting a migration and partially starting a rewrite. Along the way I'd come up with a list of must haves vs nice to haves vs nice to get rid of, and use that to make a final decision.
But realistically, IMO a rewrite is inevitably cleaner (maybe with some functions manually ported over) and more maintainable over the long term.
Partial migrations for something like this means a lot of technical debt in the future. Next and React move too fast to keep up with piecemeal migrations like this cleanly. It's a very unstable ecosystem.
I'd probably end up extracting out the parts into modular components wherever possible, separating the business logic from the Next stuff (routing and caching and building) and the state stuff (meaning keeping components as pure as possible so state can be easily provided via whatever framework is popular that year)
An existing code base, even one as recent as 4 years old, gives you something to test against. You haven't specified why you have to abandon it, especially as it's practically brand new.
If you have to migrate to a new platform, try to get buy in from everyone that you're going to only match feature for feature, until the old one is turned off for the last time.
You can make decisions with upgrades in mind, but just push to get it moved completely first. You don't want to end up paying technical debt in 2 places forever.
Generally, the older it is, the harder it is to redo. There's a lot of undocumented bug fixes that accumulate as a project gets older. Some things are so bad that you just can't do anything with it and it's easier rebuilt than done.
Often it's best to have high test coverage when migrating. You can push this to be part of the current project if it's not there and it's some productivity anyway. I usually skip things that test/mock the code and just do things like UI or API tests.
Migrations may take much, much, much, much longer than anticipated. If you have a gantt chart of some kind, make sure it's not reliant on the migration.
More details?
This can be so different between some small company's website vs an enterprise SASS, for example.
What is your project? Who are the stakeholders? Who are the users? What are your resources and budget? What are your goals and constraints?
Let's say a medium Nextjs v10 side project. The goal is to update it as quickly as possible. It's just me.
What is it for? Why do you want to upgrade? What are the constraints? Do you need to maintain 100% feafure parity?
10 to modern Next is a pretty big leap, especially if you're also going to move to the app router. The code mods might help a bit but not completely. Do you have older React code (class components etc.) or libs (old redux) and huge state trees?
If so it might be easier to rewrite the whole thing.
I've had to do a few rewrites like that and would typically do an exploratory investigation of each approach for a day or two, trying to better estimate the difficulty of each by partially starting a migration and partially starting a rewrite. Along the way I'd come up with a list of must haves vs nice to haves vs nice to get rid of, and use that to make a final decision.
But realistically, IMO a rewrite is inevitably cleaner (maybe with some functions manually ported over) and more maintainable over the long term.
Partial migrations for something like this means a lot of technical debt in the future. Next and React move too fast to keep up with piecemeal migrations like this cleanly. It's a very unstable ecosystem.
I'd probably end up extracting out the parts into modular components wherever possible, separating the business logic from the Next stuff (routing and caching and building) and the state stuff (meaning keeping components as pure as possible so state can be easily provided via whatever framework is popular that year)
Most of the time, old projects just work.
I would migrante it