这系列内容主要内容是在讲如何用 Next.js 取代 WordPress 前端，因此约 70% 内容会着重在开发 Next.js 前端上，因此今天我们先来介绍一下什麽是 Next.js。

React.js CSR 带来的问题

React.js 很棒，他可以让我们以宣告式、元件化的方式开发网站，让我们能用拼乐高的方式逐步架构出具有复杂状态的网站。但因为它的成品是 Client-side Rendering 的（CSR、在浏览器端渲染），会连带制造一些问题，主要是这两点：

1. 第一次浏览的显示出画面的时间太久（要等到下载完所有 JavaScript 档案才能渲染出画面）
2. SEO 不佳（因为 HTML 内容变成由 JS 算出来，部分搜寻引擎爬虫不会去执行 JS，会爬不到网页内容）

要解决这个问题，後续有新的各类 Server-side rendering、Static site generation 等解法被提出来，而
Next.js 就是其中 Server-side rendering 解法中最成熟的，而这也是 Next.js 最初的卖点。

什麽是 Next.js

Next.js 是大约五年前由 Vercel 这家公司开发的开源 React.js 框架，要简单理解它的话可以理解为高级版的 React.js，所有 React 生态系的套件都一样能使用、开发元件和逻辑时 code 写法也跟在开发 React 网页时一模一样，但 Next.js 帮我们处理了非常多开发 React 网页会遇到的问题。

Next.js 最主要的提升是在「网站使用者体验」和「开发者体验」上。

网站使用者体验上的提升

针对「网站使用者体验」，Next.js 一开始就提供了 Server-side rendering 的写法，解决了前面提到的 React 会有的两大问题，因而提升了使用者体验和 SEO。

而在近期的改版後，Next.js 提供了更多种渲染策略如 Static Site Generation 和 Incremental Static Generation，这些写法各有效能和使用情境上的优缺点，我们能在一个网站的不同页面选用不同策略。关於不同渲染方式的介绍，如 CSR、SSR、SSG、ISR，下一篇文章会详细介绍。

Next.js 也提供了内建的许多提升效能的解法：

• Image Optimization：在 server 上 cache 图片，并帮你转档成 size 较小的档案格式如 webp，并且也帮你做 lazy loading 处理，这些在过去是要自己研究适当的 React 套件来引入、或自己实现的，现在直接内建！
• Code Splitting：自动帮你根据不同页面（route）做 code splitting，让每一个页面的 JS bundle size 不至於太大，影响读取速度
• Font Optimization、Script Optimization：帮你用最有效率的方式引用 webfont 和外部 script，也提升了网页读取速度

开发者体验上的提升

在开发者体验上，Next.js 一样提供了类似 create-react-app 一样的启动专案指令，叫做 create-next-app用法差不多，能让你快速建立起 Next.js 专案，後续的文章会说明如何使用。

维护 Next.js 的 Vercel 也是非常专业的开发团队，官网的官方文件非常好读，有哪个细节不懂的通常在官网上就能查到解答。在 Next.js Github repo 里，也提供了非常丰富近百个范例，demo 了非常多种 Next.js 的使用情境，像是如果你要串接各类服务在你的专案里例如 Google Analytics 要怎麽写、要串接各种 state management library 例如 redux、xstate 要怎麽写，等等，可以找到非常多优质的范例程序码。

同时，Vercel 官方也提供了同名 Vercel 网站托管服务，让你轻松免费部署 Next.js 网站，非常方便！

总结来说，Next.js 是一套非常值得掌握的技术，虽然比起 React.js 确实引入了更多复杂度，需要多考量如何让同份程序码在 server-side 和 client-side 都能执行，但上手之後，Next.js 能让我们做出更优良的网站。

下一篇文章，让我们实际来建立一个 Next.js 专案吧！