一、Next.js 的"约定式路由"------不用配置的路由系统
Next.js的一个显著特征就是:"文件即路由"。
在app/目录下，每个文件夹和文件名都会自动映射成路由地址。
编辑
比如当我们的目录结构是这样，那么当我们切换到dashboard目录就会自动跳转到layout组件，其他的文件夹customers和invoices（包含page文件）会自动嵌套layout子路由。路径为文件名称，page.tsx是页面入口。
这样比React Router手动配置更简洁，也让项目结构与路由层级天然对应。
二、Layout：一处定义，多层嵌套
Next.js 提供了一个非常优雅的布局机制：每个文件夹下的 layout.tsx 都能为其子路由提供共享布局。
编辑
当我们访问/dashboard时：
会先渲染全局app/layout.tsx，然后渲染app/dashboard/layout.tsx,最后渲染app/dashboard/page.tsx。
嵌套顺序为RootLayout → DashboardLayout → DashboardPage。
layout文件是共享的UI外壳，页面切换时layout不会重新渲染，只会替换内部内容。
三、Tailwind CSS：快速、语义化的样式开发
Next.js 官方项目创建时（create-next-app）可以直接选择 Tailwind CSS，安装即开箱可用。
特点：无需独立写CSS文件，所以样式直接卸载className，按需生产样式，性能极高。
ini
<Link
href="/login"
className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
>
<span>Log in</span> <ArrowRightIcon className="w-5 md:w-6" />
</Link>简写会是这样，对应的样式为
| 类名 | 作用 | 等价 CSS |
|---|
flex |
启用 Flex 布局 | display: flex; |
items-center |
交叉轴垂直居中 | align-items: center; |
gap-5 |
Flex 子元素之间的间距为 1.25rem（20px） |
gap: 1.25rem; |
self-start |
当前元素在父布局中顶部对齐 | align-self: flex-start; |
rounded-lg |
圆角边框（大号） | border-radius: 0.5rem; |
bg-blue-500 |
背景颜色为蓝色系列第 500 阶（主色） | background-color: #3b82f6;（默认 Tailwind 主题色） |
text-white |
文字颜色为白色 | color: #fff; |
text-sm |
字体大小 0.875rem（14px） |
font-size: 14px; |
font-medium |
字体粗细为中等 | font-weight: 500; |
transition-colors |
启用颜色渐变过渡（背景/文字） | transition-property: color, background-color; |
hover:bg-blue-400 |
鼠标悬停时背景改为蓝色 400 阶 | background-color: #60a5fa; |
md:text-base |
在中等以上屏幕（min-width: 768px）字体变大 | font-size: 1rem; |
md:w-6（图标部分） |
在中屏以上，图标宽度 1.5rem（24px） | width: 24px; |
四、Google Fonts：字体也能模块化引入
Next.js 内置了 next/font 模块，用于在构建阶段自动优化字体加载。
javascript
import { Inter, Lusitana } from "next/font/google";
export const inter = Inter({
subsets: ["latin"],
});
export const lusitana = Lusitana({
weight: "400",
subsets: ["latin"],
});优点：无需在中手动引入，构建时自动优化字体，自动生成class，避免全局污染。
当然也可以用index.module.style去写样式，但是记得引入。
编辑
五、next/image：智能图片优化组件
<Image /> 是 Next.js 提供的增强版 <img> 标签。它支持懒加载、尺寸优化、自动格式转换，提升页面性能。
ini
<Image
src="/hero-desktop.png"
alt="Hero Image"
width={1000}
height={750}
className="hidden md:block"
/>优势：自动懒加载，优化为现代格式(WebP)，避免布局抖动，必须显示显示宽高，如果不加width和height会报错。
六、clsx 工具：优雅管理动态 className
在使用 Tailwind 时，常常遇到样式条件切换的问题。
css
<button className={isActive ? 'bg-blue-500' : 'bg-gray-300'}>按钮</button>写多了很难维护，这时候用clsx。
ini
<Link
key={link.name}
href={link.href}
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": link.href === pathname,
}
)}
>可以在当前链接对应的路径和用usePathname获取浏览器路径地址相等的话，可以加上选中后的样式。
编辑
优点：条件样式简洁，可读性强，与Tailwind完美配合
七、总结
| 模块 | 功能 | 优势 |
|---|---|---|
| 约定式路由 | 文件即路由 | 无需配置 router |
| layout | 嵌套布局 | 页面切换更流畅 |
| Tailwind CSS | 原子化样式 | 快速开发、低耦合 |
| next/font | 字体模块化 | 构建时优化 |
| next/image | 智能图片 | 自动懒加载、格式优化 |
| clsx | 动态 className | 条件样式简洁 |