Next.js初步使用

文章目录

    • 安装和运行
    • 页面
    • 静态文件

React初步,但不熟悉React也可以学习本文。

安装和运行

Next.js是一个基于React的服务端渲染框架,可以实现构建高性能、可扩展的React应用,提供了很多方便的工具和功能,包括自动代码分割、服务器端渲染、静态文件服务、自动缩小、热模块替换等等。它还内置了一些常用的功能,如处理CSS、图片、Markdown等文件。Next.js也支持使用TypeScript开发,并提供一些插件来帮助开发者更好地使用TypeScript。

首先安装

npx create-next-app@latest

接下来按照提示,逐一设置项目名,都选默认值即可。

安装完成后,进入项目,用run运行

>cd my-app
>npm run dev

然后根据提示,打开http://localhost:3000/就可以了

在这里插入图片描述

npm run dev表示用开发模式启动next.js,这些npm run指令与next指令的对应关系被存放在配置文件package.json的scripts中,内容如下

"scripts": {"dev": "next dev","build": "next build","start": "next start","lint": "next lint"
},

其功能如下

  • dev 以开发模式启动 Next.js
  • build 构建用于生产环境的应用程序
  • start 启动Next.js生产环境服务器
  • lint 启动Next.js的内置ESLint,以检查代码错误

页面

在my-app路径下新建一个pages文件夹,则该文件夹内的页面可以通过文件名进行路由。例如在pages中新建一个about.js文件

function About(){return <div>About</div>
}export default About

然后输入http://localhost:3000/about就可以自行跳转到这个页面。

在这里插入图片描述

通过Link组件,可以实现站内跳转,将about.js和page.js中的内容分别修改如下

//about.js
import Link from "next/link"function About(){return (<div><Link href="/">主页</Link><p>About</p></div>)
}
export default About
// page.js
import Link from "next/link"
export default function Home() {return (<main className="flex min-h-screen flex-col items-center justify-between p-24"><Link href="/about">about</Link></main>)
}

即主页用"/“来表示,而pages下的页面通过”/xxx"来表示,跳转效果如下

在这里插入图片描述

静态文件

在public路径下添加的文件,可通过"/"作为起始路径来访问,例如,将about.js代码修改如下

import Link from "next/link"
import Image from 'next/image'export default function About(){return (<div><Link href="/"><Image src="/next.svg" width={300} height={60}/></Link><p>About</p></div>)
}

其中next.svg是public中的图片,将这个图片放在链接中,效果如下

在这里插入图片描述

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

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

相关文章

Java研学-IO流(三)

六 字节流 – 字节输出流系列 OutPutStream体系 1 OutPutStream系列 – 字节输出流 // 表示字节输出流所有类的超类&#xff0c;输出流接受输出字节并将其发送到某个接收器 public abstract class OutputStreamFileOutputStream/BufferedOutputStream 2 FileOutputStream类设…

pyqt5使用pyqtgraph实现动态热力图

pyqt5使用pyqtgraph实现动态热力图 一、效果图 二、流程 1、打开Designer创建一个UI界面 2、把UI转成py 3、创建一个main.py文件 4、在main文件中渲染画布、创建初始数据、画热力图、创建更新数据线程、绑定按钮触发事件三、UI界面 其中h_map.py代码如下: # -*- coding: ut…

1688API接口系列,1688开放平台接口使用方案(商品详情数据+搜索商品列表+商家订单类)

1688商品详情接口是指1688平台提供的API接口&#xff0c;用于获取商品详情信息。通过该接口&#xff0c;您可以获取到商品的详细信息&#xff0c;包括商品标题、价格、库存、描述、图片等。 要使用1688商品详情接口&#xff0c;您需要先申请1688的API权限&#xff0c;并获取ac…

变量和引用

变量和引用 2.1.深入认识变量 2.1.1.什么是变量 变量是在程序中保存用户数据的一段内存存储空间&#xff0c;变量名是内存空间的首地址 变量三要素&#xff1a;名称、类型、值 2.1.2.变量的名称 组成: 字母、数字、下划线组成&#xff0c;不能以数字开头 变量名称的长…

蓝桥杯每日一题2023.12.2

题目描述 蓝桥杯大赛历届真题 - C 语言 B 组 - 蓝桥云课 (lanqiao.cn) 题目分析 答案&#xff1a;3598180 由题目分析可以知道&#xff0c;给小明发的牌一共有13种类型&#xff0c;每种类型的牌一共有四张。对于每种牌&#xff0c;我们都有5种选择&#xff0c;不拿、拿一张、…

LeetCode - 965. 单值二叉树(C语言,二叉树,配图)

二叉树每个节点都具有相同的值&#xff0c;我们就可以比较每个树的根节点与左右两个孩子节点的值是否相同&#xff0c;如果不同返回false&#xff0c;否则&#xff0c;返回true。 如果是叶子节点&#xff0c;不存在还孩子节点&#xff0c;则这个叶子节点为根的树是单值二叉树。…

FFmpeg命令行使用小结

文章目录 前言一、视频1.1 修改格式转码1.2 截取片段1.3 合并多个视频1.4 裁剪区域1.5 修改分辨率1.6 翻转视频1.7 调整速度1.8 多个视频拼接1.9 添加字幕1.10 修改文件封面1.11 添加文字水印1.12 制作画中画1.13 音视频混合/分离1.14 视频直播推流1.15 m3u8切片 二、音频2.1 视…

Spring Boot 最核心的 25 个注解

1、SpringBootApplication 这是 Spring Boot 最最最核心的注解&#xff0c;用在 Spring Boot 主类上&#xff0c;标识这是一个 Spring Boot 应用&#xff0c;用来开启 Spring Boot 的各项能力。 其实这个注解就是 SpringBootConfiguration、EnableAutoConfiguration、Componen…

分析实现HarmonyOS中的Linux内核架构模式

在当今的科技领域&#xff0c;操作系统是各种智能设备运行的关键所在。而在这方面&#xff0c;华为的鸿蒙系统备受瞩目。那么&#xff0c;鸿蒙系统技术架构是怎样的呢&#xff1f;本文将为您揭开这一神秘面纱。 首先&#xff0c;我们需要了解鸿蒙系统的基本架构。鸿蒙系统采用…

mysql中除了InnoDB以外的其它存储引擎

参考资料&#xff1a;https://dev.mysql.com/doc/refman/8.0/en/storage-engines.html MyISAM存储引擎 https://dev.mysql.com/doc/refman/8.0/en/myisam-storage-engine.html MyISAM 存储引擎是基于比较老的ISAM存储引擎&#xff08;ISAM已经不再可用&#xff09;&#xff…

shell编程系列(11)-使用grep查找文本

文章目录 前言grep的使用根据关键字查找反向查找 结语 前言 grep命令也是我们在日常使用linux&#xff0c;编写shell脚本中会用到的一个高频命令&#xff0c;grep主要是帮助我们查找我们想要的内容&#xff0c;类似于我们在office word里面的 Ctrl f 查找功能&#xff0c;但是…

SLURM资源调度管理系统REST API服务配置,基于slurm22.05.9,centos9stream默认版本

前面给大家将了一下slurm集群的简单配置&#xff0c;这里给大家再提升一下&#xff0c;配置slurm服务的restful的api&#xff0c;这样大家可以将slurm服务通过api整合到桌面或者网页端&#xff0c;通过桌面或者网页界面进行管理。 1、SLURM集群配置 这里请大家参考&#xff1…

使用C语言创建高性能爬虫ip网络

之前写的python和GO语言的爬虫ip池的文章引起很大反响&#xff0c;这次我将以C语言来创建爬虫IP池&#xff0c;但是因为其复杂性&#xff0c;可能代码并非完美。但是最终也达到的想要的效果。 因为在C语言中创建代理IP池可能会比较复杂&#xff0c;且C语言并没有像Python那样的…

07-原型模式-C语言实现

原型模式&#xff1a; Specify the kinds of objects to create using a prototypical instance,and create new objects by copying this prototype.&#xff08;用原型实例指定创建对象的种类&#xff0c; 并且通过拷贝这些原型创建新的对象。 &#xff09; UML图&#xff1…

关于 Kubernetes中Admission Controllers(准入控制器) 认知的一些笔记

写在前面 工作中遇到&#xff0c;简单整理记忆博文为官方文档整理涉及内置准入控制的分类理解理解不足小伙伴帮忙指正 人活着就是为了忍受摧残&#xff0c;一直到死&#xff0c;想明了这一点&#xff0c;一切事情都能泰然处之 —— 王小波《黄金时代》 为什么需要准入控制器 准…

非得让你会之MyBatis插件与Java动态代理

引言 咱们今天聊聊Java动态代理&#xff0c;这东西在开发中真的太常见了。比如Spring AOP、RPC&#xff0c;它们都离不开动态代理。然后&#xff0c;咱们再来说说MyBatis插件&#xff0c;这可是MyBatis框架中的一个超实用的功能&#xff0c;它就像是给MyBatis加了个“超能力”…

『测试基础』| 如何理解测试用例管理和缺陷管理?

『测试管理攻略』| 如何理解测试用例管理和缺陷管理&#xff1f; 1 测试用例定义2 测试用例设计原则3 测试用例的评审4 测试如何维护&#xff1f;5 用例的作用6 用例管理工具7 缺陷关注的重点8 缺陷分析9 缺陷管理工具 1 测试用例定义 测试用例&#xff08;TestCase&#xff0…

西南科技大学(数据结构A)期末自测练习四

一、填空题&#xff08;每空1分&#xff0c;共10分&#xff09; 1、树最适合用来表示( C ) A.有序数据元素 B.无序数据元素 C.元素之间具有层次关系的数据 D.元素之间具有多对多关系的数据 2、根据二叉树的定义可知二叉树共有&#xff08; B&#xff09;种不同的基本形态…

react 面试题 50题 大公司常问的面试

1. 请解释 React 是什么以及它的主要特点。 2. 请解释 React 中的虚拟 DOM&#xff08;Virtual DOM&#xff09;以及它的工作原理。 3. 请解释 React 中的组件&#xff08;Components&#xff09;以及它们如何工作。 4. 请解释 React 中的生命周期方法&#xff08;Lifecycle Me…

Zabbix监控openstack系统资源

一、简介 随着信息技术的不断发展&#xff0c;作为基础平台,封闭架构带来不兼容性,无法支持异构虚拟机系统,也难以支撑开放合作的产业链需求。随着云计算时代的来临,虚拟化管理平台向开放平台架构转变,多种厂家的虚拟机可以在开放的平台架构下共存,不同的应用厂商可以基于开放…