Next.js 入门指南

Next.js 是什么？

Next.js 是一个基于 React 的全栈框架，它提供了开箱即用的路由、渲染和数据获取方案。

核心概念

文件系统路由

Next.js 使用文件系统来定义路由。在 app 目录下创建文件夹和文件，就自动生成了对应的路由：

• app/page.tsx → /
• app/about/page.tsx → /about
• app/posts/[slug]/page.tsx → /posts/hello-world

服务端组件

默认情况下，Next.js 中的组件都是 React Server Component，在服务端渲染，不会发送大量 JS 到客户端。这使得页面加载更快。

布局系统

通过 layout.tsx 文件可以创建共享布局，导航时布局保持状态不重新渲染。

为什么选它做博客？

对于个人博客来说，Next.js 提供了几个很好的特性：

1. SSG（静态生成）：构建时生成静态 HTML，访问速度快
2. SEO 友好：服务端渲染，搜索引擎可以正确索引
3. 部署简单：推送到 GitHub，Vercel 自动部署