Next.js 学习笔记：从约定式路由到 Tailwind、Image、Font 优雅整合。一、Next.js 的“

一、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，按需生产样式，性能极高。

   <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 模块，用于在构建阶段自动优化字体加载。

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> 标签。它支持懒加载、尺寸优化、自动格式转换，提升页面性能。

 <Image
            src="/hero-desktop.png"
            alt="Hero Image"
            width={1000}
            height={750}
            className="hidden md:block"
          />

优势：自动懒加载，优化为现代格式(WebP)，避免布局抖动，必须显示显示宽高，如果不加width和height会报错。

六、clsx 工具：优雅管理动态 className

在使用 Tailwind 时，常常遇到样式条件切换的问题。

<button className={isActive ? 'bg-blue-500' : 'bg-gray-300'}>按钮</button>

写多了很难维护，这时候用clsx。

<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	条件样式简洁

Next.js 学习笔记：从约定式路由到 Tailwind、Image、Font 优雅整合。