用 nextjs 创建 Node+React Demo

tangfuling19912024-09-17 18:05

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.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 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
qq_3643717216 小时前
VueRouter 导航故障问题
javascript·vue.js·前端框架·vue-router
何老生20 小时前
spring-boot（thymeleaf前端框架，简单了解）、（ 跨域请求）
spring boot·前端框架
会发光的猪。1 天前
前端vue3若依框架pnpm run dev启动报错
前端·javascript·vue.js·前端框架·bug
羊小猪~~1 天前
前端入门一之HTML知识讲解
前端·javascript·css·前端框架·html·html5
王解1 天前
Jest进阶知识：深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
我命由我123452 天前
CesiumJS 案例 P20：监听鼠标滚轮、监听鼠标左键按下与松开、监听鼠标右键按下与松开、监听鼠标左击落点
开发语言·前端·javascript·前端框架·html·css3·html5
~甲壳虫2 天前
react中得类组件和函数组件有啥区别，怎么理解这两个函数
前端·react.js·前端框架
羊小猪~~2 天前
前端入门一之CSS知识详解
前端·javascript·css·vscode·前端框架·html·javas
new Vue()2 天前
Vue vs React：两大前端框架的区别解析
vue.js·react.js·前端框架
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play