使用 Next.js 的一點心得

由於工作上做的多為內部系統，加上公司分工的關係，前後端開發環境是完全分開的，因此用到 Next.js 的機會不是太多，這次藉著要從 Medium 搬家原因，稍微深入理解了一下。

SEO Friendly
如果只在意 google 的話，這已經完全不是問題了。google 已經完全支援 SPA，不相信的話可以看這裡，但其它搜尋引擎我就沒研究了，支援度可能沒 google 這麼好
零設定+低學習門檻
只要具備前段的必備知識，上手時間極短
擴充性佳
舉例來說，Next.js 內建是用 styled-jsx，但我習慣用 styled-components，安裝及轉換完全沒問題，目前使用其它套件時還沒碰到特別奇怪的狀況
官方學習資源豐富
初學可以到 https://nextjs.org/learn/basics/getting-started，一開始這裡很夠用了

Hot Reload 實在太慢了
在用 CSR 的時候，正常儲存變動到頁面更新，大概就幾秒鐘的事，但在 Next.js 大概需要 20~30 秒左右 (2015 Macbook Pro 13”)。我查了一下好像沒什麼方法可以加速的，有查到的話再更新在這裡
Restful API 的設計有夠醜
API 預設的檔案路徑在 ROOT/pages/api/，假設你有一個 pages/api/create.js 的檔案，那它的路徑就是 [GET] /api/create，那如果我要用其它的 Request Method 怎麼辦? 官方文件叫你可以這樣做

export default (req, res) => {
  if (req.method === 'POST') {
    // Process a POST request
  } else {
    // Handle any other HTTP method
  }
}

~~認真的嗎?~~ 我個人比較偏好下面這樣

import http from 'next/http';

export default http.get((req, res) => {
  // Do something
});

這樣優雅多了

注意 getStaticProps 及 getServerSideProps 的不同
這兩者相同的地方是，都是在 Server 端呼叫，可以直接從 Database 抓資料或調用任何 Server 端的資源
參考資源: https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation
最大的差別在於，getStaticProps一定要配合 getStaticPaths 使用。在開發期間，以上這三個 function 每次 request 都會被呼叫，但在 build 時，Next.js 會參考 getStaticProps 裡的設定，直接產生靜態資源，而getServerSideProps則是在每次的 request 會動態抓取指定資源，參考下圖比較

用 getServerSideProps build 完的結果

使用 getStaticProps build 完後的結果

注意開發環境是 Node.js，不是 Browser

因此在用 Browser 的 API 時，要注意只有以下地方可以用

useEffect

useEffect(() => {
    console.log(location.href);
}, []);

Dom Events

const handleClick = () => {
    alert('hello');
};

return <button type="button" onClick={ handleClick } />;

如果你需要範例，可以在這裡找到一個簡單的範本

2020/04/14

Sometimes you win, sometimes you lose, sometimes it rains.