Next.js 試用感想

  1. 1. 正文
  2. 2. 感想
  3. 3. 結論

在使用過 Vue 社群的 Nuxt.js 開發過一次專案後,便對 React 方的 Next.js 抱有很大的興趣,尤其在知道 Nuxt 是由此啟發之後,對他抱的期待又更高了,於是在專案上線後,就轉去摸索了 Next 幾天,來試試看能不能把很久之前的 React 專案搬到上面,以下大概講一下那段時間的心得。

以下以 3.0.1-beta.X 為主

正文

在我翻 Next 的 Readme 大概幾分鐘後,我瞄到了這個:

1
<Link href="/about"><a>here</a></Link>

WTF

我靠,Link 再包 a?認真?沒有人對這有意見嗎?我知道他的 Link 可以包其他元件當作事件綁定用,但有必要因為要讓其他元素也能切換網址就要這樣寫嗎?我得說這大概是第一個讓我在一開始就想放棄的東西。

後來我決定繼續弄下去,先來看看怎麼使用動態路徑,畢竟現在的網站越來越需要這樣做了。結果往下拉之後發現,已經要加入後端套件(Koa、Express)了嗎?我才剛開始半小時耶?什麼都還沒寫到耶?

WTF

然而官方的範例只講到兩個網址互換不同的 pages 名稱,並沒有講到動態路徑怎麼處理,要看得要到他們的教學網站去看,而且得先登入才能看全部,搞什麼神秘?況且這教學網址只有在 Readme 前面提個一句就沒了,直接往下拉的話還真不會去注意到。

總之到最後總算是弄出來了,就像下面這樣:

1
2
3
4
5
// Koa
router.get('/jobs/:id', async ctx => {
await app.render(ctx.req, ctx.res, '/detail', ctx.query)
ctx.respond = false
})
1
2
3
4
<!-- Next.js -->
<Link href="/detail?id=123" as="/jobs/123">
<div>job 1</div>
</Link>

這看起來就像是為了實現這功能,而得繞了一圈才能回來的感覺,而且 hrefas 之間的內容看起來很不搭嘎,搭配後端一起看就像是個硬湊的方案一樣,後來看了一下 SEO 的部份,才知道他還得自己加上 react-helmet 來蓋過他自創的 Head 內容,這邊的實現方式看起來也像是繞了一圈才回來一樣。

no

而 Nuxt 則是實現了用資料夾結構與檔名關係來達成動態路徑的功能:

1
2
3
4
5
6
7
pages/
--| _slug/
-----| comments.vue # /:slug/comments
-----| index.vue # /:slug
--| users/
-----| _id.vue # /users/:id
--| index.vue # /

到這邊之後,剩下的我基本上就草草看過就放棄了。後來原本的舊專案就改將他遷移到 react-slingshot 這個 webpack 架構上了,幸好這專案原本就沒有 SSR/SEO 的需求,所以不用太過在意。

感想

到後來我才想到要去看 Next 究竟整合了社群的哪些東西,結果是一個也沒有(不算上 hot loader 那些東西),不論他的具體理由為何,我認為這是一件很蠢的事情。

開源社群基本上就是有個類似金字塔的模式:每個問題都有數種到數十種方案,到一定程度之後,就會出現幾個整合方案,再之後就會有更大型的多方整合方案,這些整合方案會從各種要解決的問題中取出他們認為適合的套件並使之成為預設功能。少部份不滿意的還是會自行製造一個輪子,但整體來說依然會有不少外部方案整合其中。比如在 Express 之上就有 Kraken.jsSails.js 等整合方案,就算想自製輪子,至少也要讓他看起來像個樣子(比如 Sail.js 衍生出來的 Waterline)。

然而 React 社群是如此的活躍,在開發過程中你可能會遇到的問題裡,每個都有非常多的方案可以選,往好處想是選擇很多,但在如何選擇上也是一種困擾。然而在如此豐富的社群資源下,卻依然只做出自己專屬的輪子,而沒有進行整合,我能想到的就這兩個原因:

  1. 不想做或覺得沒必要做
  2. React 社群的東西多但若要做多方整合則有很大的難度

前者是他們自己的問題,如果是後者那代表社群有很大的問題。

或許這些抱怨是在用過 Nuxt 之後,而對 Next 抱有過度期望所導致的失望,但在往後的選擇上,若是有 SSR 的需求,我會傾向於選擇 Nuxt,若沒有則會用一般的 React + Webpack 模板方案。

結論

以前我總認為既然先學了 React,那 Vue 其實沒有必要再多花心思在上面,直到我遇見了 Next。

總而言之,Next 給我的感受是,他們維護者的心態比較像:「我們做了這個東西,但我們自己內部夠用就好,你們來試試看(幫我們 debug)吧!」

而 Nuxt 的心態則是:「我們來做一個讓 Vue 社群可以方便開發的整合方案吧!」