当前位置： 首页 > news >正文

nextjs入门

news 2025/9/17 23:42:46

创建项目

npx create-next-app 项目名

体验文件路由 

nextjs提供了文件路由的功能, 根据文件系统的目录结构, 可以识别为对应的页面路由

创建页面

首先, 在src下创建pages目录, 然后创建一个about文件(对应about页面)和main/index.js文件(对应首页)

pages/main/index 

const Main=()=>{return (<div>main</div>)
}export default Main

pages/about.js

const About = () => {return (<div>about</div>)
}export default About

启动项目并查看页面

npm run dev

pages下的文件, 文件名作为路由, 显示为页面

pages下的文件夹, 文件夹的名称作为路由, 对应该文件夹的index文件的内容

多级路由

创建pages/content/mutli/a目录, 然后创建两个文件(index和test)

pages/content/multi/a/index.jsx 
const Index = () => {return (<>index</>)
}
export default Index

pages/content/multi/a/test
 

const Test = () => {return (<>test</>)
}
export default Test

访问页面

 

动态路由

nextjs支持文件路由拥有动态的路径参数, 文件名称为 [参数名].js或jsx , 我们创建pages/dynamic/[id].jsx

pages/dynamic/[id].jsx 
import {useRouter} from "next/router";export default function DynamicId() {const router = useRouter()console.log(router)return (<div>{/*获取路由参数*/}current id - {router.query["id"]}</div>)
}
访问页面

slug 长路由

nextjs支持匹配一个路由下的多级子路由

pages/dynamic/[...slug].js 
import {useRouter} from "next/router";const Slug = () => {let slug = [];const router = useRouter();slug = router.query.slug;return (<div><ul>{slug ?slug.map((slug, i) => <li key={i}>{slug}</li>) :<></>}</ul></div>);
};export default Slug;
访问页面

这里应该是匹配到[id]了

 路由跳转

我们使用Link组件来跳转
pages/main/index.js 
import Link from "next/link";const Main = () => {return (<div><Link href={'/dynamic/123'}>to dynamic id</Link></div>)
}export default Main
访问页面

整合chakra组件库

安装依赖

npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

设置

// pages/_app.js
import { ChakraProvider } from '@chakra-ui/react'
// 个人踩坑
// 如果用了_app.js, 就需要在这里也引入globals.css或tailwind的css配置, 才能使tailwind生效
import '@/app/globals.css'function MyApp({ Component, pageProps }) {return (<ChakraProvider><Component {...pageProps} /></ChakraProvider>)
}export default MyApp

应用程序目录设置

// app/providers.tsx
'use client'import { CacheProvider } from '@chakra-ui/next-js'
import { ChakraProvider } from '@chakra-ui/react'export function Providers({ children }: { children: React.ReactNode }) {return (<CacheProvider><ChakraProvider>{children}</ChakraProvider></CacheProvider>)
}

// app/layout.tsx
import { Providers } from './providers'export default function RootLayout({children}) {return (<html lang="en"><body className={inter.className}><Providers>{children}</Providers></body></html>)
}

使用

pages/main/index.js 
import Link from "next/link";
import {Alert,AlertIcon,
} from '@chakra-ui/react'const Main = () => {return (<div><Alert status='success'><AlertIcon />Data uploaded to the server. Fire on!</Alert><Link href={'/dynamic/123'}>to dynamic id</Link></div>)
}export default Main

相关文章：

nextjs入门

创建项目 npx create-next-app 项目名 体验文件路由 nextjs提供了文件路由的功能, 根据文件系统的目录结构, 可以识别为对应的页面路由 创建页面 首先, 在src下创建pages目录, 然后创建一个about文件(对应about页面)和main/index.js文件(对应首页) pages/main/index con…...

编程日记 2023/12/3 17:36:34

【C语言】字符串函数strlen #strcpy #strcmp #strcat #strstr及其模拟实现

在C语言中&#xff0c;有一种特殊的数据类型&#xff0c;即字符串类型。C 并没有专门定义一个字符串类型&#xff0c;这对我们使用字符串造成了一定的麻烦。但是&#xff0c;C标准库<string.h> 中定义了各种字符串函数&#xff0c;这对于我们来说是一件值得庆幸的事情。…...

编程日记 2023/12/3 17:35:33

递归实现组合型枚举

递归实现组合型枚举 #include<iostream> #include<vector>int n, m; std::vector<int>res; bool st[30];void Print() {for(int i0;i<res.size();i){printf("%d ",res[i]);}puts(""); }void dfs(int num) {if (res.size() m){Print(…...

编程日记 2023/12/3 17:34:32

SCAU:1065 数组中的指针

1065 数组中的指针 时间限制:1000MS 代码长度限制:10KB 提交次数:3436 通过次数:1692 题型: 编程题 语言: G;GCC Description 设有如下数组定义&#xff1a; int a[3][4]{{1,3,5,7},{9,11,13,15},{17,19,21,23}}; 计算下面各项的值&#xff08;设数组a的首地址为2000&…...

编程日记 2023/12/3 17:33:31

找不到msvcp110.dll如何修复？分享5个亲测有效的修复方法

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“msvcp110.dll丢失”。这个错误通常发生在运行某些程序时&#xff0c;系统无法找到所需的动态链接库文件。那么&#xff0c;msvcp110.dll到底是什么呢&#xff1f;它又有什么作用&#xff1…...

编程日记 2023/12/3 17:30:29

LeetCode刷题笔记第80题：删除有序数组中的重复项 II

LeetCode刷题笔记第80题&#xff1a;删除有序数组中的重复项 II 题目&#xff1a; 删除升序数组中超过两次的元素后的数组长度 想法&#xff1a; 使用快慢指针的方法完成&#xff0c;使用快指针遍历整个数组&#xff0c;使用慢指针完成相同元素最多保留两个。在快指针遍历到…...

编程日记 2023/12/3 17:29:28

【开源存储】minio对象存储部署实践

文章目录 一、前言1、介绍说明2、部署方式3、冗余模式4、约束限制4.1、规格参数4.2、API支持a、minio不支持的Amazon S3 Bucket APIb、minio不支持的Amazon S3 Object API 二、部署说明1、软件安装2、minio单机部署3、minio分布式部署3.1、前置条件3.2、开始运行3.3、操作说明 …...

编程日记 2023/12/3 17:28:27

Java编程强化练习（二）

表达式计算&#xff08;支持空格&#xff0c;连乘&#xff0c;连除&#xff09;&#xff08;选做题&#xff0c;不计分&#xff09; 【问题描述】 从标准输入中读入一个整数算术运算表达式&#xff0c;如5 - 1 * 2 * 3 12 / 2 / 2 。计算表达式结果&#xff0c;并输出。 …...

编程日记 2023/12/3 17:27:26

Redis的高可用模式

1. 什么是高可用&#xff1f; 高可用&#xff08;High Availability, HA&#xff09;是指在信息技术中确保系统、服务或应用程序在绝大多数时间内都是可操作和可访问的能力。这通常涉及以下几个关键方面&#xff1a; 最小化停机时间: 高可用系统的目标是减少因硬件故障、系统升…...

编程日记 2023/12/3 17:26:26

非功能关键知识总结（一）

文章目录 一、稳定性(一)、服务级别协议1、SLA2、OLA3、UC (二)、可用性指标(三)、突发事件等级 三、质量(一)、千行代码缺陷数量(二)、软件质量模型的发展(三)、产品质量模型 四、安全(一)、网络安全 五、灾备(一)、灾备指标(二)、灾难恢复等级(三)、容灾技术分类 一、稳定性 …...

编程日记 2023/12/3 17:23:23

时间序列趋势检验相关检验方法：斜率法、Cox-Stuart检验、Mann-Kendall检验

文章目录 1.斜率法1.1.原理1.2.优缺点1.3.Python代码2.Cox-Stuart检验2.1.原理2.2.优缺点2.3.Python代码3.Mann-Kendall 检验3.1.原理3.1.1.假设前提3.1.2.趋势检验3.1.3.S到Z的变换原理3.1.4.Var(s)是如何得到的3.1.5.衡量趋势的指标：倾斜度...

编程日记 2023/12/3 17:22:22

Redis相关知识

yum安装redis 使用以下命令&#xff1a;直接将redis安装到Linux服务器&#xff08;Xshell&#xff09;中 yum -y install redis 启动redis 使用以下命令&#xff0c;以后台运行方式启动redis redis-server /etc/redis.conf & 操作redis 使用以下命令启动redis客户端 redis-…...

编程日记 2023/12/3 17:20:21

数据管理系统-week10-自由访问控制

文章目录 前言一、用户管理用户管理语句介绍二、数据库管理三、特权（重点考点）Administrative (global) privileges数据库特权表权限列权限四、角色参考文献前言 这节课主要讲了用户管理数据库的具体语句，数据库特权当中的全局特权，数据库特权，表特权与列特权的使用与注意…...

编程日记 2023/12/3 17:19:20

Python遥感开发之批量拼接

Python遥感开发之批量拼接 1 遥感图像无交错的批量拼接2 遥感图像有交错的批量拼接 前言&#xff1a;主要借助python实现遥感影像的批量拼接&#xff0c;遥感影像的批量拼接主要分为两种情况&#xff0c;一种是遥感图像无交错&#xff0c;另一种情况是遥感图像相互有交错。具体…...

编程日记 2023/12/3 17:18:19

【bat】批处理脚本大全

目录 1.概述 2.变量 3.运算符 3.2.重定向运算符 3.3.多命名运算符 3.4.管道运算符 4.命令 4.1.基本命令 4.2.参数传递 4.3.查看脚本内容 4.4.注释 4.5.日期和时间 4.6.启动脚本 4.7.调用其他bat 4.8.任务管理 4.8.1.任务列表查看 4.8.2.任务终止 4.9.文件夹 …...

编程日记 2023/12/3 17:16:17

java设计模式学习之【单例模式】

文章目录 引言单例模式简介定义与用途实现方式&#xff1a;饿汉式懒汉式 UML 使用场景优势与劣势单例模式在spring中的应用饿汉式实现懒汉式实现数据库连接示例代码地址 引言 单例模式是一种常用的设计模式&#xff0c;用于确保在一个程序中一个类只有一个实例&#xff0c;并且…...

编程日记 2023/12/3 17:14:16

UWB高精度定位系统项目源码

在现代社会中&#xff0c;精准定位技术对于各行各业都至关重要。为了满足对高精度定位的需求&#xff0c;超宽带&#xff08;Ultra-Wideband, UWB&#xff09;技术应运而生。UWB高精度定位系统以其出色的定位精度和多样化的应用领域而备受关注。本文将深入探讨UWB高精度定位系统…...

编程日记 2023/12/3 17:13:15

WPF Live Charts2 自学笔记

文章目录 前言实现效果微软平台的历史问题 WPF 项目搭建Nuget添加额外框架添加项目初始化livecharts配置其它LiveCharts2 案例简单案例Demo示例ViewViewModel GPU渲染 Github地址仓库 前言 LiveChart 是C# 上面很受欢迎的统计图 UI控件。最近在学WPFhalcon开发&#xff0c;想想…...

编程日记 2023/12/3 17:10:13

大小堆的实现（C语言）

目录 前言 一种完全二叉树&#xff1a;堆 堆的概念 堆的性质 建堆的时间复杂度 建堆的空间复杂度&#xff1a; 小堆的实现 必要补充 堆的初始化 堆的销毁 向上调整算法 堆的插入 向下调整算法 堆的删除 获取堆顶元素 获取堆中元素个数 堆的判空 最终代码 He…...

编程日记 2023/12/3 17:09:12

Linux系统之centos7编译安装Python 3.8

前言 CentOS (Community Enterprise Operating System) 是一种基于 Red Hat Enterprise Linux (RHEL) 进行源代码再编译并免费提供给用户的 Linux 操作系统。 CentOS 7 采用了最新的技术和软件包&#xff0c;并提供了强大的功能和稳定性。它适用于各种服务器和工作站应用场景&a…...

编程日记 2023/12/3 17:08:11

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/9/10 3:41:08

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/8/22 5:05:39

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/9/14 20:40:14

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2025/9/3 18:59:01

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2025/9/1 22:19:02

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/7/9 1:12:03

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2025/9/4 14:20:38

计算机基础知识解析：从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

编程新知 2025/9/13 4:25:34

MySQL 主从同步异常处理

阅读原文&#xff1a;https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主&#xff0c;遇到的这个错误&#xff1a; Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一&#xff0c;通常表示&#xff…...

编程新知 2025/8/4 1:00:56

Python网页自动化Selenium中文文档

1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API&#xff0c;让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API&#xff0c;你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...

编程新知 2025/7/8 0:22:23