Next.js 入门实战：从零构建你的第一个 SSR 应用

序言

在当今前端开发中，Next.js 已成为构建高性能、SEO 友好应用的必备框架。今天我将带大家从零开始创建一个 Next.js 项目，并深入解析其服务器端渲染（SSR）机制的优势。

创建 Next.js 项目

Next.js 提供了便捷的脚手架工具，让我们可以快速初始化项目：

bash 复制代码

npx create-next-app@latest my-todo

这里使用 npx 命令的优势在于：

无痕使用：无需全局安装依赖，避免污染全局环境
即用即走：非常适合快速尝试新技术
版本控制：始终使用最新版本的 create-next-app

当然，你也可以选择全局安装：

bash 复制代码

npm i -g create-next-app@latest

Next.js 与传统 React 应用的区别

特性	React (CSR)	Next.js (SSR)
渲染位置	客户端浏览器	服务器端
初始加载速度	较慢（需下载所有JS）	较快（服务器返回完整HTML）
SEO 友好度	较差（爬虫难以解析）	优秀（直接返回完整内容）
适用场景	后台管理系统	内容型网站、企业站

理解 SSR 的核心优势

1. SEO 优化

传统 React 应用（CSR）在浏览器端渲染时，初始 HTML 只有一个空容器：

html 复制代码

<div id="root"></div>

搜索引擎爬虫抓取时，只能看到一个空页面，严重影响 SEO。而 Next.js 的 SSR 在服务器端就完成了渲染，返回的是完整的 HTML 内容：

html 复制代码

<h1>首页</h1>
<div>我在秋招，我去字节</div>

2. 性能提升

用户无需等待所有 JavaScript 加载完成就能看到内容，大大提升了首屏加载速度。

实战：创建你的第一个页面

在 Next.js 项目中，页面组件位于 app 目录下。我们创建一个简单的首页：

tsx 复制代码

// app/page.tsx
import Image from "next/image";

export default function Home() {
  return (
    <>
      <h1>首页</h1>
      <div>我在秋招，我去字节</div>
    </>
  );
}

这个组件会在服务器端被渲染成 HTML，然后发送到客户端。注意我们使用了 Next.js 内置的 Image 组件，它可以自动优化图片性能。

运行你的 Next.js 应用

在项目目录下执行：

bash 复制代码

npm run dev

访问 http://localhost:3000，你将看到服务器渲染的页面。

如何验证 SSR 效果？

在浏览器中右键点击"查看页面源代码"
你将看到完整的 HTML 内容，而非空容器
这意味着搜索引擎爬虫可以直接抓取到页面内容

使用场景推荐

Next.js 特别适合以下场景：

内容型网站：博客、新闻站点（SEO 关键）
电商平台：商品列表页需要被搜索引擎收录
企业官网：需要良好的搜索引擎排名
掘金等技术社区：内容需要被广泛传播和搜索

总结

Next.js 通过 SSR 解决了传统 React 应用的两大痛点：

SEO 不友好：服务器直接返回完整 HTML
首屏加载慢：用户立即看到内容而非空白页