CODEWITHSUNDEEP
reactjsnext.jsstripe-payments
mxcdh
mxcdh

Reputation: 1133

How to install next-js with react 17?

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).

Upvotes: 11

Views: 17794

Answers (3)

GorvGoyl
GorvGoyl

Reputation: 49280

If you've already created the project:

NPM

remove new versions:

npm uninstall next react react-dom @types/react @types/react-dom

install old versions:

npm install [email protected] [email protected] [email protected]
npm install -D @types/[email protected] @types/[email protected]

Yarn

yarn remove next react react-dom @types/react @types/react-dom 
yarn add [email protected] [email protected] [email protected]
yarn add -D @types/[email protected] @types/[email protected]

Upvotes: 16

Anirban Baisya
Anirban Baisya

Reputation: 121

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"
  }
}

Upvotes: 0

JBS
JBS

Reputation: 686

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 [email protected]

You can check the release change logs for Next JS here: https://github.com/vercel/next.js/releases

Upvotes: 8

Related Questions