react服务端next.js的两种搭建方式

1. 方式一 npm init方式手动搭建（稍微麻烦，但学习建议使用） 首先在你的项目目录使用

mkdir reactnextdemo

然后

cd reactnextdemo 进入到reactnextdemo这个目录里面

npm init一路按enter

最后选择yes 然后安装所做的依赖包

yarn add react react-dom next

安装成功后如图所示

如果版本跟我不一致的可以按照下面的package.json的复制过去安装

{
  "name": "reactnextdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^13.0.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

然后创建pages文件夹

在pages目录下创建Index.js文件

function Index(){
    return (
        <div>
            hello !tss
        </div>
    )
}
export default Index

然后修改一下package.json文件

{
  "name": "reactnextdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev" : "next" ,
    "build" : " next build",
    "start" : "next start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^13.0.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

最后yarn dev或者npm run dev打开就可以看到

2. 方式二

使用create-next-app脚手架创建，在创建之前先安装这个脚手架

npm install -g create-next-app

然后使用命令 npx create-next-app next-react-cli 其中next-react-cli是项目名字可以随意换成自己的

其中某些低版本好像不支持npx语法的话，需要先安装一下

npm install -g npx

然后等待安装完成yarn dev打开项目