Day02 - 为什麽你需要 Next.js ?

next.js

为什麽你需要 Next.js ?

对於工程师来说选择用什麽样的技术，背後都是取决於商业策略需要什麽，以常见的 SSR (Server Side Rendering)、pre-rendering 来说，为什麽要做 SSR 跟 pre-rendering，不外乎是希望网站整体的 SEO 能够变好，或是提升使用者体验。

而现在 SPA (Single Page Application) 盛行的时代，许多网站在没有框架或後端支援的情况下，仅仅使用像是 React 或 Vue 等前端框架，要做到 SSR 或 pre-rendering 还需要做许多设定，做这些技术研究都得花费时间成本与心思，最後才能导入到专案中。

所以 Next.js 的出现能够解决工程师心中的痛，不必再花费很多时间处理 pre-rendering 或 SSR 的问题，而是利用框架的优势，让工程师更专注在开发核心功能上面。

Server Side Rendering 与 Static Side Generation

Next.js 是一个基於 React 的框架，它同时支援 SSR (Server Side Rendering) 与 SSG (Static Side Generation) 两种方法，不需要很多的设定就可以让网站同时有这两种功能。

Next.js 在设计上可以混用两种方法，像是 /page-a 希望能够 SSR，因为网站内容很常改变，需要 API 支援变动频繁的资料；而 /page-b 则是使用 SSG 则是可以用在内容较不常改变的页面，例如 Landing Page 或部落格等。

图片的档案优化

SEO 除了需要网站内容之外，还必须提到 core web vitals 的评分，评分的标准包括网站的速度、是否使用较新的图片格式等等，因此网站可能会选用 WebP 的档案格式。WebP 这种格式根据 google 的无失真压缩测试，甚至可以比 PNG 档少了 45% 的档案大小。想要使用这种档案格式，想要自动化处理，就必须使用 webpack 或 gulp 等加入一些 plugin 进行处理，不仅设定麻烦，事後还要维护不少的设定档，可以看作是一项不小的成本。

而 Next.js 也提供了相对应的解决方案，可以使用内建的图片优化方案，让 Next.js 帮我们自动化处理图片的格式，不用再额外安装插件生成不同的格式的图片档，而且可以根据不同的浏览器，提供支援的图片档案，能够减少许多繁冗的程序码。

API routes

Next.js 实际上是一个全端框架，它除了 React 的部分外，甚至还提供了建立 API 的功能。如果一个新的专案，在还没有建构 API 的服务之前，考虑使用 Next.js 的 API routes 是一个选项。

Getting Started

看了基本的 Next.js 介绍，你也许在思考导入新技术的风险，大家导入一项新技术的担忧，其中一项便是资料来源不够多，在查询问题解决方法时，因为没有足够大的社群资源，导致得自己想破头可能也找不到解答。但从使用 Next.js 使用人数上每个月都有线性成长，至今为止，每周已经有 100 多万人下载，GitHub 的星星数也到了 70K。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0bb37ca1-327e-4353-91ea-0e41bb5d91b8/_2021-07-18_11.19.38.png
*https://www.npmtrends.com/next*

此外，有需多着名的公司都已经采用了 Next.js 的解决方案，像是 TikTok、Netflix、GitHub、Uber、Twitch 等等。

Companies / Sites using Next.js · Discussion #10640 · vercel/next.js

综合上述，Next.js 这个框架已经渐渐成熟，社群、资源都以很快的速度增加，所以导入後不用担心框架的讨论度不够，导致资讯寻找困难。

说了这麽多，第二天不写点程序好像说不过去，那我们就来简单玩一下 Next.js 吧！

create next app

如同我们在使用 react 时经常会用到的 create-react-app ， Next.js 也有方便的 CLI 工具 create-next-app 可以使用，它能够快速建立一个基本的应用，并且包含了许多你可能会用到的工具、设定，像是 eslint 、 .gitignore 等。如果你需要不同的 template，在 Next.js 官方的 repo 中也有各式各样的范例可以在使用 create-next-app 时引用。

建立专案

接下来，你可以使用以下的指令建立 next app：

npx create-next-app
# or
yarn create next-app

而如果你需要 typescript 支援的话，则可以在指令後加上 --ts 或 --typescript 的设定：

npx create-next-app --ts
# or
yarn create next-app --typescript

启动专案

在建立完 Next.js 的专案後，我们来启动 Next.js 的应用吧！使用以下指令开启 dev server：

# started server on http://localhost:3000
yarn dev

然後，开启浏览器输入「http://localhost:3000」，你便可以看到这个专案的预设首页。

welcome to Next.js

专案资料夹导览

如果只是启动专案好像少了点什麽，所以就让我们来看一下 Next.js 的资料夹架构跟一些档案设定吧！

专案资料夹导览

pages

这个资料夹底下放的是 Next.js 应用中的页面，因为 Next.js 是使用 file-based routing，所以我们会把所有的页面都放在里面，而详细介绍会在後面的章节中提到。

next.config.js

如果你的 next app 有些客制化的需求，则可以在这个档案中设定，以下以环境变数作为举例。

我们经常会在程序码中使用环境变数，而常见的做法是会建立一个 .env 档案，然後再搭配 dotenv 之类的套件使用环境变，而 Next.js 的作法则是可以在 next.config.js 中定义我们需要的环境变数。

在 next.config.js 加入以下设定：

module.exports = {
  env: {
    apiKey: 'api-key',
  },
}

接下来，你就可以 react 中使用 process.env.apiKey ：

function Home() {
  return <h1>环境变数 apiKey: {process.env.apiKey}</h1>;
}

export default Home;

next.config.js 的客制化设定挺丰富的，包括像是可以设定档案读取的路径 base path，客制化的 header ，或是 webpack 的设定 等，如果有需要这些设定的话，可以到官方网站中看看。

next-env.d.ts

next-env.d.ts 这个档案则是用在 typescript 型别的引用，这个档案预设产生的内容如下：

/// <reference types="next" />
/// <reference types="next/types/global" />

接下来我们来看这个档案的用途，首先，这个档案中使用 typescript 的 triple-slash directives，引用了 Next.js 所定义的型别。再看到 tsconfig.json 中的 include 包含了这个档案，所以你现在知道，这个档案会参与 typescript 的编译过程。

然後你再看到 styles 这个资料夹底下包含两个档案：

  • globals.css
  • Home.module.css

这是 Next.js 的其中一个预设的功能，不用额外设定就支援 CSS 档案跟 CSS Modules。而之所以 typescript 读得懂 *.module.css 的档案也是因为有 next-env.d.ts 。

我们来实验一下，把 next-env-d.ts 的第二行删掉後，到 pages/index.tsx 中看看，你会看到 typescript 无法解析像是 Home.module.css 这种档案。

错误讯息

所以，我们来看看第二行的型别引用包含了什麽，到 node_modules/next/types/global.d.ts 中看看里面的型别定义，你可以看到里面宣告了三个 module：

  • declare module '*.module.css' { ... }
  • declare module '*.module.sass' { ... }
  • declare module '*.module.scss' { ... }

正是因为有了这三个 declare module ，才能在专案中让 typescript 能够辨别 CSS modules。

而第一行的型别引用跟第二行差不多，第一行则是让我们可以使用 <html amp=""> 、 <link nonce=""> 、 <style jsx> 等的语法。

剩下一些常见的设定档

像是 :

  • .eslintrc：为了让程序码品质更为稳定，大部分专案都会使用的 lint 套件
  • .gitignore：这个档案会设定一些你不想加入版控的档案，例如 /node_modules
  • tsconfig.json ：这个档案则是用在 typescript 编译时需要的设定

剩下的档案较为琐碎就不再细说了。

总结

在这个章节我们了解到 Next.js 提供许多很棒的功能，包含了混用 SSR (Server Side Rendering) 跟 SSG (Static Side Generation) 的特性，而且还支援基於 TypeScript 开发，还有令人兴奋的图片优化，在支援 WebP 的浏览器中使用这种较新的档案格式。

表面上是因为这些丰富的特性，有利於 SEO 与 UX，对於工程师来说，使用 Next.js 则是可以提升 DX (developer Experience)，简化 SSR 与 pre-rendering 的设定，写法与原本的 React 写法很接近，能够以较低的成本学习并导入到专案中。而且资源未来还会陆续增多，暂且不必担心框架的热度影响导入後找不到解决问题的方法。

在了解了 Next.js 的一些功能後，透过建立一个应用并快速导览，我们也知道 Next.js 的专案架构以及一些设定档的用途。

这只是刚开始而已，接下来 28 天就让我们一起来看看 Next.js 的魔力吧！

Reference


<<:  .NET Core第17天_LabelTagHelper的使用

>>:  大共享时代系列_001_笔记

Day15 Lua 的全域环境变数 _G 与 _ENV

上一回在研究 rom/programs/monitor.lua 的过程中 看到一些大写的变数 _G,...

Day28 -- Click and Drag

目标 今天要做的是，拖拉然後卷动区块 Step1 const slider = document.q...

Day06 补充笔记2

Export Modules 汇出程序模组 在React中可以透过 Export 语法来汇出程序模组...

[重构倒数第05天] - 要如何再 Vue2 使用 Composition API

前言 该系列是为了让看过Vue官方文件或学过Vue但是却不知道怎麽下手去重构现在有的网站而去规画的系...

< 关於 React: 开始打地基| 表单内的显示元素，map() ShowAdd 与Key >

09-13-2021 前言： 当我们需要的资料越多越繁杂时，我们所需要的是一个可以快速把按照我们所...