Nextjs提供很多解決方案包含了開發體驗, 打包, SSR……但是還是有不少人認為Next只是為了SEO而出現，沒有其他使用的必要性，因此這邊將會介紹你應該嘗試用用看的Next特色。

Next的貢獻只有SEO？

我認為這是一個很大的謬誤，特別是有時候在聊天或是跟業餘的合作夥伴想要起一個小專案的時候，只要討論到Nextjs，就會說：可是我們又沒有要做SEO
這時候我就會反問，那你知道除了SEO，Next還有什麼特別的地方嗎？
我發現反問的時候，還蠻多人回答不出來的，因為這個原因，讓我想要把一些特點粗略地記錄一下。

Next的賣點

官方事實上有列出幾個部分是在我們開發的時候需要考慮的：

  1. Code has to be bundled using a bundler like webpack and transformed using a compiler like Babel.
  2. You need to do production optimizations such as code splitting.
  3. You might want to statically pre-render some pages for performance and SEO. You might also want to use server-side rendering or client-side rendering.
  4. You might have to write some server-side code to connect your React app to your data store.

解決方案

基於這些因素，Next提出了一些解決方案改善：

  1. An intuitive page-based routing system (with support for dynamic routes)
  2. Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis
  3. Automatic code splitting for faster page loads
  4. Client-side routing with optimized prefetching
  5. Built-in CSS and Sass support, and support for any CSS-in-JS library
  6. Development environment with Fast Refresh support
  7. API routes to build API endpoints with Serverless Functions
  8. Fully extendable

資料夾結構即麵包屑

有些React推薦的開發結構也是從Next來的，麵包屑通常最多不會超過三層，因此也很適合用在pages裏面的頁面元件分離

套件問題

以往開發程式，我們可能會面臨到一些瑣碎的問題，例如：打包相依套件, CSS module, 打包最佳化……
特別是在調整webpack時，我們可能要定時將相依套件進行升級，但是有時候升級的過程是不順利的，尤其是在以前舊版的webpack時常發生
另外在導入CSS module, uglify……
你會發現這些東西的調整時常是令人折磨的，有些人就會認為：為什麼我們不能專注在開發就好了，要花時間調整這些東西？
因此Nextjs就是我們的救星啦～你可以把它想像成是一種第三方服務的開發體驗
你不用在乎那些瑣碎的相依性而是專注在開發頁面，例如：套件彼此的依賴性。

Next的Pre-render

Next透過Pre-render達到SEO最佳化的效果，Next處理每個頁面的HTML，再透過Client side的JS執行。
官方也有提供方法讓你查看這個頁面在執行pre-render前的架構長如何：

  1. Disable JavaScript in your browser (here’s how in Chrome) and…
  2. Try accessing this page (the final result of this tutorial).

如果是用原生React開發的話，就會看到一開始是全空的HTML

Pre-render的種類

Next提供兩種pre-render方式，差異在什麼時候處理HTML結構：

  1. Static Generation is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request.
  2. Server-side Rendering is the pre-rendering method that generates the HTML on each request.ㄋ

在打包的時候就產生HTML的靜態網頁

使用者打開網站後執行的pre-render

該使用Static Generation還是Server-side Rendering

官方推薦使用Static Generation，其實也很合理，因為預先產生靜態網頁有助於省去後面請求做重複的工作。
另外靜態網站的結構也會被cache，基於這些原因，整體效能可以增加不少。

使用Next的心得


我最近幫非營利團隊使用Nextjs嫁了一個網站就是使用Next（如上圖）
我個人是蠻推薦使用Next輔助開發React的，他提供很多便利的開發體驗
也讓我們專注在設計網站，不需要花時間調整相依套件
也因為這些特點，有些沒有SEO需求的專案也會選擇使用Next
有些人以為Next只提供SEO的改善，但是別忘了，Next也是可以選擇不產生靜態網頁的
歡迎有興趣的人去嘗試看看，用過的人都知道他的好