构建现代 Web 应用：实践指南

现代技术栈

2024 年构建 Web 应用，意味着在一个丰富但有主见的生态系统中找到自己的路径。Next.js + TypeScript + Tailwind CSS 的组合，已成为注重开发体验与生产性能的团队的事实标准。

基于文件的路由

Next.js App Router 引入了基于目录的路由模型。app/ 下的每个文件夹都成为一个路由片段，布局在导航间持久化，Server Components 允许在组件级别进行数据获取，无需客户端瀑布式请求。

组件架构

好的组件架构遵循一个简单原则：保持小而专注。一个组件应该把一件事做好。组合优于继承，Props 优于全局状态。

export function Card({ title, description }: CardProps) {
  return (
    <div className="rounded-2xl border border-white/10 p-6">
      <h3 className="text-lg font-semibold">{title}</h3>
      <p className="text-sm text-white/60 mt-2">{description}</p>
    </div>
  )
}

数据获取

Server Components 让数据获取变得简单直接。在组件树中直接 fetch 数据并向下传递。对于需要同步的客户端状态，SWR 提供了简洁可靠的解决方案。

部署

Vercel 仍然是从代码到生产的最简路径。零配置部署、自动预览环境和边缘渲染，无需额外的基础设施工作。

结语

现代 Web 技术栈奖励简洁。从默认值出发，理解底层原语，只在问题需要时才增加复杂性。