一、为什么我会认真学 Next.js
我最开始接触 Next.js 时，并不是冲着“新框架”去的，而是因为它把路由、布局、服务端渲染、SEO 这些真实项目会碰到的问题放到了同一套框架里。
如果我一直只停留在 React 单页应用阶段，很多事情其实是练不到的。比如页面级布局该怎么组织、文章详情页怎么做静态生成、动态路由和搜索引擎之间是什么关系，这些都需要在一个更接近真实项目的环境里理解。
对我来说，学习 Next.js 的核心不是“会用几个 API”，而是逐渐建立一种页面工程思维。
二、我给自己拆的学习顺序
我没有一上来就想把博客做成完整版，而是按更稳的顺序推进：
| 阶段 | 目标 | 重点练习 |
|---|---|---|
| 第一阶段 | 把页面搭出来 | 布局、组件拆分、响应式 |
| 第二阶段 | 抽离假数据 | 列表渲染、props、统一内容源 |
| 第三阶段 | 动态路由 | slug、params、404 |
| 第四阶段 | 内容渲染 | Markdown / MDX、文章结构 |
| 第五阶段 | 上线部署 | 构建、环境差异、线上验证 |
这样拆的好处是，我每次只处理一个主要问题，不会同时被 UI、数据、部署、配置压住。
三、这一阶段我重点练什么
我现在最重视的是这几个基础能力：
- 能不能先把页面结构拆清楚
- 能不能让组件只负责一件事
- 能不能让数据和视图分离
- 能不能在改功能时不把原来的页面打乱
这些听起来不像“炫酷功能”，但它们决定了项目能不能持续往下做。
比如首页里的文章卡片、项目卡片、标题区块，如果我一开始就拆清楚，后面加筛选、加主题切换、加 MDX 时就不会特别痛苦。
四、哪些概念是我后来才真正理解的
以前我以为“学会 Next.js”就是会写 app/page.tsx，后来才发现真正重要的是理解下面这些概念：
1. 路由不是字符串跳转那么简单
当我写：
<Link href="/blog/learn-nextjs">阅读文章</Link>我其实是在依赖一整套路由约定。/blog/[slug] 对应的是一个动态段，页面拿到的不是固定路径，而是运行时的参数。
2. 页面结构最好早一点稳定
像这样：
<main>
<HeroSection />
<FeaturedProjects />
<LatestPosts />
</main>当页面层只有“区块组织”时，后面加数据、换样式、做响应式都更从容。
3. 内容系统会反过来影响代码结构
一旦博客开始支持 Markdown 或 MDX，文章就不再只是“几段写死在 JSX 的文字”，而会变成内容文件、元数据、路由和渲染器一起协作的系统。
官方文档Next.js App Router 的 MDX 指南如果你想看 Next.js 官方推荐的 MDX 接入方式、文件结构和组件映射方式，这篇文档非常值得反复看。五、我现在会怎么开始一个新页面
如果现在让我重新开一个页面，我大概率会先写一个很轻的骨架：
export default function BlogPage() {
return (
<main className="pb-16">
<section>{/* 页面头部 */}</section>
<section>{/* 筛选与列表 */}</section>
<section>{/* 分页 */}</section>
</main>
);
}然后再问自己：
- 哪些区块会重复
- 哪些数据以后会来自统一内容源
- 哪些交互状态应该进 URL
这样做虽然慢一点，但会让后面的迭代轻松很多。
六、下一步我准备怎么继续
接下来我会继续把文章系统从普通 Markdown 迁到更贴近官方路线的 MDX，让文章内容变成真正可扩展的内容模块。
这意味着我之后不仅能写普通段落、列表和表格，还能逐步把文章里的提示块、代码演示甚至自定义组件也纳入内容系统。
如果说前几步是在练“页面怎么搭”，那这一步开始就是在练“内容系统怎么长出来”。