React框架-Next 学习-1

news2024/9/21 2:33:00

创建一个 Next.js 应用,node版本要高,16.5以上

npm淘宝镜像切为https://registry.npmmirror.com

npm config set registry https://registry.npmmirror.com
npx create-next-app@latest

//安装后 使用npm run dev 启动

Next.js 是围绕着 页面(pages) 的概念构造的。一个页面(page)就是一个从 pages 目录下的 .js.jsx.ts 或 .tsx 文件导出的 React 组件。(目前有两种路由方式Pages Router/app router,v13之后默认App Router)

  • Pages Router

页面(page) 根据其文件名与路由关联。例如,pages/test.js 被映射到 /test。甚至可以在文件名中添加动态路由参数。

在你的项目中创建一个 pages 目录。

为 ./pages/test.js 文件填充如下内容:

function Test() {
  return <div>测试<h1>页面组件</h1>以及展示内容,更新内容</div>
}
export default Test

展示如下:

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

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

相关文章

uac驱动之const修饰的变量和const修饰的指针

const int*p // p所指向的空间是常量 不可修改 ,但p可以修改 int*const p // p所指向的空间是可以修改 ,p不可以修改 #include <stdio.h> #include <string.h>struct usb_string {char id;const char *s; };enum {STR_ASSOC,STR_AC_IF,STR_USB_OUT_IT,STR_USB_O…

单位个人怎样向报社的报纸投稿?

作为一名单位的信息宣传员,我肩负着每月定期在媒体上投稿发表文章的重任。然而,在投稿的道路上,我经历了不少波折和挫折。 一开始,我天真地以为只要将稿件发送到报社的投稿邮箱,就能轻松完成任务。然而,现实却远比我想象的复杂。邮箱投稿的竞争异常激烈,编辑们会在众多稿件中挑…

ROS2系统与px4通信测试

参考文章&#xff1a; No communication with ROS2 using MicroXRCEAgent with px4 board ROS2官方安装及测试程序 概要 新安装的ROS2与PixHawk开发板进行通信。 操作步骤 启动示例程序&#xff0c;在&#xff5e;/ws_sensor_combined/src路径下执行&#xff1a; ros2 l…

MYSQL-9.问题排查

问题排查的思路与方向 问题排查思路 分析问题&#xff1a;根据理论知识经验分析问题&#xff0c;判断问题可能出现的位置或可能引起问题的原因&#xff0c;将目标缩小到一定范围&#xff1b;排查问题&#xff1a;基于上一步的结果&#xff0c;从引发问题的“可疑性”角度出发…

【C++ 高阶数据结构 Test】AVL ~ 二叉搜索树

文章目录 1. AVL 树概念2. AVL 树节点的定义3. AVL树的插入4. AVL树的旋转4.1 新节点插入较高左子树的左侧---左左&#xff1a;右单旋4.2 新节点插入较高右子树的右侧---右右&#xff1a;左单旋4.3 新节点插入较高左子树的右侧---左右&#xff1a;先左单旋再右单旋4.4 新节点插…

【计算机毕业设计】springboot房地产销售管理系统的设计与实现

相比于以前的传统手工管理方式&#xff0c;智能化的管理方式可以大幅降低房地产公司的运营人员成本&#xff0c;实现了房地产销售的 标准化、制度化、程序化的管理&#xff0c;有效地防止了房地产销售的随意管理&#xff0c;提高了信息的处理速度和精确度&#xff0c;能够及时、…

九游娱乐携手云达不莱梅共谋跨界新发展!

近日&#xff0c;九游娱乐正式宣布&#xff0c;成为德国著名足球俱乐部云达不莱梅俱乐部的亚洲官方合作伙伴。此次跨界合作将携手开创体育与娱乐融合的新篇章&#xff0c;不仅彰显九游娱乐在全球体育和娱乐领域的影响力&#xff0c;也为云达不莱梅俱乐部在亚洲市场带来了新的机…

js之选项卡制作实例

大家好&#xff0c;今天给大家书写选项卡实例&#xff0c;话不多说&#xff0c;直接上干货 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, in…

UVM寄存器模型——手写Ralf问题debug

寄存器模型是UVM中至关重要的一部分&#xff0c;如果没有寄存器模型&#xff0c;那么验证平台对于DUT内寄存器的访问方式将十分有限&#xff0c;对DUT运行状态的把控也会变得更为复杂。 在验证过程中&#xff0c;scoreboard或者其他验证组件经常需要了解当前时间某个寄存器的值…

c++20---std::erase----std::erase_if

问题&#xff1a;如何删除满足条件的所有元素。 erase #include <iostream> #include <algorithm> #include <vector>int main(){std::vector<int> vec{1,2,3,1,1,1,1,1};std::erase(vec,1);for(int v:vec) std::cout<<v<<" "…

详细分析Vue3中的reactive(附Demo)

目录 1. 基本知识2. 用法3. Demo 1. 基本知识 reactive 是一个函数&#xff0c;用于将一个普通的 JavaScript 对象转换为响应式对象 当对象的属性发生变化时&#xff0c;Vue 会自动追踪这些变化&#xff0c;并触发相应的更新 Vue2没有&#xff0c;而Vue3中有&#xff0c;为啥…

[AI智能摄像头]RV1126部署yolov5并加速

导出onnx模型 yolov5官方地址 git clone https://github.com/ultralytics/yolov5 利用官方命令导出python export.py --weights yolov5n.pt --include onnx 利用代码导出 import os import sys os.chdir(sys.path[0]) import onnx import torch sys.path.append(..) from m…

如何使用JMeter测试导入接口/导出接口?

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号&#xff1a;互联网杂货铺&#xff0c;回复1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 今天上班&#xff0c;被开发问了一个问题&#xff1a;JM…

怎样恢复E盘里删了的文件夹,2024让EasyRecovery来帮你轻松恢复

使用EasyRecovery易恢复进行数据恢复非常简单。首先&#xff0c;用户需要选择需要恢复的数据类型&#xff0c;如文档、图片、视频等。然后&#xff0c;软件会对选定的存储设备进行全面扫描&#xff0c;以寻找可恢复的数据。在扫描过程中&#xff0c;用户可以预览部分已找到的文…

一周学习总结:数组与链表

学习内容&#xff1a;数组与链表、计算机网络知识 数组&#xff1a; 从数组的基础知识到相关应用 数组的基础知识&#xff1a;数组在内存中的存储、数组的相关操作&#xff08;获取与更新&#xff09;、数组的相关应用&#xff1a; 二分查找法⭐⭐⭐⭐⭐ ● 掌握左闭右闭的…

matlab使用教程(71)—控制坐标区布局

1.与位置相关的属性和函数 有几个属性和函数可用于获取和设置坐标区的大小与位置。下表摘要显示了这些属性和函数。 函数或属性描述 OuterPosition 属性 使用此属性可以查询或更改坐标区的外边界&#xff0c;包括标题、标签和边距。要更改外边界&#xff0c;请将此属性指定为…

暴利的副业兼职,抖音蓝海赛道,批量复制这个项目,1年200个

在有小孩的家庭中&#xff0c;父母都非常重视孩子的教育&#xff0c;并愿意为此投入大量资金。根据之前的新闻报道&#xff0c;有些父母会毫不犹豫地为孩子花费数千甚至上万元报名参加各种培训课程。尤其是在独生子女家庭中&#xff0c;家长更注重培养孩子的各方面能力。 周周近…

基于springboot实现社区智慧养老监护管理平台系统项目【项目源码+论文说明】计算机毕业设计

基于SpringBoot实现社区智慧养老监护管理平台系统演示 摘要 如今社会上各行各业&#xff0c;都在用属于自己专用的软件来进行工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。互联网的发展&#xff0c;离不开一些新的技术&#xff0c;而新技术的…

Linux交叉编译

目录 一. 下载交叉编译工具 1.使用环境要求 2.获取Linux SDK 方法一&#xff1a;从github上下载orangepi-build 方法二&#xff1a;从百度网盘下载提前编译好的Linux SDK包 通过以下命令进行合并解压 3.修改配置脚本 4.首次编译完整的SDK 1.运行build.sh脚本 2.选择F…

Colab/PyTorch - 004 Torchvision Semantic Segmentation

Colab/PyTorch - 004 Torchvision Semantic Segmentation 1. 源由2. 语义分割 - 应用2.1 自动驾驶2.2 面部分割2.3 室内物体分割2.4 地理遥感 3. 语义分割 - torchvision3.1 FCN 使用 ResNet-101 语义分割3.1.1 加载模型3.1.2 加载图像3.1.3 预处理图像3.1.4 网络的前向传播3.1…