Next.js 入门：React 最流行的全栈开发框架介绍

Next.js 是现在 React 生态最火的全栈开发框架，GitHub 星标超过 10 万，Vercel 公司开发维护，现在做 React 项目几乎首选。

我用 Next.js 写过好几个项目，从博客到电商，说说它到底好在哪，新手入门值得吗。

Next.js 解决了什么问题

纯 React 开发单页应用，首屏加载慢，SEO 不友好，服务端渲染要自己搭架构，配置麻烦。Next.js 把这些都搞定了，开箱即用。

你不用自己配路由，文件系统就是路由，新建个文件就能访问，省很多配置时间。静态生成、服务端渲染、增量静态再生成全都支持，想怎么渲染就怎么选，首屏速度和 SEO 都搞定。

API 路由直接写后端接口，前后端一个项目搞定，不用分开部署，小项目特别方便。

基础例子看一下

用 create-next-app 创建项目最快：

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

写个简单页面：

// app/page.js
export default function Home() {
  return (
    <div>
      <h1>Hello Next.js</h1>
      <p>Welcome to my Next.js site</p>
    </div>
  )
}

就这么简单，创建完项目，npm run dev 就能跑，访问 localhost:3000 就能看到页面。App Router 是现在推荐的写法，文件放在 app 目录下，自动对应路由。

再看个数据获取的例子，服务端渲染拿数据：

// app/posts/[id]/page.js
async function getPost(id) {
  const res = await fetch(`https://api.example.com/posts/${id}`)
  return res.json()
}

export default async function PostPage({ params }) {
  const post = await getPost(params.id)

  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  )
}

直接在组件里 async 拿数据，Next.js 帮你在服务端渲染好再发给浏览器，就是这么简单。

核心好用的特性

文件系统路由

不用配置路由表，文件放在哪里路由就是什么。app 目录下 page.js 就是页面，路由自动生成，写项目的时候新建文件就行，不用改配置。动态路由用方括号 [id]，一下就搞定。

多种渲染策略

静态生成把页面编译成 HTML，部署到 CDN 打开飞快。服务端渲染每次请求实时生成，适合动态内容。增量静态再生成可以后台自动更新静态页面，不用重新发布整个项目。同一个项目里不同页面能用不同方式。

API 路由

想写个简单后端接口，直接在 app/api 目录下建文件，导出个请求处理函数就行，不用单独起个 Node 服务，前后端代码放一个项目里，开发部署都省事。小型项目全栈开发一个人就能搞定。

零配置打包

开发环境热更新快，生产打包优化都做好了，代码分割、图片优化、字体优化全都自动弄，你不用管 webpack 怎么配，拿来就能用，出了问题框架帮你兜底。

服务端组件

React 服务端组件原生支持，组件默认在服务端渲染，不用发 JS 给客户端，页面加载更快，还能直接在服务端连数据库，不用暴露 API Key，安全又高效。

哪些场景用 Next.js

企业官网、博客文档，用静态生成打包完扔 CDN，打开速度快，SEO 好，搜索引擎收录快。电商网站，服务端渲染商品页面，首屏快用户体验好，转化率高。

SaaS 应用，全栈开发，前后端都在一个项目，团队小开发快，节省人力。移动端 H5，需要首屏快，Next.js 打包优化做得好，加载速度比纯 React SPA 快很多。

就算是大型项目，也能拆分路由，按需加载，团队协作方便，很多大公司都在用。

Next.js 有哪些优缺点

优点太明显，React 开发生态最好的全栈框架，默认配置就能用，不用自己折腾，开发速度快很多。渲染策略灵活，不管什么类型项目都能适配，满足各种需求。Vercel 一直快速更新，新特性加得快，社区活跃，问题网上一搜就能找到答案。

缺点也有，入门简单，但高级概念比如服务端组件、缓存策略、渲染模式区别，新手容易搞混，理解起来要花点时间。全栈开发如果项目变大，后端逻辑越来越多，最后还是得拆分前后端，框架本身不是给大型后端设计的。

部署到 Vercel 特别方便，但自己部署到其它服务器，有些配置要折腾，特别是流式渲染这些新特性，老服务器可能要适配。

现在 Next.js 发展得怎么样

从 Vercel 开发出来到现在，已经是 React 生态的事实标准框架，做新项目几乎第一反应就是用 Next.js。App Router 稳定之后，开发体验提升了一大截，服务端组件慢慢成熟，大型项目也敢用了。

国内国外用户都很多，大厂小公司都在用，版本更新稳定，每几个月就有新特性出来，但破坏性变更很少，老项目升级一般没问题。就业需求也多，现在招 React 开发，很多都要求会 Next.js。

现在学 Next.js 值得吗

已经会 React，肯定值得学。现在找全栈开发工作，很多岗位要求会 Next.js，会了找工作加分不少。开发个人项目，从博客到小型工具，一个项目搞定前后端，不用维护两个代码库，太方便了。

入门挺快，基础用法几天就能学会，跟着文档做个项目就会用了，高级特性慢慢在项目里积累就行。就算你不用它全栈能力，只用它做静态站点渲染，也比纯 React 开发体验好很多。

项目地址：https://github.com/vercel/next.js