type
Post
status
Published
date
Nov 30, 2025
slug
nextjs-003
summary
Next.js 路由基础
tags
开发
建站
Next.js
category
编程学习
icon
password
Next.js 路由基础
Next.js 采用基于文件系统的路由机制，这意味着您只需创建文件和文件夹，框架就会自动为您生成对应的路由结构。这种约定优于配置的设计理念，让路由管理变得简单而直观。
文件系统路由的工作原理
在 Next.js 中，app 目录下的每个文件夹都代表一个路由段（route segment），并直接映射到 URL 路径。无需配置路由表，框架会根据您的文件结构自动处理。
page(页面)
layout && template
layout(布局) 布局是多个页面共享UI，例如导航栏、侧边栏、底部等。挂载一次template(模板) 基本功能跟布局一样，只是不会保存状态。生命周期会重新走布局和模板的特点就是：
- 布局嵌套：支持多层布局嵌套，构建复杂的页面结构
- 状态管理：布局会在页面切换时保持状态，而模板会重新渲染，useeffect也会重新执行
- 根布局：app/layout.tsx 是必须存在的根布局文件
- 渲染顺序：当布局和模板同时存在时，渲染顺序为 layout → template → page
目录结构如下:
app/blog/layout.tsx
app/blog/template.tsx
app/blog/a/page.tsx
app/blog/b/page.tsx
loading(加载)
Next.js的loading是借助了
Suspense实现的，Suspense的具体用法请参考Suspense 组件app/blog/loading.tsx
app/blog/a/page.tsx
error(错误)
Next.js的error是借助了
Error Boundary实现的。必须是客户端组件app/blog/error.tsx
app/blog/a/page.tsx
not-found(404)
其实Next.js 默认会生成一个404页面，但我们可能自定义404页面，只需要在app目录下创建一个not-found.tsx文件即可
app/not-found.tsx
预计学习时间: 20 分钟
难度级别: 初级 🟢
笔记1
区别分析
第一种写法
第二种写法
主要区别
1. 类型安全性
- 第一种：参数对象是可变的，函数内部可以修改
children属性
- 第二种：参数对象是只读的，TypeScript 会阻止任何修改尝试
2. 编译时检查
3. 最佳实践
- 第一种：适用于简单场景，但缺乏额外的安全保障
- 第二种：推荐做法，特别是在 React 组件中，因为：
- 防止意外修改 props
- 更好的类型安全性
- 符合 React 的最佳实践（props 应该是不可变的）
4. 实际效果
两种写法在运行时没有性能差异，都是编译时的类型检查。
Readonly<T> 只是 TypeScript 的工具类型，用于将所有属性设为只读。建议
在 React 组件中，始终使用第二种写法（带
Readonly），因为它提供了更好的类型安全性，符合 React 的不可变数据理念。笔记2
如果在验证layout 和template时， 控制台输出打印两次，可以按照下面的方式，在配置中把严格模式设置成false
reactStrictMode:false，//关闭严格模式
📎 参考文章
欢迎您在底部评论区留言，一起交流~
Loading...
