Next.js基础语法

Next.js 目录结构

image.png

入口App组件(_app.tsx)

_app.tsx是项目的入口组件,主要作用:

  • 可以扩展自定义的布局(Layout)
  • 引入全局的样式文件
  • 引入Redux状态管理
  • 引入主题组件等等
  • 全局监听客户端路由的切换

ts.config.json 的配置

Next.js默认是没有配置路径别名的,我们可以在ts.config.json中配置模块导入的别名:

  • baseUrl :配置允许直接从项目的根目录导入,比如: import Button from ‘components/button’
  • paths:允许配置模块别,比如: import Button from '@/components/button’

image.png

Next.js配置(next.config)

next.config.ts 配置文件位于项目根目录,可对Next.js进行自定义配置,比如,可以进行如下配置:

  • reactStrictMode: 是否启用严格模式,辅助开发,避免常见错误,例如:可以检查过期API来逐步升级
  • env:配置环境变量,配置完需要重启
    • ✓ 会添加到 process.env.xx 中
    • ✓ 配置的优先级: next.config.js中的env > .env.local > .env
  • basePath:要在域名的子路径下部署 Next.js 应用程序,您可以使用basePath配置选项。
    • ✓ basePath:允许为应用程序设置URl路径前缀。
    • ✓ 例如 basePath=/music, 即用 /music 访问首页,而不是默认
  • images:可以配置图片URL的白名单等信息
  • swcMinify: 用 Speedy Web Compiler 编译和压缩技术,而不是 Babel + Terser 技术

更多的配置: https://nextjs.org/docs/api-reference/next.config.js/introduction

内置组件

image.png

Image组件

image.png

全局和局部样式

image.png

静态资源引用

image.png

字体图标

字体图标使用步骤 :

  • 1.将字体图标存放在 assets 目录下
  • 2.字体文件可以使用相对路径和绝对路径引用。
  • 3.在_app.tsx文件中导入全局样式
  • 4.在页面中就可以使用字体图标了

image.png 新建页面

image.png

路由

app.tsx检查路由的跳转:

useEffect(() => {const handleRouteChange = (url: string) => {console.log(`App is changing to ${url}`);};// 监听路由的前进和后退// router.beforePopState(function (e) {//   console.log("beforePopState");//   console.log(e);//   return true;// });router.events.on("routeChangeStart", handleRouteChange);return () => {router.events.off("routeChangeStart", handleRouteChange);};
}, []);

组件导航(Link)

image.png

编程导航 (useRouter)

image.png

动态路由

image.png

路由参数(useRouter)

image.png

404 Page

image.png

路由匹配规则

◼ 路由匹配优先级, 即预定义路由优先于动态路由,动态路由优先于捕获所有路由。请看以下示例:

  • 1.预定义路由:pages/post/create.js
    • ✓ 将匹配 /post/create
  • 2.动态路由 :pages/post/[pid].js
    • ✓ 将匹配/post/1, /post/abc 等。
    • ✓ 但不匹配 /post/create 、 /post/1/1 等
  • 3.捕获所有路由:pages/post/[…slug].js
    • ✓ 将匹配 /post/1/2, /post/a/b/c 等。
    • ✓ 但不匹配/post/create, /post/abc、/post/1、、/post/ 等

来自资源:imooc

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

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

相关文章

驱动版本问题:connect error, url mysql.db.url:jdbc:mysql://IP地址:3306/数据库名

MySQL升级版本 5.7.43 必须升级驱动版本 8.0 以上版本 启动项目报错 使用Druid数据库连接池获取Mysql常见的错误--不兼容问题 后来百度搜索发现原来是Mysql版本和mysql-connector-java版本不一致造成的。 查询Mysql版本号: SELECT version(); 然后去官网找对应版…

iOS开发Swift-2-图片视图、App图标-赏月App

1.创建新项目 点击File - New - Project。 选择Single View App,点击Next。 填写文件信息,点击Next。 选择文件位置,点击Create。 修改App显示名称为 “赏月”。 2.设置背景色 选择Main,点击View界面,选择右边属性&…

用docker-compose搭建LNMP

docker-compose搭建LNMP 一、compose 的部署1.Docker Compose 环境安装 二、编写Docker Compose1.准备依赖文件,配置nginx2.配置mysql3.配置php4.编写docker-compose.yml5.执行6.查看 一、compose 的部署 (1)公司在实际的生产环境中,需要使用…

Cesium 加载 geojson 文件并对文件中的属性值进行颜色设置

文章目录 需求分析解决 需求 Cesium 加载 geojson 文件并对文件中的属性值进行颜色设置 分析 在搜寻多种解决方案后,最后总结出 自己的解决方案 方案一,没看懂 var geojsonOptions {clampToGround : true //使数据贴地};var entities;promise Cesium…

uniapp 支持图片放大

<view class"list" v-for"(item, index) in urls" :key"index"><image :src"item" click"viewImg(item, index)" disabled></image></view> js // 预览大图 viewImg(data, index) {uni.previewImag…

Java【手撕滑动窗口】LeetCode 209. “长度最小子数组“, 图文详解思路分析 + 代码

文章目录 前言一、长度最小子数组1, 题目2, 思路分析3, 代码 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的专栏能够帮助到你: &#x1f4d5; JavaSE基础: 基础语法, 类和对象, 封装继承多态, 接口, 综合小练习图书管理系统等 &#x1f4d7; Java数据结构: 顺序表, 链…

React入门 组件学习笔记

项目页面以组件形式层层搭起来&#xff0c;组件提高复用性&#xff0c;可维护性 目录 一、函数组件 二、类组件 三、 组件的事件绑定 四、获取事件对象 五、事件绑定传递额外参数 六、组件状态 初始化状态 读取状态 修改状态 七、组件-状态修改counter案例 八、this问…

如何安装chromadb

下载最新版本的python3.10 因为chromadb需要sqlite3的最小版本是3.35.0 使用如下命令安装 pip install chromadb 安装完毕后在python3的命令行窗口输入 import chromadb 如果不报错代表成功&#xff0c;如果报错sqlite3的最小版本是3.35.0&#xff0c;使用如下方式解决 …

校园照明控制系统的基本组成部分

1.1 主控中心 系统使用通用计算机作为主控中心&#xff0c;通过 RLINK 通讯装置与网络实现通 讯。计算机上可直接实现编程&#xff0c;监控&#xff0c;故障报警等功能。局域网上的计算机也可以 通过主控中心实现监控功能。 1.2 RLINK 通讯装置 主控中心与系统网络各单元的…

mysql 间隙锁原理深度详解

目录 一、前言 二、mysql之mvcc 2.1 什么是mvcc 2.2 mvcc组成 2.2.1 Undo log 多版本链 2.2.2 ReadView 2.2.3 快照读与当前读 三、RR级别下的事务问题 3.1 RR隔离级别解决的问题 3.1.1 幻读问题 3.2 幻读效果演示 3.2.1 准备测试表和数据 3.2.2 修改事务级别 3.…

Acwing798.差分矩阵

前缀和与差分 图文并茂 超详细整理&#xff08;全网最通俗易懂&#xff09;_前缀和差分_林小鹿的博客-CSDN博客 代码展示&#xff1a; #include<iostream> #include<cstdio> using namespace std; const int N 1e3 10; int a[N][N], b[N][N]; void insert(int x…

【UE 材质】实现角度渐变材质、棋盘纹理材质

目标 步骤 一、角度渐变材质 1. 首先通过“Mask”节点将"Texture Coordinate" 节点的R、G通道分离 2. 通过“RemapValueRange”节点将0~1范围映射到-1~1 可以看到此时R通道效果&#xff1a; G通道效果&#xff1a; 继续补充如下节点 二、棋盘纹理材质 原视频链接&…

git分支管理策略

git的基础操作以及常用命令在上篇博客哦~ git原理与基本使用 1.分支管理 1.主分支 在版本回退⾥&#xff0c;我们已经知道&#xff0c;每次提交&#xff0c;Git都把它们串成⼀条时间线&#xff0c;这条时间线就可以理解为是⼀个分⽀。截⽌到⽬前&#xff0c;只有⼀条时间线&…

C++ 滑翔翼

小T和小K都是OIER&#xff0c;入选省队后有幸去苏州参加JSOI集训&#xff0c;训练之余&#xff0c;他们相约一起去苏州乐园玩。 苏州乐园里有一个非常热门的游乐项目叫双人滑翔翼。小T想和小K一起乘双人滑翔翼&#xff0c;但是排在他们前面的一大群人却为了搭配问题而争执不休&…

【go】切片截取总结

文章目录 1.获取切片的第i个元素2.获取切片的第i个至第j个元素3.各种切片截取操作 1.获取切片的第i个元素 func main() {s : []int{1, 2, 3, 4, 5}fmt.Println("第一个元素为&#xff1a;", s[0])fmt.Println("最后一个元素为&#xff1a;", s[len(s)-1])…

aws的s3匿名公开访问

点击桶权限 &#xff0c;添加策略 {"Version": "2012-10-17","Statement": [{"Sid": "AddPerm","Effect": "Allow","Principal": "*","Action": "s3:GetObject&qu…

Docker原理详细剖析-Namespace

一、简介 docker容器技术从2013年开始火了以后&#xff0c;2014年左右当时有幸在学校能和学院教授一起做些项目以及学习。其中docker技术在当时来说还算是比较新的技术&#xff0c;国内关于这块的资料以及使用也才刚刚开始&#xff0c;讨论docker技术&#xff0c;算是相对时髦的…

mysql表锁死怎么办?事务锁sql超时被锁死怎么办?

不要慌&#xff01;不要慌&#xff01;两句命令教你做人 一、mysql表锁死 1、查询所有进程&#xff1a; SHOW PROCESSLIST; 2、找到进程号kill掉 kill 3269987 2、事务锁 sql超时被锁死 1、查询所有执行中的sql select t.*,to_seconds(now())-to_seconds(t.trx_started) id…

智能手表:华米稳、华为猛

随着科技的进步与发展&#xff0c;消费电子产品的功能和品类越来越丰富&#xff0c;人们也愈发习惯使用消费电子产品了。消费电子产品一词听起来陌生&#xff0c;实际上却离人们很近&#xff0c;比如智能手机、笔记本电脑等等&#xff0c;都属于消费电子产品。现如今&#xff0…

SQL存储过程中 SET ANSI_NULLS ON 和 SET QUOTED_IDENTIFIER ON的作用和详解

今天在写SQL Server存储过程中遇到的&#xff0c;做个整理归纳 USE [ABInbevDB] GO SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO实际上&#xff0c;我们在创建存储过程的时候&#xff0c;这几行的代码是会自动创建出来的&#xff0c;那么先解释下两个标准的概念。 两个…