How can I upgrade NextJS v11 to v13?

I am attempting to upgrade my project dependencies for a NextJS project to address security vulnerabilities using npm v9.5.1.

Here is the justification for this ticket, as provided by npm audit on my project:

node-fetch  <2.6.7
Severity: high
node-fetch is vulnerable to Exposure of Sensitive Information to an Unauthorized Actor - https://github.com/advisories/GHSA-r683-j2x4-v87g
fix available via `npm audit fix --force`
Will install next@11.1.4, which is outside the stated dependency range
node_modules/node-fetch

Here is my current package.json file:

{
  ...,
  "dependencies": {
    "aws-sdk": "2.960.0",
    "clsx": "1.1.1",
    "lottie-react": "^2.4.0",
    "next": "11.1.0",
    "qrcode.react": "^3.1.0",
    "react": "17.0.2",
    "react-datepicker": "4.2.0",
    "react-dom": "17.0.2",
    "sass": "1.37.5"
  },
  "devDependencies": {
    "css-loader": "^6.7.3",
    "sass-loader": "^13.2.2",
    "style-loader": "^3.3.2"
  }
}

In updating dependencies, I figured it'd be a good time to update to the latest major versions of the frameworks I depend on. I'm attempting to run the following command (from the NextJS docs here):

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

But this yields the following error output:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: my-project@0.1.0
npm ERR! Found: next@11.1.0
npm ERR! node_modules/next
npm ERR!   next@"13.4.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! next@"13.4.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@"^18.2.0" from next@13.4.1
npm ERR!   node_modules/next
npm ERR!     next@"13.4.1" from the root project

The way I'm reading this, I need to update React ... but isn't that captured in the command listed above from the NextJS docs?

In any case, I also tried manually updating React first:

npm i react@latest

This generated pages of warnings, and more vulnerability issues than I had to begin with, so it seemed like a poor idea to me. Further, after upgrading React to 18.2.0, when I tried to install NextJS with npm i next@latest I got errors about peer dependencies with React's peer dependencies, which I was blocked on upgrading because of their own dependency chain resolution errors.

For what it's worth, I also tried the NextJS docs' upgrade instructions from 11 to 12, then 12 to 13, but ran into the same sorts of issues.

I have also found answers suggesting to use the --legacy-peer-deps flag, but I'm hesitant to use this method since npm itself refers to the results as accepting "an incorrect (and potentially broken) dependency resolution" which I obviously don't want.

So tl;dr: how do I cleanly update my existing production application from my current, to the latest, versions of these major platforms (Next, React)?

There may be a better way to address this problem for larger projects, but for my small-medium size project, the following worked:

1. Create an entirely new project in a new directory using npm create-next-app@latest.
2. Manually add all dependencies and devDependencies from my original project's package.json into this new project's package.json file.
3. Run npm i in the new project to ensure all dependencies are met and do not collide (for me, this resulted in elimination of the security vulnerabilities I had in the original project).
4. Back in the original project, delete the entire node_modules folder.
5. Copy the new package.json from the new project into the original/working project and run npm i.

In my case, the major version upgrades captured in this process had breaking changes, so I (obviously) had to test and do some cleanup in my project, but it was worth it to remove all security vulnerabilities.