1、环境准备
1、安装Node
访问Node官网下载对应Node版本：Node官网，安装成功后通过命令查看当前node版本
node -v
2、安装Node版本管理工具nvm
如果nvm install 安装node失败，一般是网络问题，可以用手机热点或者翻墙
# 安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
#查看远程版本
nvm ls-remote
#查看本地版本
nvm ls
# 安装node
nvm install 18.20.4
# 切换版本
nvm use 18.20.4
# 查看当前的node版本
node -v
3、安装VSCode
去官网下载并安装VSCode， VSCode
4、设置node默认版本
# 设置nvm默认版本
nvm alias default 18.20.4
# 使用默认版本
nvm use 18.20.4
# 编辑bash_profile
vi ~/.bash_profile
# 设置环境变量
export NVM_DIR="$HOME/.nvm"
# 刷新生效
source ~/.bash_profile
2、创建next js工程
1、next js官网，next js官网
通过如下命令创建工程
npx create-next-app@latest my-first-next-app
创建完成如下
2、通过npm run dev即可编译部署，然后通过http://localhost:3000/即可访问，这里自动打包编译 (使用 webpack 和 babel)
#编译部署
npm run dev
#浏览器访问
http://localhost:3000/
3、热重载+路由+静态资源
1、热重载
修改 app/page.tsx 文件中的内容，然后保存，浏览器中的内容自动更新了，这就是 Next.js 的热重载特性，它能大大提高开发效率，添加新的页面也能热重载。
2、路由使用方法
App目录每个文件夹代表一个路由，这里在test目录增加了1个页面，文件名必须是page.tsx，访问路径为http://localhost:3000/test
3、静态资源引用
在根目录下新建static文件夹，代码可以通过/static/来引入相关的静态资源。
4、客户端渲染和服务端渲染
默认是服务端渲染，服务端渲染不能使用React组件，React组件需要声明为客户端渲染。
'use client';
import React, {Component} from "react";
export default class extends Component<any, any> {
static async getInitialProps({ req }) {
const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
return { userAgent }
}
render() {
return (
<div>
Hello World {this.props.userAgent}
</div>
)
}
}
5、路由跳转及数据获取，函数组件使用
1、通过Link跳转，需要直接点击一个文字
import Link from 'next/link'
export default function Home() {
return (
<div>
<Link href={{ pathname: '/test/test2', query: { name: 'tangfuling' }}}>点我跳转</Link>
</div>
);
}
2、通过Navigation跳转，可以通过OnClick代码调用，Router.push会留下新的历史记录，Router.reaplace不会留下新的历史记录
'use client';
import Link from 'next/link'
import { useRouter } from 'next/navigation'
export default function Home() {
const Router = useRouter();
function handleClick() {
Router.push('/test/test2?name=tangfuling')
}
return (
<div>
<Link href={{pathname: '/test/test2', query: {name: 'tangfuling'}}}>点我跳转</Link>
<br/>
<button onClick={handleClick}>Go to Another Page</button>
</div>
);
}
3、通过useSearchParams获取参数，只能在函数组件中使用，而不能在类组件中使用。
'use client';
import React from "react";
import { useSearchParams } from 'next/navigation';
export default function Test3() {
const searchParams = useSearchParams();
const name = searchParams.get('name');
return (
<div>
test3 {searchParams.get('name')}
<br/>
</div>
);
}
6、路由跳转及数据获取，React类组件使用
类组件不能通过useSearchParams接数据，需要通过window.location.search接数据
1、通过window.location.href跳转
'use client';
import Link from 'next/link'
import { useRouter } from 'next/navigation'
export default function Home() {
const Router = useRouter();
function handleClick1() {
Router.push('/test/test2?name=tangfuling')
}
function handleClick2() {
window.location.href = '/test/test3?name=tangfuling';
}
return (
<div>
<Link href={'/test/test2?name=tangfuling'}>Link跳转函数组件test2</Link>
<br/>
<button onClick={handleClick1}>点击跳转函数组件test2</button>
<br/>
<button onClick={handleClick2}>点击跳转类组件test3</button>
</div>
);
}
2、通过Navigation跳转
'use client';
import Link from 'next/link'
import { useRouter } from 'next/navigation'
export default function Home() {
const Router = useRouter();
function handleClick1() {
Router.push('/test/test2?name=tangfuling')
}
function handleClick2() {
window.location.href = '/test/test3?name=tangfuling';
}
function handleClick3() {
Router.push('/test/test3?name=tangfuling')
}
return (
<div>
<Link href={'/test/test2?name=tangfuling'}>Link跳转函数组件test2</Link>
<br/>
<button onClick={handleClick1}>点击跳转函数组件test2</button>
<br/>
<button onClick={handleClick2}>点击跳转类组件test3，window方式</button>
<br/>
<button onClick={handleClick3}>点击跳转类组件test3，push方式</button>
</div>
);
}
3、通过window.location.search接数据，类组件不能通过useSearchParams接数据
'use client';
import React, { Component } from 'react';
export default class Test3 extends Component<any, any> {
constructor(props) {
super(props);
this.state = {
name: '',
};
}
componentDidMount() {
const urlParams = new URLSearchParams(window.location.search);
const name = urlParams.get('name');
this.setState({ name });
}
static async getInitialProps({ query }) {
const { name } = query;
return { name };
}
render() {
return (
<div>
test3 {this.state.name}
<br/>
</div>
);
}
}
4、通过window.open完全打开一个新的Tab
'use client';
import Link from 'next/link'
import { useRouter } from 'next/navigation'
export default function Home() {
const Router = useRouter();
function handleClick1() {
Router.push('/test/test2?name=tangfuling')
}
function handleClick2() {
window.location.href = '/test/test3?name=tangfuling';
}
function handleClick3() {
Router.push('/test/test3?name=tangfuling')
}
function handleClick4() {
window.open('/test/test3?name=tangfuling')
}
return (
<div>
<Link href={'/test/test2?name=tangfuling'}>Link跳转函数组件test2</Link>
<br/>
<button onClick={handleClick1}>点击跳转函数组件test2</button>
<br/>
<button onClick={handleClick2}>点击跳转类组件test3，window方式</button>
<br/>
<button onClick={handleClick3}>点击跳转类组件test3，push方式</button>
<br/>
<button onClick={handleClick4}>点击跳转类组件test3，新页面</button>
</div>
);
}
7、几种跳转的区别
页面跳转：
router跳转：当前页面局部刷新
window.location跳转：当前页面全部刷新
window.open跳转：打开新页面
接收参数：
useSearchParams接收参数：只能在函数组件使用，类组件不可以使用
window.location.search接收参数：函数组件和类组件都可以使用
8、通过pm2持久化部署nextjs
1、安装pm2
npm install -g pm2
2、编译项目
npm run build
3、部署运行，自定义名称可以任意命名，pm2管理中起到标识作用，实际运行的程序是当前目录下
pm2 start --name 自定义名称 npm -- start
4、pm2相关命令
# 查看任务
pm2 list
# 重启
pm2 restart app_name
# 停止
pm2 stop app_name|app_id
# 停止所有
pm2 stop all
# 删除
pm2 delete app_name|app_id
# 删除所有
pm2 delete all
9、部署到阿里云
1、修改nvm的镜像，打开~/.bash_profile
export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/
2、修改npm为cnpm
# 使用cnpm替代npm
npm install -g cnpm
# 在nextjs项目中执行npm install的时候用cnpm install替换
cnpm install
3、把阿里云当成本地电脑，把源码拷贝上去（不要上传node_modules，一定要通过npm install重新生成），通过上面的步骤进行部署
4、参考这篇文章配置nginx 阿里云配置nginx https访问转发react程序
10、基础知识
基础
HTML：https://wangdoc.com/html/
css：https://www.w3schools.com/css/default.asp
ES6：https://es6.ruanyifeng.com/
TS：https://wangdoc.com/typescript/
框架
Anti-design：https://ant-design.antgroup.com/components/button-cn
React：https://zh-hans.react.dev/
nextjs：https://nextjs.org/
