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

nextjs入门

news 2026/3/31 20:34:31

创建项目

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

编程日记 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 设有如下数组定义： int a[3][4]{{1,3,5,7},{9,11,13,15},{17,19,21,23}}; 计算下面各项的值（设数组a的首地址为2000&…...

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

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

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

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

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

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

编程日记 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编程强化练习（二）

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

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

Redis的高可用模式

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

编程日记 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 使用以下命令：直接将redis安装到Linux服务器（Xshell）中 yum -y install redis 启动redis 使用以下命令，以后台运行方式启动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 遥感图像有交错的批量拼接前言：主要借助python实现遥感影像的批量拼接，遥感影像的批量拼接主要分为两种情况，一种是遥感图像无交错，另一种情况是遥感图像相互有交错。具体…...

编程日记 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设计模式学习之【单例模式】

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

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

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

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

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

WPF Live Charts2 自学笔记

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

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

大小堆的实现（C语言）

目录前言一种完全二叉树：堆堆的概念堆的性质建堆的时间复杂度建堆的空间复杂度： 小堆的实现必要补充堆的初始化堆的销毁向上调整算法堆的插入向下调整算法堆的删除获取堆顶元素获取堆中元素个数堆的判空最终代码 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 采用了最新的技术和软件包，并提供了强大的功能和稳定性。它适用于各种服务器和工作站应用场景&a…...

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

eSearch一站式屏幕效率工具安装指南

eSearch一站式屏幕效率工具安装指南【免费下载链接】eSearch 截屏离线OCR 搜索翻译以图搜图贴图录屏万向滚动截屏屏幕翻译 Screenshot Offline OCR Search Translate Search for picture Paste the picture on the screen Screen recorder Omnidirectional scrolling sc…...

编程新知 2026/3/31 19:16:53

超越GUI：用Tcl命令流高效编辑Tessent DftSpecification的三种进阶玩法

超越GUI：用Tcl命令流高效编辑Tessent DftSpecification的三种进阶玩法在大型SoC项目中，频繁修改IJTAG网络结构是每位资深DFT工程师的日常。当设计迭代进入深水区，图形界面操作和手动文本编辑的效率瓶颈会愈发明显——每次增减SIB、调整TDR位…...

编程新知 2026/3/31 19:04:26

如何用快马平台为网站开发公司快速生成企业官网原型，提升方案演示效率

作为一名经常需要快速响应客户需求的网站开发者，我最近发现了一个能大幅提升工作效率的好方法 - 使用InsCode(快马)平台来生成企业官网原型。这个方法特别适合像我们华网三百每年.cn这样需要快速为客户提供方案演示的网站开发公司。需求分析阶段当接到一个新客户…...

编程新知 2026/3/31 18:44:16

Mid-70激光雷达与相机无目标标定：从环境搭建到实战避坑

1. 为什么选择Ubuntu 16.04进行Mid-70标定最近在给Livox Mid-70激光雷达做相机标定时，我踩了个大坑——在Ubuntu 22.04上折腾了整整两天都没搞定环境配置。后来才发现问题出在版本兼容性上：ROS Kinetic、Ceres 1.14.x和Eigen 3.2.92这几个关键组件在新系…...

编程新知 2026/3/31 17:04:43