用 nextjs 创建 Node+React Demo

news2024/12/24 21:22:24

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、客户端渲染和服务端渲染+路由跳转+数据获取

1、客户端渲染和服务端渲染
默认是服务端渲染,服务端渲染不能使用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>
        )
    }
}

2、路由跳转及数据获取,函数组件使用
2.1、通过Link跳转,依赖直接点击一个文字

import Link from 'next/link'

export default function Home() {
    return (
    <div>
        <Link href={{ pathname: '/test/test2', query: { name: 'tangfuling' }}}>点我跳转</Link>
    </div>
    );
} 

2.2、通过Navigation跳转,可以通过代码调用

'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>
    );
}

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

3、路由跳转及数据获取,类组件使用
3.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>
    );
}

3.2、通过window.location.search接数据

'use client';

import React, { Component } from 'react';

export default class Test3 extends Component<any, any> {

    static async getInitialProps({ query }) {
        const { name } = query;
        return { name };
    }

    render() {
        let searchParams = new URLSearchParams(window.location.search);
        return (
            <div>
                test3 {searchParams.get('name')}
                <br/>
            </div>
        );
    }
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ssm“健康早知道”微信小程序 LW PPT源码调试讲解

第二章开发技术与环境配置 以Java语言为开发工具&#xff0c;利用了当前先进的SSM框架&#xff0c;以MyEclipse10为系统开发工具&#xff0c;MySQL为后台数据库&#xff0c;开发的一个“健康早知道”微信小程序。 2.1 Java语言简介 Java是由SUN公司推出&#xff0c;该公司于2…

通义灵码获得国产 AI 编码工具最高成绩丨阿里云云原生 8 月产品月报

云原生月度动态 云原生是企业数字创新的最短路径。 《阿里云云原生每月动态》&#xff0c;从趋势热点、产品新功能、服务客户、开源与开发者动态等方面&#xff0c;为企业提供数字化的路径与指南。 趋势热点 &#x1f947; Gartner 首次发布 AI 代码助手魔力象限&#xff0…

数据链路层/ARP协议

当一个报文需要从一个主机转发到另一个主机的时候&#xff0c;表面上是 IP 报文的跨网络转发&#xff0c;但也并不是直接就将数据报转发到对应的主机了&#xff0c;而是从网络层更下面的数据链路层一跳一跳的转发到下一个链路层&#xff0c;数据链路层实现的是到达短距离目的地…

2024年让你的营销机构省时的18款AI工具

提高效率是经营一家盈利的营销机构的关键。利用AI工具不仅可以提升效率&#xff0c;还能够保持甚至增加团队的工作量和工作质量。 这些都是非常理想的结果。然而&#xff0c;随着越来越多的AI工具问世&#xff0c;从哪里入手呢&#xff1f; 在这里&#xff0c;你会找到一份简…

公司小、资源少?别慌!5招让你有效开展测试工作

在经济环境下行的当下&#xff0c;很多测试人员被迫去一些小公司先渡过难关&#xff0c;但是去小公司做测试往往都会遇到很多问题&#xff0c;除了要给一些开发人员普及测试的概念和流程&#xff0c;而且还要从0-1准备测试资源&#xff0c;因为我就是这么过来的&#xff0c;所以…

【6大设计原则】解锁代码的灵活性:深入解析开闭原则的代码实例与应用

1.引言 在软件开发中&#xff0c;设计模式是解决常见问题的经过验证的解决方案。设计模式不仅提供了一种可复用的设计思路&#xff0c;还有助于提高软件的质量和可维护性。设计模式的六大原则是指导我们进行软件设计的基石&#xff0c;其中开闭原则&#xff08;Open/Closed Pr…

携手科大讯飞丨云衔科技为企业提供全栈AI技术解决方案

作为智能时代的核心驱动力&#xff0c;人工智能不仅重塑了传统行业的面貌&#xff0c;更开辟了全新的经济增长点。科大讯飞以其深厚的技术底蕴和创新能力&#xff0c;持续引领着人工智能领域的发展潮流。云衔科技作为科大讯飞开放平台的AI技术产品线合作伙伴代理商&#xff0c;…

Windows桌面整理软件哪个最好?值得一试的Top10桌面管理软件汇总(全新)

Windows桌面整理软件哪个最好&#xff1f;有时候&#xff0c;桌面上的图标会杂乱无章&#xff0c;让您不知该从何处寻找文件、文件夹或应用程序。通过使用这些桌面图标整理工具&#xff0c;您可以轻松清理多余的图标&#xff0c;并将其分类整理&#xff0c;以便于后续查找。这些…

HTML/CSS/JS学习笔记 Day4(CSS--C1 选择器声明)

跟着该视频学习&#xff0c;记录笔记&#xff1a;【黑马程序员pink老师前端入门教程&#xff0c;零基础必看的h5(html5)css3移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p12&vd_source04ee94ad3f2168d7d5252c857a2bf358 Day4 内容梳理&#xff1a;…

Arduino IDE离线配置第三方库文件-ESP32开发板

简洁版可以使用uget等&#xff0c;将文件下载到对应文件夹下&#xff0c;然后安装。 esp32之arduino配置下载提速 录屏 Arduino IDE离线配置第三方库文件ESP32 资源 Linux https://download.csdn.net/download/ZhangRelay/89749063 第三方开发板 非默认支持的开发板 linu…

科技前沿:Web3与物联网的智能连接

随着科技的迅速发展&#xff0c;Web3 和 物联网&#xff08;IoT&#xff09; 正在成为推动未来技术创新的两大关键领域。Web3是去中心化互联网的愿景&#xff0c;而物联网通过智能设备的相互连接&#xff0c;构建了一个无缝交互的物理世界。当这两项技术相结合时&#xff0c;它…

C++:const成员函数,初始化列表,static成员,友元

一.const成员函数 概念&#xff1a;将const修饰的成员函数称之为const成员函数&#xff0c;const修饰成员函数放到成员函数参数列表的后面。 在使用成员函数的过程中&#xff0c;我们在函数参数位置是无法显示调用this指针的&#xff0c;但很多函数的使用又不会改变this指针指…

华为大咖说 | 智能时代,为什么“流动性”是生态产业的核心?

本文作者&#xff1a;任旭东&#xff08;华为首席开源联络官&#xff09;全文约4205字&#xff0c;阅读约需9分钟 经济全球化主要表现为全球性或区域性的商品、资本、技术和劳动力等的高度流动性与市场一体化进程&#xff0c;以及由此而导致的商品和要素的价格趋同、交易成本的…

大模型从失败中学习 —— 微调大模型以提升Agent性能

人工智能咨询培训老师叶梓 转载标明出处 以往的研究在微调LLMs作为Agent时&#xff0c;通常只使用成功的交互轨迹&#xff0c;而丢弃了未完成任务的轨迹。这不仅造成了数据和资源的浪费&#xff0c;也可能限制了微调过程中可能的优化路径。论文《Learning From Failure: Integ…

1.基础计算01

1.基础计算 比方有10用户对象信息list对象&#xff0c;通过ID进行从小到大排序&#xff0c;如何进行&#xff0c;第一位对象信息除了ID复制到第二位&#xff0c;第二位复制到第三位&#xff0c;第三位复制到第4位&#xff0c;…一直到最后一位&#xff0c;将最后一位信息除ID外…

位运算符的优先级

四则运算在位运算符的中间&#xff0c;优先级从高到低排列如下&#xff1a; 口诀&#xff1a;反四夷&#xff0c;与异火。 反对四方蛮夷&#xff0c;拿什么反对呢&#xff1f;与异族火拼。 反指按位取反&#xff08;~&#xff09;&#xff0c;四指四则运算&#xff08;*、/、…

开发者说:使用通义灵码,参与开源项目全程纪实

缘起 OceanBase。作为一个充满好奇心的 DBA&#xff0c;一直一来想探寻数据库的内部世界。开源为我们这些好奇的猫打开了一扇新世界的大门。OceanBase 作为分布式关系型数据库的排头兵&#xff0c;自然进入了我的优选名单。起初走进了 OceanBase[1]的世界逛了一圈&#xff0c;这…

OpenAI 发布 o1 模型具备类似人类的推理能力,大模型已经达到人类博士水平了吗?

什么是OpenAI o1&#xff1f; OpenAI o1&#xff08;后面简称o1&#xff09;是OpenAI在2024.9.12号发布的最新大模型&#xff0c;主要针对的任务是复杂任务推理&#xff0c;比如竞赛难度的编程问题&#xff0c;奥赛难度的数学问题等。参考OpenAI原始介绍: https://openai.com…

学习笔记 - 知识图谱的符号表示方法

学习笔记 - 知识图谱的符号表示方法 说明&#xff1a; 首次发表日期&#xff1a;2024-09-13个人阅读学习并摘录成笔记 知识表示的相关名词定义 以下内容摘录自 Knowledge Graphs Applied 2.3小节&#xff0c;然后AI翻译人工润色。 实体&#xff08;Entities&#xff09;—表…

【CTF Web】BUUCTF BUU BURP COURSE 1 Writeup(X-Real-IP伪造+POST请求)

BUU BURP COURSE 1 1 点击启动靶机。 解法 用 hackbar 将 X-Forwarded-For 设为 127.0.0.1&#xff0c;无效。提示&#xff1a;只能本地访问。 将 Referer 设为 127.0.0.1&#xff0c;无效。提示&#xff1a;只能本地访问。 将 X-Real-IP 设为 127.0.0.1&#xff0c;成功&am…