#02 No-code 之旅 — Next.js 简介

大家星期五快乐！TGIF～ 今天想跟大家分享 Next.js 这个 React 框架 (官网写 "The React Framework for Production")。讲到 Next.js 就会想到 SSR 或是 SSG，所以今天也会一起分享。有什麽问题或不清楚的欢迎留言问我喔！

用 Next.js 的原因

Next.js 其实不算是新的框架，不过我这一个月才开始碰它，觉得蛮可惜的 (因为很好用啊！)。基於 React 且拥有良好的 DX (开发者经验)，让我们不需多设定也可以快速上手。最近几年 Next.js 也吸引了不少人，尤其是熟悉 React 的大家，更不用多烦恼，可以直接换来换去的ＸＤ。

对我来说，会想要用 Next.js 的主要两个原因就是：

• 他对 Server-side Rendering (SSR) 或 Static Site Generation (SSG) 的支援，
• 他提供 API Routes，让我们可以在同一个专案写前端网页和後端的 API！

还有更多优点可以在官网看喔～

咦？有这麽好吗？应该也是有缺点吧！

不用 Next.js 的原因呢？

虽然我个人觉得他都很好，没什麽不好的（误ＸＤ

Next.js 的 routing 方式跟一般 React 看到的 (react-router) 不一样。它采用 file-based routing，意思是每个档案就是一个 page (页面)。这点对我来说不是什麽大缺点，可是对一些 routing 比较复杂或是需要更多的控制的专案就不太适合。

那你决定要用 Next.js 了吗？要的话，我们可以往下一步，来 setup 我们的 project 吧！

Setup

如果 React 有 CRA (create-react-app)，那 Next.js 有 create-next-app 让整个 setup 的过程非常简单也不需多设定。在终端机输入以下指令建立专案：

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

我个人喜欢用 TypeScript 所以会用不一样的指令：

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

东西安装完之後可以跑跑看我们的 development (开发) server：

npm run dev
# or
yarn dev

在浏览器输入 http://localhost:3000，你会看到以下这个画面～

就这样！什麽都不需要设定，只输入一行指令就能得到：

• fast refresh (编辑档案之後，不需要手动重整，即时看到最新状态)
• SSG 或 SSR
• static file serving (提供静态档案)

小结

今天先到这里～
明天跟大家详细介绍 SSR, SSG, CSR, ISR，还有该怎麽在 Next.js 使用这些不同的 rendering 方式！

晚安 <3

看更多

• Next.js Getting Started