How to install next-js with react 17? - reactjs

Question

How I can install next.js with React 17? When I type:
npx create-next-app --ts, npx installed Next with React 18, but I can't use React 18, because Stripe not working at the moment with R18 (https://www.npmjs.com/package/stripe).

Answer 1

You'd need to use an older version of Next JS.
The latest one I can see with React 17 is 12.1.2, so you can start your project with the following:
npx create-next-app#12.1.2
You can check the release change logs for Next JS here:
https://github.com/vercel/next.js/releases

Answer 2

If you've already created the project:
remove new versions:
npm uninstall next react react-dom #types/react #types/react-dom
install old versions:
npm install next#12.1.2 react#17.0.2 react-dom#17.0.2
npm install -D #types/react#17.0.2 #types/react-dom#17.0.2

Answer 3

I found an alternative approach , first create a new nextjs typescript project using npx create-next-app#latest --ts
. And then copied the versions of all the dependencies and devDependencies to package.json . after replacing the version delete node_modules folder and package-lock.json file . after that run this command npm install .
Here is a sample package.json. I got this after create new nextjs project.
{
"name": "demo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.2.4",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"#types/node": "18.7.1",
"#types/react": "18.0.17",
"#types/react-dom": "18.0.6",
"eslint": "8.21.0",
"eslint-config-next": "12.2.4",
"typescript": "4.7.4"
}
}