大家星期五快樂！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