当前位置：首页 > news >正文

用 nextjs 创建 Node+React Demo

news 来源：原创 2024/9/20 8:57:37

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

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.userAgentreturn { 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>);
}