-
CSS 关系选择器 ~ 后续兄弟选择器
后续兄弟选择器 Subsequent-sibling combinator 符号:~,使用波浪号表示后续兄弟选择器。 The subsequent-sibling combinator (~, a
2025-11-03, Views: 15 , Topics: CSS
-
CSS 关系选择器 > 子组合器
子组合器 child combinator 符号:>,使用大于符号表示子组合器。 The child combinator (>) is placed between two CSS select
2025-11-02, Views: 17 , Topics: CSS
-
Next.js 初始化工程
命令 创建工程,命令执行完成后无需再执行npm install安装依赖,已自动安装完毕。 npx create-next-app@latest 输出 PS C:\code> npx create-
2025-11-01, Views: 30 , Topics: Next.js
-
Next.js 服务端定时任务
需求 定时统计数据库中的信息。 实现 利用Node.js的模块缓存,在layout.tsx中导入脚本模块,模块中使用setInterval定时读取数据库。 代码 脚本 index.ts async
2025-10-31, Views: 45 , Topics: Next.js
-
Next.js 将 URL Search Params 查询参数的 string 类型转为 number 类型
需求 列表分页,需要将page参数转为string。 Next.js中的查询参数都是string、string[]或undefined。 string 转 number 使用+快速将string转n
2025-10-30, Views: 48 , Topics: Next.js
-
Next.js 获取 URL Search Params 查询参数
Server Component 使用Next.js内置的searchParams,类型为Promise。 export default async function Home({searchPar
2025-10-29, Views: 63 , Topics: Next.js
-
Next.js 路由 App Router
介绍 Next.js使用基于文件系统的路由。 Next.js uses file-system based routing, meaning you can use folders and fil
2025-10-28, Views: 73 , Topics: Next.js
-
Next.js 构建后端 API
基于文件系统的路由 Next.js中App Router是基于文件系统的路由,即:根据创建的文件夹名称来定义API的路径。 route.js 在文件夹中定义route.ts文件,编写GET、POST
2025-10-27, Views: 87 , Topics: Next.js
-
Next.js 定义样式组件减少 HTTP 请求
样式组件 为了减少HTTP请求CSS样式,将样式作为组件。 错误信息 可能会出现以下错误。 ⨯ ./src/app Invalid import 'client-only' cannot be i
2025-10-26, Views: 94 , Topics: Next.js
-
Next.js i18n 国际化 next-intl
安装 npm install next-intl 创建相应文件夹 根目录:messages文件夹 en.json:英文 zh.json:中文 xx.json:对应语言 源码目录:i18n文件
-
Next.js SEO 设置 robots 文件
robots.txt 在src-app目录下创建robots.txt文件。 内容 User-agent: * Disallow: /admin/ Sitemap: /sitemap.xml 参考
-
Next.js CSS Module 全局样式穿透解决样式不生效问题
场景 场景一 引入的highlight.css代码高亮样式无效。 场景二 使用JavaScript动态添加的样式不生效。 原因 场景一 使用了page.module.css模块化样式,Next.js
-
Next.js CSS 文件
.moudle.css Next.js中CSS样式文件以.module.css后缀结尾。 使用 以.module.css结尾的文件可以导入styles对象。 import styles from "
2025-10-22, Views: 118 , Topics: Next.js
-
Next.js 全局样式与局部样式
全局样式 app/global.css 新建一个.css结尾的文件即可(不一定是global名字也可以)。 body { padding: 20px 20px 60px; max-width
2025-10-21, Views: 146 , Topics: Next.js
-
Next.js 使用 giscus 评论插件
注意 Next.js默认会将script脚本放在DOM渲染完成后执行。 不能像放在静态文件或模板引擎渲染的HTML中。 代码 使用.giscus类选择器,将指定的元素放在合适的位置即可。 React
-
Next.js 实现 SPA 单页面应用
方法 Link 组件 使用next/link下的<Link>组件,指定href。 <Link href="/about">关于</Link> useRouter() 使用next/navigati
2025-10-19, Views: 127 , Topics: Next.js
-
Next.js 设置统一加载页面
loading.tsx 与page.tsx同一层目录中新建loading.tsx组件。 Component import styles from './Loading.module.css'; e
2025-10-18, Views: 109 , Topics: Next.js
-
Next.js App Router 设置统一错误页面
error 页面 src/app目录下新建error.tsx。 且代码第一行必须指定'use client',否则会认定为服务端error接口。 代码 'use client' export de
2025-10-17, Views: 112 , Topics: Next.js
-
Next.js App Router 设置统一 404 页面
404 页面 src/app目录下新建not-found.tsx文件。 名称必须是not-found,后缀可以是jsx、tsx等。 代码 not-found.tsx文件内容 export defau
2025-10-16, Views: 119 , Topics: Next.js
-
Next.js 跳转到 not-found.tsx 和 error.tsx 定义的页面
not-found 跳转到not-found.tsx定义的页面。 使用notFound()方法即可。无需return。 import {notFound} from "next/navigation
2025-10-15, Views: 137 , Topics: Next.js