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

next.js-学习2

article 2026/4/3 7:14:20

next.js-学习2

    • 1. https://nextjs.org/learn/dashboard-app/getting-started
    • 2. 模拟的数据
    • 3. 添加样式
    • 4. 字体，图片
    • 5. 创建布局和页面
    • 页面导航

目录

1. https://nextjs.org/learn/dashboard-app/getting-started

  • /app: Contains all the routes, components, and logic for your application, this is where you’ll be mostly working from.
  • /app/lib: Contains functions used in your application, such as reusable utility functions and data fetching functions.
  • /app/ui: Contains all the UI components for your application, such as cards, tables, and forms. To save time, we’ve pre-styled these components for you.
  • /public: Contains all the static assets for your application, such as images.
  • Config Files: You’ll also notice config files such as next.config.ts at the root of your application. Most of these files are created and pre-configured when you start a new project using create-next-app. You will not need to modify them in this course.

2. 模拟的数据

app/lib/placeholder-data.ts 这些是模拟的数据

3. 添加样式

  1. /app/layout.tsx中加入**import ‘@/app/ui/global.css’;**支持全局样式，global.css中@tailwind是css框架

  2. 在代码中加@tailwind样式

    <h1 className="text-blue-500">I'm blue!</h1>
<divclassName="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"
/>

    如果是不想直接加可以封装个css类引用，创建文件/app/ui/home.module.css,写入

    .shape {height: 0;width: 0;border-bottom: 30px solid black;border-left: 20px solid transparent;border-right: 20px solid transparent;
}

    在/app/page.tsx中导入import styles from ‘@/app/ui/home.module.css’;

    使用

    ，这样可以有效的隔离样式的侵入性

    动态设置样式，/app/ui/invoices/status.tsx中的clx，可以根据传入的status动态显示样式，代码如下：

import clsx from 'clsx';export default function InvoiceStatus({ status }: { status: string }) {return (<spanclassName={clsx('inline-flex items-center rounded-full px-2 py-1 text-sm',{'bg-gray-100 text-gray-500': status === 'pending','bg-green-500 text-white': status === 'paid',},)}>// ...
)}

4. 字体，图片

/app/ui/fonts.ts 如果自己加字体浏览器会二次渲染，布局变化可能会影响性能，如果是用next/font在初始化加载的时候字体会嵌入进去，不会二次渲染，性能提升。

添加谷歌字体，创建文件/app/ui/fonts.ts

import { Inter } from 'next/font/google';export const inter = Inter({ subsets: ['latin'] });//增加第二种字体
import { Lusitana } from 'next/font/google';export const lusitana = Lusitana({subsets: ['latin'],weight: ['400', '700'], // Normal and bold weights
});

在/app/layout.tsx中使用

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts'; //引入字体
export default function RootLayout({children,
}: {children: React.ReactNode;
}) {//使用字体return (<html lang="en"><body className={`${inter.className} antialiased`}>{children}</body></html>);
}

在/app/page.tsx中使用

import { lusitana } from '@/app/ui/fonts'; //引入字体
//修改p标签的字体，这次页面字体整体变小了<p className={lusitana.className}>

加载图片，不同大小屏幕显示正常，优化加载，在/app/page.tsx中使用

原文参考：https://nextjs.org/learn/dashboard-app/optimizing-fonts-images#why-optimize-images

hidden md:block//在小屏幕（md 以下，比如手机）上，元素会 隐藏，因为 hidden 优先级较高。

当屏幕宽度达到 md 尺寸（通常是平板和桌面设备）及以上时，元素会 显示，且显示为块级元素（block）。

import Image from 'next/image';//引入图片
<Imagesrc="/hero-desktop.png"width={1000}height={760}className="hidden md:block"//桌面可见alt="Screenshots of the dashboard project showing desktop version"/><Imagesrc="/hero-mobile.png"width={1000}height={760}className="block md:hidden"//平板或者手机可见alt="Screenshots of the dashboard project showing desktop version"/>

5. 创建布局和页面

​ layout.tsx：为多个页面提供共享布局。

​ page.tsx：为每个路由提供独特的页面内容

例如这种嵌套布局。举例: 如果你有一个管理页面，你可以在管理页面的 layout.tsx 中定义一个不同的布局（这里的布局也会用根布局的布局属性），而其他页面仍然使用根布局。

/app/layout.tsx         // 根布局/admin/layout.tsx       // 管理页面布局/dashboard/page.tsx/settings/page.tsx/home/page.tsx

创建：/app/dashboard/page.tsx，访问：http://localhost:3000/dashboard

export default function Page() {return <p>Dashboard Page</p>;
}

app结构

创建面板

/app/dashboard/customers/page.tsx

export default function Page() {return <p>Customers Page</p>;
}

/app/dashboard/invoices/page.tsx

export default function Page() {return <p>Invoices Page</p>;
}

/app/dashboard/layout.tsx 导入SideNav 组件到布局

import SideNav from '@/app/ui/dashboard/sidenav';export default function Layout({ children }: { children: React.ReactNode }) {return (<div className="flex h-screen flex-col md:flex-row md:overflow-hidden"><div className="w-full flex-none md:w-64"><SideNav /></div><div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div></div>);
}

如图：

在这里插入图片描述

页面导航

/app/ui/dashboard/nav-links.tsx使用link标签替换a标签，这样点击导航就不会全局刷新了，避免了全局加载。

import Link from 'next/link';//添加link
a标签改为 </Link>标签

/app/ui/dashboard/nav-links.tsx使用usePathname和clsx让点击导航栏，动态显示点击的那个导航栏变蓝

'use client';//改为客户端组件，因为usePathname需要浏览器支持
import { usePathname } from 'next/navigation'; //使用usePathname
import clsx from 'clsx';const pathname = usePathname(); //NavLinks()使用//link中的className改为className={clsx('flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',{'bg-sky-100 text-blue-600': pathname === link.href,},)}

在这里插入图片描述

相关文章：

next.js-学习2

next.js-学习2 1. https://nextjs.org/learn/dashboard-app/getting-started2. 模拟的数据3. 添加样式4. 字体&#xff0c;图片5. 创建布局和页面页面导航 1. https://nextjs.org/learn/dashboard-app/getting-started /app: Contains all the routes, components, and logic …...

编程日记 2026/3/17 13:52:36

视频推拉流EasyDSS直播点播平台授权激活码无效，报错400的原因是什么？

在当今数字化浪潮中&#xff0c;视频推拉流 EasyDSS 视频直播点播平台宛如一颗璀璨的明珠&#xff0c;汇聚了视频直播、点播、转码、精细管理、录像、高效检索以及时移回看等一系列强大功能于一身&#xff0c;全方位构建起音视频服务生态。它既能助力音视频采集&#xff0c;精准…...

编程日记 2026/3/16 1:26:25

【论文详解】Transformer 论文《Attention Is All You Need》能够并行计算的原因

文章目录 前言一、传统 RNN/CNN 存在的串行计算问题二、Transformer 如何实现并行计算&#xff1f;三、Transformer 的 Encoder 和 Decoder 如何并行四、结论 前言 亲爱的家人们&#xff0c;创作很不容易&#xff0c;若对您有帮助的话&#xff0c;请点赞收藏加关注哦&#xff…...

编程日记 2026/3/21 23:09:34

Fisher信息矩阵（Fisher Information Matrix，简称FIM）

Fisher信息矩阵简介 Fisher信息矩阵&#xff08;Fisher Information Matrix&#xff0c;简称FIM&#xff09;是统计学和信息理论中的一个重要概念&#xff0c;广泛应用于参数估计、统计推断和机器学习领域。它以统计学家罗纳德费希尔&#xff08;Ronald Fisher&#xff09;的名…...

编程日记 2026/3/14 0:12:42

基础设施安全（Infrastructure Security）是什么？

基础设施安全&#xff08;Infrastructure Security&#xff09;指的是保护IT基础设施&#xff08;包括物理和云端的服务器、网络设备、存储、数据库等&#xff09;免受网络攻击、数据泄露、未授权访问、系统故障等威胁的各种安全措施和技术。 1. 基础设施安全的主要组成部分 &…...

编程日记 2026/3/24 5:13:36

[杂学笔记]OSI七层模型作用、HTTP协议中的各种方法、HTTP的头部字段、TLS握手、指针与引用的使用场景、零拷贝技术

1.OSI七层模型作用 物理层&#xff1a;负责光电信号的传输&#xff0c;以及将光电信号转化为二进制数据数据链路层&#xff1a;主要负责将收到的二进制数据进一步的封装为数据帧报文。同时因为数据在网络中传递的时候&#xff0c;每一个主机都能够收到报文数据&#xff0c;该层…...

编程日记 2025/12/14 5:45:09

Framework层JNI侧Binder

目录 一&#xff0c;Binder JNI在整个系统的位置 1.1 小结 二&#xff0c;代码分析 2.1 BBinder创建 2.2 Bpinder是在查找服务时候创建的 2.3 JNI实现 2.4 JNI层android_os_BinderProxy_transact 2.5 BPProxy实现 2&#xff09;调用IPCThreadState发送数据到Binder驱动…...

编程日记 2026/3/10 20:20:42

Windows 图形显示驱动开发-WDDM 3.2-自动显示切换(九)

面板驱动程序 显示器驱动程序是根据从 EDID 生成的即插即用 (PnP) 硬件 ID 加载的。 由于 EDID 保持不变&#xff0c;当任何一个 GPU 控制内部面板时&#xff0c;都会加载面板驱动程序。 这两个驱动程序将显示相同的亮度功能。 因此&#xff0c;加载应该不会造成任何问题&…...

编程日记 2026/3/24 3:10:20

Excel大文件拆分

import pandas as pddef split_excel_file(input_file, output_prefix, num_parts10):# 读取Excel文件df pd.read_excel(input_file)# 计算每部分的行数total_rows len(df)rows_per_part total_rows // num_partsremaining_rows total_rows % num_partsstart_row 0for i i…...

编程日记 2026/3/15 21:42:40

OpenCV计算摄影学（7）HDR成像之多帧图像对齐的类cv::AlignMTB

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 该算法将图像转换为‌中值阈值位图‌&#xff08;Median Threshold Bitmap&#xff0c;MTB&#xff09;&#xff1a; 1.位图生成‌&#xff1a;…...

编程日记 2026/3/31 0:03:55

JWT+redis实现三大令牌管理方案深度解析

三种令牌管理方案对比与评估 1. 仅续期Redis&#xff08;不生成新令牌&#xff09; 实现原理 通过延长Redis中的令牌有效期维持会话&#xff0c;JWT本身不包含动态过期时间。 优点 ✅ 低开销&#xff1a;无需生成新令牌&#xff0c;减少JWT签名计算成本。 ✅ 简单实现&#x…...

编程日记 2026/3/31 5:04:10

北京大学DeepSeek提示词工程与落地场景（PDF无套路免费下载）

近年来&#xff0c;大模型技术飞速发展&#xff0c;但许多用户发现&#xff1a;即使使用同一款 AI 工具&#xff0c;效果也可能天差地别——有人能用 AI 快速生成精准方案&#xff0c;有人却只能得到笼统回答。这背后的关键差异&#xff0c;在于提示词工程的应用能力。 北京大…...

编程日记 2026/1/31 20:24:45

Axure PR 9 中继器 03 翻页控制

大家好&#xff0c;我是大明同学。 接着上期的内容&#xff0c;这期内容&#xff0c;我们来了解一下Axure中继器图表翻页控制。 预览地址&#xff1a;https://pvie5g.axshare.com 翻页控制 1.打开上期RP 文件&#xff0c;在元件库中拖入一个矩形&#xff0c;宽值根据业务实际…...

编程日记 2026/4/2 18:23:56

IO流（师从韩顺平）

文章目录 文件什么是文件文件流 常用的文件操作创建文件对象相关构造器和方法应用案例 获取文件的相关信息应用案例 目录的操作和文件删除应用案例 IO 流原理及流的分类Java IO 流原理IO流的分类 IO 流体系图-常用的类IO 流体系图&#xff08;重要&#xff01;&#xff01;&…...

编程日记 2026/4/2 13:46:10

基于Javase的停车场收费管理系统

基于Javase的停车场收费管理系统 停车场管理系统开发文档 项目概述 1.1 项目背景 随着现代化城市的不断发展&#xff0c;车辆数量不断增加&#xff0c;停车难问题也日益突出。为了更好地管理停车场资 源&#xff0c;提升停车效率&#xff0c;需要一个基于Java SE的停车场管理…...

编程日记 2025/8/4 1:10:35

Exoplayer(MediaX)实现音频变调和变速播放

在K歌或录音类应用中变调是个常见需求&#xff0c;比如需要播出萝莉音/大叔音等。变速播放在影视播放类应用中普遍存在&#xff0c;在传统播放器Mediaplayer中这两个功能都比较难以实现&#xff0c;特别在低版本SDK中&#xff0c;而Exoplayer作为google官方推出的Mediaplayer替…...

编程日记 2026/3/20 8:01:00

Spring Boot集成Jetty、Tomcat或Undertow及支持HTTP/2协议

目录 一、常用Web服务器 1、Tomcat 2、Jetty 3、Undertow 二、什么是HTTP/2协议 1、定义 2、特性 3、优点 4、与HTTP/1.1的区别 三、集成Web服务器并开启HTTP/2协议 1、生成证书 2、新建springboot项目 3、集成Web服务器 3.1 集成Tomcat 3.2 集成Jetty 3.3 集成…...

编程日记 2026/3/12 22:23:51

《Python实战进阶》专栏 No 5：GraphQL vs RESTful API 对比与实现

《Python实战进阶》专栏包括68集&#xff0c;每一集聚焦一个中高级技术知识点&#xff0c;涵盖Python在Web开发、数据处理、自动化、机器学习、并发编程等领域的应用&#xff0c;系统梳理Python开发者的知识集。本集的主题为&#xff1a; No4 : GraphQL vs RESTful API 对比与实…...

编程日记 2026/3/12 19:51:40

类和对象——static修饰类的成员

static修饰类的成员 static成员1 static成员的概念2 特性 static成员 有时会有这样的需求&#xff1a;计算程序中创建出了多少个类的对象&#xff0c;以及多少个正在使用的对象。 因为构造函数和析构函数都只会调用一次&#xff0c;所以可以通过设置生命周期和main函数一致的…...

编程日记 2026/3/18 13:12:35

RabbitMQ系列（七）基本概念之Channel

RabbitMQ 中的 Channel&#xff08;信道&#xff09; 是客户端与 RabbitMQ 服务器通信的虚拟会话通道&#xff0c;其核心作用在于优化资源利用并提升消息处理效率。以下是其核心机制与功能的详细解析&#xff1a; 一、Channel 的核心定义 虚拟通信链路 Channel 是建立在 TCP 连…...

编程日记 2026/3/17 1:26:57

你对 Spring Cloud 的理解

Spring Cloud 是一个基于 Spring Boot 的微服务架构开发工具集&#xff0c;为开发者提供了快速构建分布式系统的一系列解决方案&#xff0c;涵盖了服务发现、配置管理、熔断器、智能路由、微代理、控制总线等多个方面。 从核心组件来看&#xff1a; 服务发现&#xff1a;以 Eu…...

编程日记 2026/3/31 21:33:52

MYSQL 5.7数据库，关于1067报错 invalid default value for，解决方法！

???作者&#xff1a; 米罗学长 ???个人简介&#xff1a;混迹java圈十余年&#xff0c;精通Java、小程序、数据库等。 ???各类成品java毕设 。javaweb&#xff0c;ssm&#xff0c;springboot&#xff0c;mysql等项目&#xff0c;源码丰富&#xff0c;欢迎咨询。 ???…...

编程日记 2026/3/18 15:21:13

C# Enumerable类 之 数据筛选

总目录 前言 在 C# 中&#xff0c;System.Linq.Enumerable 类是 LINQ&#xff08;Language Integrated Query&#xff09;的核心组成部分&#xff0c;它提供了一系列静态方法&#xff0c;用于操作实现了 IEnumerable 接口的集合。通过这些方法&#xff0c;我们可以轻松地对集合…...

编程日记 2026/3/12 0:09:06

运维基础知识（一）

一：SSH端口 首先SSH是什么？ SSH（Secure Shell）是Linux、Unix、Mac及其他网络设备最常用的远程CLI管理协议，SSH使用秘钥对数据进行加密，保证了远程管理数据的安全性。 Secure Shell (SSH) 是一种网络协议，允许用户通过加密的通道安全地访问另一台计算机。SSH广泛用于远程…...

编程日记 2026/3/19 9:20:53

权重生成图像

简介 前面提到的许多生成模型都有保存了生成器的权重，本章主要介绍如何使用训练好的权重文件通过生成器生成图像。 但是如何使用权重生成图像呢？ 一、参数配置 ima_size 为图像尺寸，这个需要跟你模型训练的时候resize的时候一样。 latent_dim为噪声维度，一般的设置都是…...

编程日记 2026/3/19 13:54:48

【Linux基础】Linux下的C编程指南

目录 一、前言 二、Vim的使用 2.1 普通模式 2.2 插入模式 2.3 命令行模式 2.4 可视模式 三、GCC编译器 3.1 预处理阶段 3.2 编译阶段 3.3 汇编阶段 3.4 链接阶段 3.5 静态库和动态库 四、Gdb调试器 五、总结 一、前言 在Linux环境下使用C语言进行编程是一项基础且…...

编程日记 2026/4/2 9:15:06

DeepSeek-OpenSourceWeek-第四天-Optimized Parallelism Strategies

DeepSeek 在 #OpenSourceWeek（开源周） 的第四天推出了两项新工具，旨在让深度学习更快、更高效：**DualPipe** 和 **EPLB**。 DualPipe 定义：DualPipe 是一种用于 V3/R1 训练中计算与通信重叠的双向pipline并行算法。 作用：它通过实现前向和后向计算-通信阶段的完全重叠，减…...

编程日记 2026/3/20 2:25:12

Python Cookbook-2.15 用类文件对象适配真实文件对象

任务 需要传递一个类似文件的对象(比如&#xff0c;调用urllib.urlopen 返回的结果)给一个函数或者方法&#xff0c;但这个函数或方法要求只接受真实的文件对象(比如&#xff0c;像marshalload 这样的函数)。 解决方案 为了过类型检查这一关&#xff0c;我们需要将类文件对象…...

编程日记 2026/4/2 17:49:28

浅谈HTTP及HTTPS协议

1.什么是HTTP&#xff1f; HTTP全称是超文本传输协议&#xff0c;是一种基于TCP协议的应用非常广泛的应用层协议。 1.1常见应用场景 一.浏览器与服务器之间的交互。 二.手机和服务器之间通信。 三。多个服务器之间的通信。 2.HTTP请求详解 2.1请求报文格式 我们首先看一下…...

编程日记 2026/3/30 22:04:33

Pytest自定义测试用例执行顺序

文章目录 1.前言2.pytest默认执行顺序3.pytest自定义执行顺序 1.前言 在pytest中&#xff0c;我们可能需要自定义测试用例的执行顺序&#xff0c;例如登陆前需要先注册&#xff0c;这个时候就需要先执行注册的测试用例再执行登录的测试用例。 本文主要讲解pytest的默认执行顺序…...

编程日记 2026/4/2 9:20:12