用 nextjs 创建 Node+React Demo

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/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/881098.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python语言基础教程(上)4.0

✨博客主页&#xff1a; https://blog.csdn.net/m0_63815035?typeblog &#x1f497;《博客内容》&#xff1a;.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 &#x1f4e2;博客专栏&#xff1a; https://blog.csdn.net/m0_63815035/cat…

【LeetCode每日一题】——401.二进制手表

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 回溯 二【题目难度】 简单 三【题目编号】 401.二进制手表 四【题目描述】 二进制手表顶部…

4.提升客户服务体验:ChatGPT在客服中的应用(4/10)

本文大纲旨在指导撰写一篇全面探讨ChatGPT如何通过优化客户服务流程、提供实际应用案例和用户反馈&#xff0c;以提升客户服务体验的深入博客文章。 引言 在当今竞争激烈的商业环境中&#xff0c;客户服务已成为企业成功的关键因素。优质的客户服务不仅能够增强客户满意度和忠…

Docker 进入容器并运行命令的方法

目录 理解 Docker 容器的基本概念 使用 docker exec 进入运行中的容器 基本用法 常用选项解析 选项详解 实际案例演示 1. 进入容器的交互式 Shell 2. 在容器中运行单个命令 3. 以指定用户运行命令 4. 设置环境变量并运行命令 5. 指定工作目录 使用 docker attach 附…

数据结构-线性表顺序单项链表双向链表循环链表

1数据结构概述 数据结构是计算机组织、存储数据的方式。是思想层面的东西&#xff0c;和具体的计算机编程语言没有关系。可以用任何计算机编程语言去实现这些思想。 1.1 数据逻辑结构 反映数据逻辑之间的逻辑关系&#xff0c;这些逻辑关系和他们咱在计算机中的存储位置无关。…

原生+jquery写自动消失的提示框

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>自动消失消息提示</title> <style>/…

使用scp命令从本地往服务器传输文件失败

解决办法&#xff1a; 找到这个文件&#xff0c;打开&#xff0c;将里面的服务器ip对应的一行数据删掉即可。

6.C_数据结构_查询_哈希表

概述 哈希表的查询是通过计算的方式获取数据的地址&#xff0c;而不是依次比较。在哈希表中&#xff0c;有一个键值key&#xff0c;通过一些函数转换为哈希表的索引值。 其中&#xff1a;这个函数被称为哈希函数、散列函数、杂凑函数&#xff0c;记为&#xff1a;H(key) 哈希…

Java知识点小结3:内存回收

文章目录 对象引用强引用软引用&#xff08;SoftReference&#xff09;弱引用&#xff08;WeakReference&#xff09;考一考 虚引用&#xff08;PhantomReference&#xff09;总结 垃圾回收新生代老年代永生代 内存管理小技巧尽量使用直接量使用StringBuilder和StringBuffer进行…

7--SpringBoot-后端开发、原理详解(面试高频提问点)

目录 SpringBoot原理 起步依赖 自动配置 配置优先级 Bean设置 获取Bean 第三方Bean SpringBoot原理 内容偏向于底层的原理分析 基于Spring框架进行项目的开发有两个不足的地方&#xff1a; 在pom.xml中依赖配置比较繁琐&#xff0c;在项目开发时&#xff0c;需要自己去找…

最新编程语言排行榜:Python创新高!

2024年编程语言排行榜又迎来了令人惊喜的变化&#xff01;Python&#xff0c;这门因简单易学而受到广大程序员青睐的语言&#xff0c;再次突破历史记录&#xff0c;稳居排行榜前列。无论是数据分析、机器学习&#xff0c;还是Web开发&#xff0c;Python都展现出了强大的生命力和…

828华为云征文 | 使用Flexus云服务器X实例部署GLPI资产管理系统

828华为云征文 | 使用Flexus云服务器X实例部署GLPI资产管理系统 1. 部署环境说明2. 部署基础环境2.1. 操作系统基本配置2.2. 部署Nginx2.3. 部署MySQL2.4. 部署PHP 3. 部署GLPI资产管理系统 1. 部署环境说明 本次环境选择使用华为云Flexus云服务器X实例&#xff0c;因为其具有高…

无人机之AI跟踪篇

无人机的AI识别技术依托于计算机视觉和深度学习技术&#xff0c;实现了对目标的快速精准识别&#xff0c;在多个领域展现出了巨大的应用潜力和价值。以下是对无人机AI识别技术的详细解析&#xff1a; 一、无人机AI识别算法的基础原理 无人机AI识别算法主要基于先进的计算机视觉…

【刷题日记】15. 三数之和

15. 三数之和 两数之和可以用巧思也可以用map 三数之和会更加复杂一点&#xff0c;且这道题还需要考虑避免重复答案&#xff01; 思路&#xff1a; 特判&#xff1a;检如果nums 为 null 或长度小于 3直接返回空数组。排序&#xff1a;使用 sort对数组进行升序排序。就变成了…

JS实现树形结构数据中特定节点及其子节点显示属性设置的技巧(可用于树形节点过滤筛选)

大家好&#xff0c;今天我要分享的是如何在树形结构的数据中&#xff0c;根据特定条件设置节点及其所有子节点的显示属性。在实际项目中&#xff0c;这种需求非常常见&#xff0c;特别是在需要动态展示和隐藏节点的情况下。下面我将通过一个具体的示例来讲解实现过程。 需求分析…

Web开发:ABP框架3——入门级别的接口增删改查实现原理

一、上节回顾 运用了ABP框架&#xff0c;使用了EFcore进行增删改查 二、程序的入口 代码解说&#xff1a; public class Program // 定义程序主类 {public async static Task<int> Main(string[] args) // 主方法&#xff0c;返回状态码{// 配置Serilog日志Log.Logger…

【QT】定时器使用

文章目录 关于 Qt 定时器使用的注意细节总结实例-检查工具使用周期时间是否合理UI设计头文件 remind.h源文件 remind.cpp实现效果 关于 Qt 定时器使用的注意细节总结 一、创建与初始化 使用 QTimer 类来创建定时器。可以在构造函数中指定父对象&#xff0c;确保定时器在正确的…

【C++】STL----list常见用法

&#x1f525;个人主页&#x1f525;&#xff1a;孤寂大仙V &#x1f308;收录专栏&#x1f308;&#xff1a;C从小白到高手 &#x1f339;往期回顾&#x1f339;&#xff1a;[C]vector常见用法 &#x1f516; 流水不争&#xff0c;争的是滔滔不息。 文章目录 一、list的介绍li…

【网络通信基础与实践第二讲】包括互联网概述、互联网发展的三个阶段、互联网的组成、计算机网络的体系结构

一、互联网概述 计算机网络是由若干节点&#xff08;node&#xff09;和连接这些节点的链路&#xff08;link&#xff09;组成。 网络之间还可以通过路由器互联起来&#xff0c;这就构成了一个覆盖范围更大的计算机网络。这样的网络称为互联网。 网络把许多计算机连接在一起…

SpringCloud-04 OpenFeign服务调用与负载均衡

OpenFeign是一个声明式、模板化的HTTP客户端&#xff0c;它简化了在Java应用程序中调用RESTful API的过程。OpenFeign是Netflix开发的一个开源项目&#xff0c;它构建在Feign的基础上&#xff0c;为开发者提供了更加简单、灵活的方式来实现HTTP请求。OpenFeign的特点包括&#…