刚学前端那会儿，总看到大家在讨论 Next.js，论坛里、视频教程里到处都是它的身影。作为一个连 React 都还没完全吃透的新手，我心里直犯嘀咕：这玩意儿真有那么好？不会是大家都在跟风吧？抱着试试看的心态下载来用了一段时间，现在我总算明白为什么那么多人推荐它了 —— 对我们新手来说，它真的太友好了，而且用起来特别顺手。
一、路由？不用学！建个文件就行
记得刚开始学 React 的时候，路由这块儿差点把我劝退。第一次做一个简单的个人页面，想实现从首页跳转到相册页，对着教程里的React Router代码看了半天，BrowserRouter、Route、Link这些标签看得我眼花缭乱。好不容易照着敲出来，结果点跳转按钮没反应，刷新一下还报错，当时给我急麻了。
后来听群里的大佬说 Next.js 不用这么麻烦，我半信半疑地试了试。在项目文件夹里找到pages文件夹，新建了一个album.js文件，然后在里面写了几行简单的代码。没想到打开浏览器输入/album，页面真的出来了！就这么简单？我当时都不敢相信自己的眼睛。
export default function Album() {
return (
<div>
<h1>我的相册</h1>
<p>这里放着我拍的风景照</p>
</div>
)
}
更神奇的是，想从首页跳转到相册页，只要用 Next.js 自带的Link组件，不用写那些复杂的路由配置。比如在首页加个跳转链接，代码特别简单：
import Link from 'next/link'
export default function Home() {
return (
<div>
<h1>欢迎来到我的主页</h1>
<Link href="/album">
去看看我的相册
</Link>
</div>
)
}
我花了不到五分钟就实现了页面跳转，比之前用React Router折腾一下午的效果还好。这种 “建个文件就有路由” 的方式，对我们这种记不住太多语法的新手来说，简直是救星。而且如果想做动态路由，比如不同的文章详情页，只要建个pages/articles/[id].js，就能通过/articles/1、/articles/2访问不同内容，获取参数也很简单：
import { useRouter } from 'next/router'
export default function Article() {
const router = useRouter()
const { id } = router.query // 拿到url里的id参数
return <div>正在查看第 {id} 篇文章</div>
}
二、改代码不用等，实时看到效果
写代码最让人崩溃的是什么？莫过于改了一行代码，要等半天才能看到效果。之前用别的框架写页面，每次改个颜色、调个字体大小，都要等页面重新加载，有时候运气不好，加载完还得重新点进当前页面，重复之前的操作，特别影响思路。
用 Next.js 的时候，这种烦恼一下子就没了。上次我在写一个带计数器的小练习，代码是这样的：
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<p>当前数字：{count}</p>
<button onClick={() => setCount(count + 1)}>加1</button>
</div>
)
}
我想把数字的颜色改成蓝色，就在<p>标签里加了个style={{ color: 'blue' }}，刚在编辑器里改完保存，浏览器里的数字 “唰” 地一下就变蓝了，连计数器之前累加的数字都没变。当时我就惊呆了，这也太快了吧！
还有一次，我在页面里加了一段比较长的列表代码，本来以为会拖慢加载速度，结果页面打开还是秒开。后来才知道，Next.js 会自动把代码拆分成一小块一小块的，只有在需要的时候才加载。比如我在页面里引入了一个比较大的日历组件，它只会在用户点击 “查看日历” 按钮时才加载这个组件的代码，而不是一开始就把所有东西都塞给浏览器。虽然原理我不太懂，但能感觉到页面确实比以前流畅多了，不用再对着加载中的白屏发呆。
三、图片和样式，不用瞎琢磨
做第一个完整的小项目时，我在页面里放了几张旅游时拍的照片，结果打开页面的时候，图片要么半天加载不出来，要么突然 “蹦” 出来把下面的文字挤得乱七八糟。我问老师怎么回事，老师说图片太大了，需要压缩，还要设置宽高、加懒加载…… 听得我头都大了，这些东西我哪会啊。
试了试 Next.js 里的Image组件，没想到这么好用。只要把图片路径、宽高填进去，它好像自己就会处理。
// 用Image组件放照片
import Image from 'next/image'
export default function TravelPhoto() {
return (
<div>
<Image
src="/photos/mountain.jpg"
alt="山顶风景"
width={600}
height={400}
placeholder="blur"
blurDataURL="/placeholder.jpg"
/>
</div>
)
}
现在图片加载的时候会先显示一张模糊的小图，然后慢慢变清晰，不会突然跳出来，在手机上打开也不会模糊。就算我不小心传了一张特别大的图片，它也会自动压缩，不会让页面加载得慢吞吞的。
样式处理也简单多了。以前写 CSS，总担心起的类名和别的地方重复，比如给标题用了title这个类，结果导航栏的标题也跟着变了样。现在用 Next.js 的 CSS Modules，建一个Photo.module.css文件：
.title {
color: green;
font-size: 20px;
}
.imageContainer {
border: 2px solid #ccc;
padding: 10px;
}
然后在组件里引入，类名就只会在这个组件里生效：
// 用CSS Modules处理样式
import styles from './Photo.module.css'
import Image from 'next/image'
export default function StyledPhoto() {
return (
<div className={styles.imageContainer}>
<h2 className={styles.title}>美丽的风景</h2>
<Image
src="/photos/sea.jpg"
alt="海边风景"
width={500}
height={300}
/>
</div>
)
}
再也不用绞尽脑汁想header-title-001这种奇怪的名字了。
四、从接口拿数据，原来这么简单
刚开始学用接口数据的时候，我总是搞不清什么时候该发送请求，数据拿到后怎么显示在页面上。用普通的方法写，经常出现页面已经加载完了，数据还没回来，导致报错。
在 Next.js 里拿数据就简单多了，比如我想在页面上显示一些从接口获取的新闻列表，用getStaticProps方法就行：
export default function News({ newsList }) {
return (
<div>
<h1>最新新闻</h1>
<ul>
{newsList.map((news) => (
<li key={news.id}>{news.title}</li>
))}
</ul>
</div>
)
}
// 这个函数会在构建的时候获取数据
export async function getStaticProps() {
// 调用接口获取数据，这里用假数据模拟
const res = await fetch('https://api.example.com/news')
const newsList = await res.json()
// 把数据传给上面的News组件
return {
props: {
newsList,
},
}
}
这样写，数据会在页面加载之前就准备好，不会出现 “数据还没到，页面先报错” 的情况。上次我照着教程写，居然一次就成功了，那种成就感，比刷题还开心。而且如果数据会经常更新，还可以加个revalidate参数，让它定期更新数据，不用我们手动操作。
五、部署？点几下就行，不用懂服务器
第一次把自己写的页面部署到网上，我折腾了整整一天。又是注册服务器，又是配置环境，还要用什么 FTP 工具传文件，步骤多到记不住。好不容易弄好了，打开网址一看，页面乱得像一锅粥，原来路径没配置对。当时我就想，难道部署个网页就这么难吗？
用 Next.js 的时候，部署居然简单到让我不敢相信。跟着教程里的步骤，注册了一个Vercel账号，把代码传到 GitHub 上，然后在 Vercel 里点 “Import Project”，选择我的 GitHub 仓库，再点 “Deploy”，没过一分钟，网站就部署好了，还自动生成了一个网址。
更方便的是，后来我发现页面有个错别字，改完代码推送到 GitHub，Vercel 居然自己就更新了，不用我再登录服务器瞎折腾。整个过程就像在微信里发消息一样简单。
六、遇到问题？网上一搜就有答案
作为新手，写代码最常遇到的就是各种问题。刚开始用一个新框架，我最怕的就是遇到问题没人解答。但用 Next.js 的时候，这种担心少了很多。不管是路由跳转出了问题，还是数据获取不到，在搜索引擎里一搜，总能找到和我遇到一样问题的人，还有详细的解决办法。
社区里的教程也大多是用简单的语言讲的，很少有那种让人看不懂的专业术语。比如我想给页面加个导航栏，搜 “Next.js 导航栏”，就能找到手把手教你怎么做的教程，代码还能直接复制过来用。跟着做的时候，一步一步都能走通，不会出现 “哎？这里怎么突然多了一段代码” 的情况。对我们这种需要慢慢摸索的新手来说，这点太重要了。
真的不是跟风
现在再有人问我为什么用 Next.js，我肯定会说，不是因为大家都在用，而是因为它真的帮我解决了很多麻烦。不用死记硬背复杂的路由配置，改代码能实时看到效果，处理图片和样式不用瞎琢磨，拿数据和部署也特别简单。
它就像一个贴心的小助手，把那些复杂的、麻烦的事情都帮我们处理好了，让我们能把精力放在怎么把页面做好看、把功能实现上。作为一个还在慢慢学习的新手，这种能让我少走弯路、多体验成功的框架，谁会不爱呢？
如果你每用过Next.js，不妨也试试，说不定你也会像我一样，爱上这种轻松写代码的感觉。
