在這 30 天想要製作最近很紅的 no-code (無程式碼) 網頁～

身為喜歡寫程式的工程師，這次想挑戰的並不是使用 no-code 平台實作一個網頁出來，而是自己手刻製...

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ :: 2021 iThome 鐵人賽

<p>最後一天！禮拜五快樂！恭喜大家完賽！恭喜自己ＸＤ 今天來回頭看看我們這三十天學了哪些事，還有講一下未來規劃～</p>
<p><img src="https://i.imgur.com/MMj99...

<p>最後一天！禮拜五快樂！恭喜大家完賽！恭喜自己ＸＤ 今天來回頭看看我們這三十天學了哪些事，還有講一下未來規劃～</p>
<p><img src="https://i.imgur.com/MMj99DN.png" alt="恭喜完賽" /></p>
<h2>回顧</h2>
<p>來回顧一下這 30 天的文章：</p>
<ul>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10264688">系列文介紹</a>
</li>
<li>Next.js
<ul>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10266342">簡介</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10267249">SSG，SSR，CSR，ISR</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10267894">Pre-render &amp; Data Fetching</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10268611">Pages &amp; Routing</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10269316">API Routes</a>
</li>
</ul>
</li>
<li>API / SDK
<ul>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10270688">Github API 簡介</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10270175">Github API 實作例子</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10272845">Notion SDK</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10273521">RSS</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10277582">Avatars Libraries</a>
</li>
</ul>
</li>
<li>SWR
<ul>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10271427">簡介</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10272079">實作例子</a>
</li>
</ul>
</li>
<li>Chakra UI
<ul>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10274188">簡介</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10274751">客製化</a>
</li>
</ul>
</li>
<li>Deployments (部署)
<ul>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10279024">靜態網站</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10279484">Next.js 網站</a>
</li>
</ul>
</li>
<li>Project
<ul>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10276053">Setup</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10276660">架構</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10277143">讀取 Notion 資料</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10278103">Google Analytics &amp; Splitbee</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10278469">Open Graph</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10279880">實作 API</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10280064">Notion 分頁 ft. SWR</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10280667">Dark Mode &amp; Google Fonts ft. Chakra UI</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10281035">Favicon</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10281325">客製化錯誤頁</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10281671">部署</a>
</li>
</ul>
</li>
</ul>
<h2>未來</h2>
<p>一開始訂的目標還沒達成Ｑ 所以我這週末會繼續寫 nocode 這專案，做完之後會再寫一篇文，介紹專案～ 大家有興趣的話，可以訂閱系列文或是追縱這篇文章。我會把它做完的！</p>
<h2>總結</h2>
<p>三十天終於結束了，意外的很忙，每天晚上都在思考該寫什麼文章。如過之後還要參加鐵人賽，應該要事先準備，不然像這次一樣很燒腦ＸＤ 不過很可惜專案還沒寫完，我會繼續努力！這三十天我自己也學到了不少，希望大家也有一些收穫～</p>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～</p>
<p>祝大家週末愉快！</p>
<p>晚安 &lt;3</p>


最後一天！禮拜五快樂！恭喜大家完賽！恭喜自己ＸＤ 今天來回頭看看我們這三十天學了哪些事，還有講一下未來規劃～

回顧
來回顧一下這 30 天的文章：
系列文介紹

Next.js


簡介


SSG，SSR，CSR，ISR


Pre-render & Data Fetching


Pages & Routing


API Routes



API / SDK


Github API 簡介


Github API 實作例子


Notion SDK


RSS


Avatars Libraries



SWR


簡介


實作例子



Chakra UI


簡介


客製化



Deployments (部署)


靜態網站


Next.js 網站



Project


Setup


架構


讀取 Notion 資料


Google Analytics & Splitbee


Open Graph


實作 API


Notion 分頁 ft. SWR


Dark Mode & Google Fonts ft. Chakra UI


Favicon


客製化錯誤頁


部署




未來
一開始訂的目標還沒達成Ｑ 所以我這週末會繼續寫 nocode 這專案，做完之後會再寫一篇文，介紹專案～ 大家有興趣的話，可以訂閱系列文或是追縱這篇文章。我會把它做完的！
總結
三十天終於結束了，意外的很忙，每天晚上都在思考該寫什麼文章。如過之後還要參加鐵人賽，應該要事先準備，不然像這次一樣很燒腦ＸＤ 不過很可惜專案還沒寫完，我會繼續努力！這三十天我自己也學到了不少，希望大家也有一些收穫～
大家想要看看之前的網站可以看這裡，或是直接到首頁～
祝大家週末愉快！
晚安 <3

最後一天！禮拜五快樂！恭喜大家完賽！恭喜自己ＸＤ 今天來回頭看看我們這三十天學了哪些事，還有講一下未來規劃～
<img src="https://i.imgur.com/MMj99...

#30 No-code 之旅 — 恭喜完賽！

<p>哇 倒數一天！最近都在準備把專案推上去 production 了，大家可以看看 Next.js 整理的推上 production 之前的<a href="https://nextjs.org/d...

<p>哇 倒數一天！最近都在準備把專案推上去 production 了，大家可以看看 Next.js 整理的推上 production 之前的<a href="https://nextjs.org/docs/going-to-production">注意事項</a>。我們今天來走一遍怎麼把 Next.js 專案部署到 Vercel 吧～</p>
<p><img src="https://i.imgur.com/3ZL9zMB.png" alt="Deploy to Vercel" /></p>
<h2>Deploy Preview Ship</h2>
<p><strong>Deploy. Preview. Ship.</strong> 是 Vercel 首頁的 Tagline，注重於 developer experience (DX) 和效能，我個人真的很推 Vercel！至今支援超過 30 個框架，可以跟 GitHub, GitLab, Bitbucket 綁定做 CI/CD，每個 Git 的 branch 和 PR 會有專屬的 preview URL，最後所有變化會馬上 go live，而且也會幫忙處理 cache 問題。今天這篇不會特別介紹 Vercel，可是會走一遍部署流程～</p>
<h2>啟程</h2>
<p>開始吧！我們可以選擇連結到 GitHub, GitLab, 或 Bitbucket，還是選現有的 template。<br />
<img src="https://i.imgur.com/XEFAZVu.png" alt="Vercel" /></p>
<p>我自己是使用 Github，所以選了 Github 之後，會跳出視窗問授權，記得按允許喔～<br />
<img src="https://i.imgur.com/WvPAlJr.png" alt="Import" /></p>
<p>選我們想要部署的專案！來到了設定頁，問我們要不要建立一個 team，我在這裡選 <strong>Skip</strong>，因為只有我一個人ＸＤ (注意： Team 需要付費喔～)<br />
<img src="https://i.imgur.com/TyNwTlT.png" alt="Team" /></p>
<p>現在來設定專案的相關資料，像我因為這專案是用 Next.js 所以不用改 preset，<strong>Build and Output Settings</strong> 也都用預設的 (大家可以一個人需求去修改喔！)。最後是 <strong>Environment Variables</strong>，如果有一些比較機密的資訊，不想放在 code 裡，那可以放 environment variables 喔 (Vercel 會加密)！像我們之前設定 Notion 的 token，可以放這裡～ 最後，按 <strong>Deploy</strong>！<br />
<img src="https://i.imgur.com/XpFMCrD.png" alt="Project" /></p>
<p>現在就等吧～ 正在部署中... 啊！太快了！我來不及截圖 confetti ＱＱ 不過部署完之後，我們可以回到 dashboard。<br />
<img src="https://i.imgur.com/qrhNRpZ.png" alt="Deploy" /></p>
<p>我們網站已經是 <strong>Ready</strong> 狀態了，大家可以看看每一頁的內容， <strong>Overview</strong> 就是包含其他頁的總結，<strong>Deployments</strong> 會列出我們的部署紀錄與狀態，<strong>Analytics</strong> 我目前不能點 (因為超過一個之後需要付費ＸＤ)，最後是 <strong>Settings</strong> 包含各種設定。我們去看一下設定吧。<br />
<img src="https://i.imgur.com/9gsm1Cv.png" alt="Menu" /></p>
<p>大家可以看每一個設定的內容，可是我想要編輯網站的網址，所以我去 <strong>Domains</strong>，然後按 <strong>Edit</strong>，會看到以下的畫面。Vercel 還提供免費的網域 <code>xyz.vercel.app</code>，看大家想要怎麼設定喔！不過有可能已經被別人搶走ＸＤ<br />
<img src="https://i.imgur.com/lYlaWmV.png" alt="Domains" /></p>
<p>最後，因為 Vercel 會自動做 preview deploy (非 production)，如果決定這個 deployment 是好的而且想要直接推去 production，或是想要把之前的 deployment 推回去 production 上面。那可以去 <strong>Deployments</strong> 然後選某個 deployment，再按 <strong>⋯</strong> 會出現下面的 menu，選 <strong>Promote to Production</strong> and <em><strong>voila</strong></em> ～<br />
<img src="https://i.imgur.com/URq3yQH.png" alt="Production" /></p>
<h2>小結</h2>
<p>希望大家部署順利，沒有遇到任何問題！當然不想用 Vercel 也可以選其他的服務喔！不過如果是用 Next.js 開發的話，使用 Vercel 真的超方便的，而且也支援 Next.js 的所有功能～</p>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。</p>
<p>祝大家上班上課愉快！</p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://vercel.com/">Vercel</a>
</li>
<li>
<a href="https://vercel.com/solutions/nextjs">Vercel + Next.js</a>
</li>
<li>
<a href="https://nextjs.org/docs/deployment">Next.js Deployment</a>
</li>
</ul>


哇 倒數一天！最近都在準備把專案推上去 production 了，大家可以看看 Next.js 整理的推上 production 之前的注意事項。我們今天來走一遍怎麼把 Next.js 專案部署到 Vercel 吧～

Deploy Preview Ship
Deploy. Preview. Ship. 是 Vercel 首頁的 Tagline，注重於 developer experience (DX) 和效能，我個人真的很推 Vercel！至今支援超過 30 個框架，可以跟 GitHub, GitLab, Bitbucket 綁定做 CI/CD，每個 Git 的 branch 和 PR 會有專屬的 preview URL，最後所有變化會馬上 go live，而且也會幫忙處理 cache 問題。今天這篇不會特別介紹 Vercel，可是會走一遍部署流程～
啟程
開始吧！我們可以選擇連結到 GitHub, GitLab, 或 Bitbucket，還是選現有的 template。

我自己是使用 Github，所以選了 Github 之後，會跳出視窗問授權，記得按允許喔～

選我們想要部署的專案！來到了設定頁，問我們要不要建立一個 team，我在這裡選 Skip，因為只有我一個人ＸＤ (注意： Team 需要付費喔～)

現在來設定專案的相關資料，像我因為這專案是用 Next.js 所以不用改 preset，Build and Output Settings 也都用預設的 (大家可以一個人需求去修改喔！)。最後是 Environment Variables，如果有一些比較機密的資訊，不想放在 code 裡，那可以放 environment variables 喔 (Vercel 會加密)！像我們之前設定 Notion 的 token，可以放這裡～ 最後，按 Deploy！

現在就等吧～ 正在部署中... 啊！太快了！我來不及截圖 confetti ＱＱ 不過部署完之後，我們可以回到 dashboard。

我們網站已經是 Ready 狀態了，大家可以看看每一頁的內容， Overview 就是包含其他頁的總結，Deployments 會列出我們的部署紀錄與狀態，Analytics 我目前不能點 (因為超過一個之後需要付費ＸＤ)，最後是 Settings 包含各種設定。我們去看一下設定吧。

大家可以看每一個設定的內容，可是我想要編輯網站的網址，所以我去 Domains，然後按 Edit，會看到以下的畫面。Vercel 還提供免費的網域 xyz.vercel.app，看大家想要怎麼設定喔！不過有可能已經被別人搶走ＸＤ

最後，因為 Vercel 會自動做 preview deploy (非 production)，如果決定這個 deployment 是好的而且想要直接推去 production，或是想要把之前的 deployment 推回去 production 上面。那可以去 Deployments 然後選某個 deployment，再按 ⋯ 會出現下面的 menu，選 Promote to Production and voila ～

小結
希望大家部署順利，沒有遇到任何問題！當然不想用 Vercel 也可以選其他的服務喔！不過如果是用 Next.js 開發的話，使用 Vercel 真的超方便的，而且也支援 Next.js 的所有功能～
大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。
祝大家上班上課愉快！
晚安 <3
看更多
Vercel


Vercel + Next.js


Next.js Deployment

哇 倒數一天！最近都在準備把專案推上去 production 了，大家可以看看 Next.js 整理的推上 production 之前的<a href="https://nextjs.org/d...

#29 No-code 之旅 — 部署至 Vercel

<p>嗨！因為最近系列文快要結束了，所以也準備把專案推上去 production 了。Next.js 有列幾個推 production 之前該<a href="https://nextjs.org/d...

<p>嗨！因為最近系列文快要結束了，所以也準備把專案推上去 production 了。Next.js 有列幾個推 production 之前該<a href="https://nextjs.org/docs/going-to-production">注意的事項</a>，其中一項就是錯誤頁面。所以今天的主題是客製化 Next.js 的錯誤頁面～</p>
<p><img src="https://i.imgur.com/uHtQaQd.png" alt="Error" /></p>
<h2>Error Page (錯誤頁面)</h2>
<p>Next.js 有提供很好的方法，讓客製化非常方便喔！這裡講的錯誤頁面是伺服器端發生的錯誤，並不是前端可以用 React 的 error boundary 去處理的。我們來看看吧！</p>
<p><img src="https://i.imgur.com/5Db9GSQ.png" alt="404" /><br>上面的圖是原本的 404 錯誤頁面～</p>
<h2>404 頁</h2>
<p>當伺服器端找不到使用者瀏覽的頁面的時候，Next.js 的伺服器會回傳 404 錯誤。因為 Next.js 採用 file-based routing，所以伺服器端知道有哪些靜態的路徑，當使用者到了一個不存在的路徑，伺服器會回傳 404。那如果是動態路徑 (dynamic routes) 呢？只要是 page 的 <code>getStaticProps</code> 回傳 <code>{ notFound: true }</code> 或是 <code>getStaticPaths</code> 回傳 <code>{ fallback: false }</code>，Next.js 的伺服器端會回傳 404 而瀏覽器會顯示 404 page 喔～</p>
<p><img src="https://i.imgur.com/LdbWBes.png" alt="Custom 404" /></p>
<p>我們可以做自己的 404 頁面，像上面那張圖，只要新增 <code>pages/404.jsx</code> 檔：</p>
<pre><code class="language-javascript=">// pages/404.jsx
import { Heading, VStack } from &quot;@chakra-ui/layout&quot;;
import Head from &quot;next/head&quot;;

const Custom404 = () =&gt; {
  return (
    &lt;div&gt;
      &lt;Head&gt;
        &lt;title&gt;404 - Page Not Found | No-code by Jade&lt;/title&gt;
        &lt;meta
          key=&quot;description&quot;
          name=&quot;description&quot;
          content=&quot;404 - Page Not Found | No-code personal website by Jade&quot;
        /&gt;
      &lt;/Head&gt;

      &lt;main&gt;
        &lt;VStack minH=&quot;60vh&quot; spacing=&quot;8&quot; textAlign=&quot;center&quot; justify=&quot;center&quot;&gt;
          &lt;Heading
            size=&quot;4xl&quot;
            bgClip=&quot;text&quot;
            fontWeight=&quot;extrabold&quot;
            bgGradient=&quot;linear(to-l, #7928CA, #FF0080)&quot;
          &gt;
            404
          &lt;/Heading&gt;
          &lt;Heading size=&quot;xl&quot;&gt;Not Found&lt;/Heading&gt;
          &lt;Heading size=&quot;lg&quot;&gt;
            The page you were looking for does not exist.
          &lt;/Heading&gt;
        &lt;/VStack&gt;
      &lt;/main&gt;
    &lt;/div&gt;
  );
};

export default Custom404;
</code></pre>
<p>專案 build time 的時候會產生這 404 錯誤頁面 (靜態頁面)，如果裡面想要放一些資料，可以用 <code>getStaticProps</code> 去抓取喔～</p>
<h2>500 頁</h2>
<p>當伺服器端發生錯誤時然後回傳 500 error，Next.js 伺服器會回傳靜態的 500 錯誤頁面給瀏覽器顯示。不過我們可以對這頁做客製化喔！只要新增 <code>pages/500.jsx</code> 檔：</p>
<pre><code class="language-javascript=">// pages/500.jsx
export default function Custom500() {
  return &lt;h1&gt;500 - Server-side error occurred&lt;/h1&gt;
}
</code></pre>
<p>跟 404 一樣，專案 build time 的時候會產生這 500 錯誤頁面 (靜態頁面)，如果裡面想要放一些資料，可以用 <code>getStaticProps</code> 去抓取喔～</p>
<p><img src="https://i.imgur.com/YM3zrSi.png" alt="Custom 500" /></p>
<h2>其他錯誤頁</h2>
<p>前後端可能會發生錯誤，所以不只伺服器端需要處理，client-side (客戶端) 也需要處理。在這裡，Next.js 的 <code>&lt;Error&gt;</code> component 比較不是對錯誤本身做處理，而是顯示錯誤畫面給使用者。讓使用者知道有錯誤，還有相關訊息。那我們也可以對這 <code>&lt;Error&gt;</code> 頁做客製化～ 新增 <code>pages/_error.jsx</code> 檔案來修改：</p>
<pre><code class="language-javascript=">// pages/_error.jsx
function Error({ statusCode }) {
  return (
    &lt;p&gt;
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : 'An error occurred on client'}
    &lt;/p&gt;
  )
}

Error.getInitialProps = ({ res, err }) =&gt; {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

export default Error
</code></pre>
<h2>小結</h2>
<p>網站部署之後，開始會有使用者，我們當然不希望發生任何錯誤，可是很難避免的Ｑ 那發生錯誤時，只希望有清楚的畫面告訴使用者發生什麼事了。所以今天學會怎麼做 custom error page 之後，也可以看看其他網站怎麼設計他們的錯誤頁面！讓使用者心情好一點 (？ＸＤ)</p>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。</p>
<p>祝大家上班上課愉快！</p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://nextjs.org/docs/going-to-production">Next.js Going to Production</a>
</li>
<li>
<a href="https://nextjs.org/docs/advanced-features/custom-error-page">Next.js Custom Error Page</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10267894">#04 No-code 之旅 — Next.js 中的 Pre-render 與 Data Fetching</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10268611">#05 No-code 之旅 — Next.js 的 Pages 與 Routing</a>
</li>
</ul>


嗨！因為最近系列文快要結束了，所以也準備把專案推上去 production 了。Next.js 有列幾個推 production 之前該注意的事項，其中一項就是錯誤頁面。所以今天的主題是客製化 Next.js 的錯誤頁面～

Error Page (錯誤頁面)
Next.js 有提供很好的方法，讓客製化非常方便喔！這裡講的錯誤頁面是伺服器端發生的錯誤，並不是前端可以用 React 的 error boundary 去處理的。我們來看看吧！

上面的圖是原本的 404 錯誤頁面～
404 頁
當伺服器端找不到使用者瀏覽的頁面的時候，Next.js 的伺服器會回傳 404 錯誤。因為 Next.js 採用 file-based routing，所以伺服器端知道有哪些靜態的路徑，當使用者到了一個不存在的路徑，伺服器會回傳 404。那如果是動態路徑 (dynamic routes) 呢？只要是 page 的 getStaticProps 回傳 { notFound: true } 或是 getStaticPaths 回傳 { fallback: false }，Next.js 的伺服器端會回傳 404 而瀏覽器會顯示 404 page 喔～

我們可以做自己的 404 頁面，像上面那張圖，只要新增 pages/404.jsx 檔：
// pages/404.jsx
import { Heading, VStack } from "@chakra-ui/layout";
import Head from "next/head";

const Custom404 = () => {
  return (
    <div>
      <Head>
        <title>404 - Page Not Found | No-code by Jade</title>
        <meta
          key="description"
          name="description"
          content="404 - Page Not Found | No-code personal website by Jade"
        />
      </Head>

      <main>
        <VStack minH="60vh" spacing="8" textAlign="center" justify="center">
          <Heading
            size="4xl"
            bgClip="text"
            fontWeight="extrabold"
            bgGradient="linear(to-l, #7928CA, #FF0080)"
          >
            404
          </Heading>
          <Heading size="xl">Not Found</Heading>
          <Heading size="lg">
            The page you were looking for does not exist.
          </Heading>
        </VStack>
      </main>
    </div>
  );
};

export default Custom404;

專案 build time 的時候會產生這 404 錯誤頁面 (靜態頁面)，如果裡面想要放一些資料，可以用 getStaticProps 去抓取喔～
500 頁
當伺服器端發生錯誤時然後回傳 500 error，Next.js 伺服器會回傳靜態的 500 錯誤頁面給瀏覽器顯示。不過我們可以對這頁做客製化喔！只要新增 pages/500.jsx 檔：
// pages/500.jsx
export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>
}

跟 404 一樣，專案 build time 的時候會產生這 500 錯誤頁面 (靜態頁面)，如果裡面想要放一些資料，可以用 getStaticProps 去抓取喔～

其他錯誤頁
前後端可能會發生錯誤，所以不只伺服器端需要處理，client-side (客戶端) 也需要處理。在這裡，Next.js 的 <Error> component 比較不是對錯誤本身做處理，而是顯示錯誤畫面給使用者。讓使用者知道有錯誤，還有相關訊息。那我們也可以對這 <Error> 頁做客製化～ 新增 pages/_error.jsx 檔案來修改：
// pages/_error.jsx
function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : 'An error occurred on client'}
    </p>
  )
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

export default Error

小結
網站部署之後，開始會有使用者，我們當然不希望發生任何錯誤，可是很難避免的Ｑ 那發生錯誤時，只希望有清楚的畫面告訴使用者發生什麼事了。所以今天學會怎麼做 custom error page 之後，也可以看看其他網站怎麼設計他們的錯誤頁面！讓使用者心情好一點 (？ＸＤ)
大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。
祝大家上班上課愉快！
晚安 <3
看更多
Next.js Going to Production


Next.js Custom Error Page


#04 No-code 之旅 — Next.js 中的 Pre-render 與 Data Fetching


#05 No-code 之旅 — Next.js 的 Pages 與 Routing

嗨！因為最近系列文快要結束了，所以也準備把專案推上去 production 了。Next.js 有列幾個推 production 之前該<a href="https://nextjs.org/d...

#28 No-code 之旅 — 客製化 Next.js 的錯誤頁面

<p>嗨嗨！今天來講一下怎麼設定網站的 favicon！還有用 Next.js 也可以快速設定每個頁面用不一樣的 favicon 喔！還不知道什麼是 favicon 的大家，可以看看瀏覽器的 tab，...

<p>嗨嗨！今天來講一下怎麼設定網站的 favicon！還有用 Next.js 也可以快速設定每個頁面用不一樣的 favicon 喔！還不知道什麼是 favicon 的大家，可以看看瀏覽器的 tab，不是會看到網站的 title 之外，還有一個小小的圖，那就是 favicon ～</p>
<p><img src="https://i.imgur.com/OFtuGiw.png" alt="Favicon" /></p>
<h2>Favicon</h2>
<p>Favicon 的圖最多是用 <code>.ico</code> 檔，不過其實也支援 <code>.png</code> 和 <code>.svg</code> 檔案喔～ 想要用 <code>.ico</code> 的話，通常是提供這三個大小 <strong>16x16, 32x32, and 48x48 pixels</strong>。如果決定用 <code>.png</code> 檔要注意的是 IE11 之前不支援 (不過現在應該不會遇到這問題了ＸＤ)。最後是 <code>.svg</code>，好處就是向量圖，所以檔案會比較小可是圖又可以被放大～ 不過瀏覽器支援度不高 (目前只有 Chrome, Firefox, Opera)！</p>
<p>那現在要怎麼在 Next.js 設定 favicon 呢？其實跟一般 HTML 一樣，放 <code>&lt;link&gt;</code> 在 <code>&lt;head&gt;</code> 裡，不過在 Next.js 就改用 <code>&lt;Head&gt;</code> component：</p>
<pre><code class="language-javascript=">import Head from &quot;next/head&quot;;

function MyApp({ Component, pageProps }) {
  return (
    &lt;div&gt;
      &lt;Head&gt;
        &lt;title&gt;No-code by Jade&lt;/title&gt;
        &lt;link
          key=&quot;icon&quot;
          rel=&quot;icon&quot;
          href=&quot;https://source.boringavatars.com/beam/32/Home?colors=AFC7B9,FFE1C9,FAC7B4,FCA89D,998B82&quot;
        /&gt;
      &lt;/Head&gt;
      &lt;Component {...pageProps} /&gt;
    &lt;/div&gt;
  );
}
export default MyApp;
</code></pre>
<p>我選擇放在 <code>pages/_app.js</code> 裡的 <code>&lt;Head&gt;</code> 而不是在每一頁的檔案設定，是因為想要共用一個 favicon 圖就好。可是如果想要每一頁不一樣，那 <code>pages/_app.js</code> 裡的還是可以放著，只是在其他 pages 多加 <code>&lt;link&gt;</code> 還有記得加 <code>key=&quot;icon&quot;</code> 在每一個 <code>&lt;link&gt;</code> 就行了！因為 Next.js 會自動只渲染最後的 <code>&lt;link&gt;</code>～ 所以可以像下面這些圖，每一頁用不同的 favicon 圖喔。</p>
<p>首頁的<br />
<img src="https://i.imgur.com/xtG7VTp.png" alt="Home" /></p>
<p>部落格頁面<br />
<img src="https://i.imgur.com/pt8tcq2.png" alt="Blogs" /></p>
<p>部落格文章的頁面<br />
<img src="https://i.imgur.com/PyFuIic.png" alt="Post" /></p>
<h2>小結</h2>
<p>系列文快寫完了，可是專案還沒做完，還有很多還沒做的，尤其是設計方面Ｑ 所以文章也開始不知道要怎麼寫了～ 真的應該要好好規劃一下，不能每天晚上下班後才開始想文章內容ＸＤ 真的會寫不出來。</p>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。</p>
<p>祝大家上班上課愉快！</p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://nextjs.org/docs/api-reference/next/head">Next.js <code>next/head</code></a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10277582">#19 No-code 之旅 — Avatars Libraries</a>
</li>
</ul>


嗨嗨！今天來講一下怎麼設定網站的 favicon！還有用 Next.js 也可以快速設定每個頁面用不一樣的 favicon 喔！還不知道什麼是 favicon 的大家，可以看看瀏覽器的 tab，不是會看到網站的 title 之外，還有一個小小的圖，那就是 favicon ～

Favicon
Favicon 的圖最多是用 .ico 檔，不過其實也支援 .png 和 .svg 檔案喔～ 想要用 .ico 的話，通常是提供這三個大小 16x16, 32x32, and 48x48 pixels。如果決定用 .png 檔要注意的是 IE11 之前不支援 (不過現在應該不會遇到這問題了ＸＤ)。最後是 .svg，好處就是向量圖，所以檔案會比較小可是圖又可以被放大～ 不過瀏覽器支援度不高 (目前只有 Chrome, Firefox, Opera)！
那現在要怎麼在 Next.js 設定 favicon 呢？其實跟一般 HTML 一樣，放 <link> 在 <head> 裡，不過在 Next.js 就改用 <Head> component：
import Head from "next/head";

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <Head>
        <title>No-code by Jade</title>
        <link
          key="icon"
          rel="icon"
          href="https://source.boringavatars.com/beam/32/Home?colors=AFC7B9,FFE1C9,FAC7B4,FCA89D,998B82"
        />
      </Head>
      <Component {...pageProps} />
    </div>
  );
}
export default MyApp;

我選擇放在 pages/_app.js 裡的 <Head> 而不是在每一頁的檔案設定，是因為想要共用一個 favicon 圖就好。可是如果想要每一頁不一樣，那 pages/_app.js 裡的還是可以放著，只是在其他 pages 多加 <link> 還有記得加 key="icon" 在每一個 <link> 就行了！因為 Next.js 會自動只渲染最後的 <link>～ 所以可以像下面這些圖，每一頁用不同的 favicon 圖喔。
首頁的

部落格頁面

部落格文章的頁面

小結
系列文快寫完了，可是專案還沒做完，還有很多還沒做的，尤其是設計方面Ｑ 所以文章也開始不知道要怎麼寫了～ 真的應該要好好規劃一下，不能每天晚上下班後才開始想文章內容ＸＤ 真的會寫不出來。
大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。
祝大家上班上課愉快！
晚安 <3
看更多
Next.js next/head


#19 No-code 之旅 — Avatars Libraries

嗨嗨！今天來講一下怎麼設定網站的 favicon！還有用 Next.js 也可以快速設定每個頁面用不一樣的 favicon 喔！還不知道什麼是 favicon 的大家，可以看看瀏覽器的 tab，...

#27 No-code 之旅 — 客製化 Favicon ～

<p>連假結束了Ｑ 今天來講怎麼實作 dark mode 還有怎麼使用 Google Fonts 讓網站看起來更好看！我們會用 Chakra UI 去實作 dark mode 功能，所以還不知道 Ch...

<p>連假結束了Ｑ 今天來講怎麼實作 dark mode 還有怎麼使用 Google Fonts 讓網站看起來更好看！我們會用 Chakra UI 去實作 dark mode 功能，所以還不知道 Chakra UI 的大家可以看這兩篇<a href="https://ithelp.ithome.com.tw/articles/10274188">簡介文</a>和<a href="https://ithelp.ithome.com.tw/articles/10274751">客製化篇</a>。</p>
<p><img src="https://i.imgur.com/NGh53Wy.png" alt="Fonts" /></p>
<h2>Font Optimization</h2>
<p>Next.js 有提供內建的字體效能優化，不過目前只支援 Google Fonts 和 Typekit，當然還是可以用其他的字體庫，只是不會被優化喔～ Next.js 在 build 過程中會自動把字體的 <code>&lt;link&gt;</code> 轉成 inline font CSS。這麼做會減少 <a href="https://web.dev/fcp/">First Contentful Paint (FCP)</a> 和 <a href="https://web.dev/fcp/">Largest Contentful Paint (LCP)</a> 的時間，讓使用者可以比較快看到網頁。</p>
<pre><code class="language-xml=">&lt;!-- 前 --&gt;
&lt;link
  href=&quot;https://fonts.googleapis.com/css2?family=Poppins&quot;
  rel=&quot;stylesheet&quot;
/&gt;

&lt;!-- 後 --&gt;
&lt;style data-href=&quot;https://fonts.googleapis.com/css2?family=Poppins&quot;&gt;
  @font-face{font-family:'Poppins';font-style:normal...
&lt;/style&gt;
</code></pre>
<h2>加入 Google Fonts</h2>
<p>那怎麼把 Google Fonts 加入到專案裡呢？有兩種方式，第一是如果字體只會用在單一頁面，那可以放在該 page 的 <code>&lt;Head&gt;</code> 裡：</p>
<pre><code class="language-xml=">&lt;!-- pages/index.js --&gt;
&lt;Head&gt;
  &lt;link
    href=&quot;https://fonts.googleapis.com/css2?family=Poppins&amp;display=optional&quot;
    rel=&quot;stylesheet&quot;
  /&gt;
&lt;/Head&gt;
</code></pre>
<p>可是如果想要在整個專案裡用字體，可以加在我們做的 <a href="https://nextjs.org/docs/advanced-features/custom-document">Custom <code>Document</code></a>：</p>
<pre><code class="language-javascript=">// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      &lt;Html&gt;
        &lt;Head&gt;
          &lt;link
            href=&quot;https://fonts.googleapis.com/css2?family=Poppins&amp;display=optional&quot;
            rel=&quot;stylesheet&quot;
          /&gt;
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/Html&gt;
    )
  }
}

export default MyDocument
</code></pre>
<p>不想要用字體優化的話，可以在 <code>next.config.js</code> 裡設定喔：</p>
<pre><code class="language-javascript=">module.exports = {
  optimizeFonts: false,
}
</code></pre>
<h2>使用 Google Fonts</h2>
<p>把字體加入到專案之後，該怎麼使用呢？因為這專案採用 Chakra UI，所以我們可以延伸 Chakra UI 的 <code>theme</code>：</p>
<pre><code class="language-javascript=">// config/theme.js
import { extendTheme } from &quot;@chakra-ui/react&quot;;

// 延伸 Chakra UI 的 global styles
const styles = {
  global: {
    body: {
      // 設定整個 body 的 fontFamily
      fontFamily: &quot;'Poppins', sans-serif&quot;,
    },
  },
};

const theme = extendTheme({ styles });

export default theme;
</code></pre>
<p>那現在我們要把新的 <code>theme</code> 塞給 <code>ChakraProvider</code>，讓所有 components 可以吃到最新的 custom global styles：</p>
<pre><code class="language-javascript=">import { ChakraProvider } from &quot;@chakra-ui/react&quot;
import theme from &quot;config/theme&quot;

function MyApp({ Component, pageProps }) {
  return (
    // 提供 custom theme 給 ChakraProvider
    &lt;ChakraProvider theme={theme}&gt;
      &lt;Component {...pageProps} /&gt;
    &lt;/ChakraProvider&gt;
  )
}

export default MyApp
</code></pre>
<h2>Dark Mode</h2>
<p>在之前的<a href="https://ithelp.ithome.com.tw/articles/10274751">客製化篇</a>提過怎麼使用 Chakra UI 的 color mode，今天快速複習一下，在 <code>config/theme.js</code> 加：</p>
<pre><code class="language-javascript=">// config/theme.js
import { extendTheme } from &quot;@chakra-ui/react&quot;;

const styles = {...};

const config = {
  initialColorMode: &quot;light&quot;, // 設定預設的模式
  useSystemColorMode: false, // 要不要跟著使用者系統的 color mode
}

// 把 config 加進 theme 裡
const theme = extendTheme({ config, styles });

export default theme;
</code></pre>
<p>然後我們要加 <code>ColorModeScript</code> 到 Next.js 的 custom document (<code>pages/_document.js</code>) 裡：</p>
<pre><code class="language-javascript=">// pages/_document.js

import { ColorModeScript } from &quot;@chakra-ui/react&quot;
import NextDocument, { Html, Head, Main, NextScript } from &quot;next/document&quot;
import theme from &quot;./theme&quot;

export default class Document extends NextDocument {
  render() {
    return (
      &lt;Html lang=&quot;en&quot;&gt;
        &lt;Head&gt;...字體！...&lt;/Head&gt;
        &lt;body&gt;
          // body 裡的第一個～
          &lt;ColorModeScript initialColorMode={theme.config.initialColorMode} /&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/Html&gt;
    )
  }
}
</code></pre>
<p>最後我們要加一個按鈕讓使用者切換模式，我們可以使用 Chakra UI 提供的其中一個 hook，<code>useColorMode</code>：</p>
<pre><code class="language-javascript=">import { Button } from &quot;@chakra-ui/button&quot;;
import { useColorMode } from &quot;@chakra-ui/color-mode&quot;;
import { Container } from &quot;@chakra-ui/layout&quot;;
import React from &quot;react&quot;;

function AppFrame({ children }) {
  // 使用 Chakra UI 提供的 useColorMode
  // colorMode：現在的模式
  // toggleColorMode：切換模式的 function
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    &lt;Container p=&quot;6&quot;&gt;
      &lt;Button mb=&quot;4&quot; onClick={toggleColorMode}&gt;
        Toggle {colorMode === &quot;light&quot; ? &quot;Dark&quot; : &quot;Light&quot;}
      &lt;/Button&gt;
      {children} // 網頁內容～
    &lt;/Container&gt;
  );
}
export default AppFrame;
</code></pre>
<p>耶～ 做完了，可以看下面的圖！</p>
<p><img src="https://i.imgur.com/t9j5Vhb.gif" alt="Dark mode" /></p>
<h2>小結</h2>
<p>越來越多網站有提供 dark mode 了，尤其是這種部落格網站很需要長時間閱讀的，加了 dark mode 功能應該會讓使用者開心 (吧？ＸＤ) 而且用 Chakra UI 真的很方便～ 也使用了比較可愛的字體 (<code>Poppins</code>)，現在剩下整個網站的樣式設計。設計好難Ｑ</p>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。</p>
<p>祝大家上班上課愉快！</p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://chakra-ui.com/docs/features/color-mode">Chakra UI Color Mode</a>
</li>
<li>
<a href="https://chakra-ui.com/docs/features/global-styles">Chakra UI Global Styles</a>
</li>
<li>
<a href="https://nextjs.org/docs/basic-features/font-optimization">Next.js Font Optimization</a>
</li>
</ul>


連假結束了Ｑ 今天來講怎麼實作 dark mode 還有怎麼使用 Google Fonts 讓網站看起來更好看！我們會用 Chakra UI 去實作 dark mode 功能，所以還不知道 Chakra UI 的大家可以看這兩篇簡介文和客製化篇。

Font Optimization
Next.js 有提供內建的字體效能優化，不過目前只支援 Google Fonts 和 Typekit，當然還是可以用其他的字體庫，只是不會被優化喔～ Next.js 在 build 過程中會自動把字體的 <link> 轉成 inline font CSS。這麼做會減少 First Contentful Paint (FCP) 和 Largest Contentful Paint (LCP) 的時間，讓使用者可以比較快看到網頁。

<link
  href="https://fonts.googleapis.com/css2?family=Poppins"
  rel="stylesheet"
/>


<style data-href="https://fonts.googleapis.com/css2?family=Poppins">
  @font-face{font-family:'Poppins';font-style:normal...
</style>

加入 Google Fonts
那怎麼把 Google Fonts 加入到專案裡呢？有兩種方式，第一是如果字體只會用在單一頁面，那可以放在該 page 的 <Head> 裡：

<Head>
  <link
    href="https://fonts.googleapis.com/css2?family=Poppins&display=optional"
    rel="stylesheet"
  />
</Head>

可是如果想要在整個專案裡用字體，可以加在我們做的 Custom Document：
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Poppins&display=optional"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

不想要用字體優化的話，可以在 next.config.js 裡設定喔：
module.exports = {
  optimizeFonts: false,
}

使用 Google Fonts
把字體加入到專案之後，該怎麼使用呢？因為這專案採用 Chakra UI，所以我們可以延伸 Chakra UI 的 theme：
// config/theme.js
import { extendTheme } from "@chakra-ui/react";

// 延伸 Chakra UI 的 global styles
const styles = {
  global: {
    body: {
      // 設定整個 body 的 fontFamily
      fontFamily: "'Poppins', sans-serif",
    },
  },
};

const theme = extendTheme({ styles });

export default theme;

那現在我們要把新的 theme 塞給 ChakraProvider，讓所有 components 可以吃到最新的 custom global styles：
import { ChakraProvider } from "@chakra-ui/react"
import theme from "config/theme"

function MyApp({ Component, pageProps }) {
  return (
    // 提供 custom theme 給 ChakraProvider
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

Dark Mode
在之前的客製化篇提過怎麼使用 Chakra UI 的 color mode，今天快速複習一下，在 config/theme.js 加：
// config/theme.js
import { extendTheme } from "@chakra-ui/react";

const styles = {...};

const config = {
  initialColorMode: "light", // 設定預設的模式
  useSystemColorMode: false, // 要不要跟著使用者系統的 color mode
}

// 把 config 加進 theme 裡
const theme = extendTheme({ config, styles });

export default theme;

然後我們要加 ColorModeScript 到 Next.js 的 custom document (pages/_document.js) 裡：
// pages/_document.js

import { ColorModeScript } from "@chakra-ui/react"
import NextDocument, { Html, Head, Main, NextScript } from "next/document"
import theme from "./theme"

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head>...字體！...</Head>
        <body>
          // body 裡的第一個～
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

最後我們要加一個按鈕讓使用者切換模式，我們可以使用 Chakra UI 提供的其中一個 hook，useColorMode：
import { Button } from "@chakra-ui/button";
import { useColorMode } from "@chakra-ui/color-mode";
import { Container } from "@chakra-ui/layout";
import React from "react";

function AppFrame({ children }) {
  // 使用 Chakra UI 提供的 useColorMode
  // colorMode：現在的模式
  // toggleColorMode：切換模式的 function
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <Container p="6">
      <Button mb="4" onClick={toggleColorMode}>
        Toggle {colorMode === "light" ? "Dark" : "Light"}
      </Button>
      {children} // 網頁內容～
    </Container>
  );
}
export default AppFrame;

耶～ 做完了，可以看下面的圖！

小結
越來越多網站有提供 dark mode 了，尤其是這種部落格網站很需要長時間閱讀的，加了 dark mode 功能應該會讓使用者開心 (吧？ＸＤ) 而且用 Chakra UI 真的很方便～ 也使用了比較可愛的字體 (Poppins)，現在剩下整個網站的樣式設計。設計好難Ｑ
大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。
祝大家上班上課愉快！
晚安 <3
看更多
Chakra UI Color Mode


Chakra UI Global Styles


Next.js Font Optimization

連假結束了Ｑ 今天來講怎麼實作 dark mode 還有怎麼使用 Google Fonts 讓網站看起來更好看！我們會用 Chakra UI 去實作 dark mode 功能，所以還不知道 Ch...

#26 No-code 之旅 — 實作 Dark Mode 和加入 Google Fonts ft. Chakra UI

<p>嗨大家！像昨天說的，今天會講怎麼用 SWR 實作 Notion 部落格的 pagination (分頁) 功能～ 還沒看昨天的文章的大家，可以點<a href="https://ithelp.i...

<p>嗨大家！像昨天說的，今天會講怎麼用 SWR 實作 Notion 部落格的 pagination (分頁) 功能～ 還沒看昨天的文章的大家，可以點<a href="https://ithelp.ithome.com.tw/articles/10279880">這裡</a>，今天的文章會用到昨天的 <a href="https://ithelp.ithome.com.tw/articles/10269316">API Route</a> 喔！還不知道什麼是 SWR 的大家也可以看<a href="https://ithelp.ithome.com.tw/articles/10271427">這篇</a>～</p>
<p><img src="https://i.imgur.com/2tNG44h.png" alt="Pagination" /></p>
<h2>API Route</h2>
<p>在昨天的<a href="https://ithelp.ithome.com.tw/articles/10269316">文章</a>我們開了一個新的 API，路徑為 <code>/api/blogs</code>，這 API 會回傳某 Notion database 的內容 (部落格文章)：</p>
<pre><code class="language-javascript=">// pages/api/blogs.js
import { queryDatabase } from &quot;lib/notion&quot;;

export default async function handler(req, res) {
  // pagination 的 cursor
  const { cursor } = req.query;
  // 去 query Notion database  
  const resp = await queryDatabase({ start_cursor: cursor });

  // 用 Next.js 提供的 response helper 回傳 JSON 格式的 `resp`
  res.json(resp);
}
</code></pre>
<h2><code>getStaticProps</code></h2>
<p>在使用 API Route 之前，我們先去 <code>pages/blogs.js</code> 裡寫 <code>getStaticProps</code> 的 data fetching 方式，來抓取資料～</p>
<pre><code class="language-javascript=">// pages/blogs.js
export const getStaticProps = async () =&gt; {
  // 去 query Notion database
  const blogs = await queryDatabase();

  return {
    props: { fallback: { &quot;/api/blogs&quot;: blogs } },
    revalidate: 60, // 過了 60 秒後至少會更新一次資料
  };
};
</code></pre>
<p>看了上面的 code 之後，可能會發現跟之前的寫法不太一樣。原本應該可以直接回傳 <code>props: { blogs }</code>，可是今天是回傳 <code>props: { fallback: { &quot;/api/blogs&quot;: blogs } }</code>。為什麼呢？</p>
<ul>
<li>這麼做的原因是想要用 SWR 在 client-side 抓取資料，</li>
<li>不過不希望頁面的 build 的過程拿不到資料導致產生的 HTML 檔案沒有內容</li>
<li>所以在 build 時候先抓取資料，然後把這些資料給該 page 的 props</li>
<li>
<code>fallback</code> 物件包含各 SWR <strong>key</strong> 的備份資料 (沒內容時的預設資料)</li>
<li>其中一個 <strong>key</strong> 是 <code>/api/blogs</code> 就是我們 API Route 的路徑</li>
<li>想了解更多可以看<a href="https://ithelp.ithome.com.tw/articles/10271427">這篇</a>的 <strong>Pre-rendering</strong> 小段</li>
</ul>
<h2><code>SWRConfig</code></h2>
<p>在上一段已經拿完的資料，該怎麼提供給 components 去顯示呢？該怎麼給 <code>useSWR</code> 當 fallback 料？答案就是透過 <code>SWRConfig</code> 的 context！</p>
<pre><code class="language-javascript=">const Blogs = ({ fallback }) =&gt; {
  return (
    &lt;main&gt;
      // 用 SWRConfig 去包需要用到 fallback 資料的 components
      &lt;SWRConfig value={{ fallback }}&gt;
        // 部落個文章的 list
        &lt;List /&gt;
      &lt;/SWRConfig&gt;
    &lt;/main&gt;
  );
};
</code></pre>
<p><code>SWRConfig</code> 裡的所有 components 可以用 <code>useSWR</code> 拿到 fallback 資料～</p>
<h2>Infinite Loading</h2>
<p>SWR 提供兩種 pagination 模式，一個是一般的上下頁那種，另一種是可以一直按 load more 的 infinite loading。今天這篇文是用 <code>useSWRInfinite</code>，也就是頁面可以一直往下滑的那種，用法跟一般的 <code>useSWR</code> 類似：</p>
<pre><code class="language-javascript=">import useSWRInfinite from 'swr/infinite'

const { data, error, isValidating, mutate, size, setSize } = useSWRInfinite(
  getKey, fetcher?, options?
)
</code></pre>
<p>不過要注意的是他第一個 parameter 不是 <code>key</code> 而是 <code>getKey</code>，一個回傳 <code>key</code> 的 function：</p>
<pre><code class="language-javascript=">const getKey = (pageIndex, previousPageData) =&gt; {
  if (previousPageData &amp;&amp; !previousPageData.length) return null // 到最後一頁了
  return `/api/blogs?page=${pageIndex}` // 回傳 SWR key
}
</code></pre>
<h2><code>getKey</code></h2>
<p>上面的 <code>getKey</code> function 只是例子，而且他是用 <code>pageIndex</code> 做分頁的，可是 Notion SDK 是用 <code>cursor</code> 做分頁，所以我們可以寫一個 cursor based 的 <code>getKey</code>：</p>
<pre><code class="language-javascript=">const getKey = (pageIndex,previousData) =&gt; {
  if (pageIndex === 0) {
    return &quot;/api/blogs&quot;; // 第ㄧ頁
  }
  return previousData &amp;&amp; previousData.has_more &amp;&amp; previousData.next_cursor
    ? `/api/blogs?cursor=${previousData.next_cursor}` // key 加 cursor
    : null; // 到底
};
</code></pre>
<h2><code>List</code> component</h2>
<p>現在可以寫 component 來顯示資料了！</p>
<pre><code class="language-javascript=">const List = () =&gt; {
  const { data, size, setSize } = useSWRInfinite(getKey, fetcher);

  if (!data) {
    return &lt;p&gt;Loading...&lt;/p&gt;;
  }

  return (
    &lt;div&gt;
      // array of API responses
      {data.map((blogs) =&gt;
        // results 為 page list
        blogs.results.map((page) =&gt; (
          &lt;Box key={page.id}&gt;
            &lt;AvatarComponent size={80} user={page.properties.Owner} /&gt;
            // Notion page 的 Title 資料格式比較複雜ＸＤ
            {page.properties.Title.type === &quot;title&quot; &amp;&amp;
              page.properties.Title.title.map((t) =&gt; t.plain_text).join(&quot; &quot;)}
          &lt;/Box&gt;
        ))
      )}
      &lt;Button onClick={() =&gt; setSize(size + 1)}&gt;
        Load more
      &lt;/Button&gt;
    &lt;/div&gt;
  );
};
</code></pre>
<p>這裡要注意，如果用 <code>useSWR</code> 的話，<code>data</code> 會是 API 回傳的資料，也就是 <code>data == blogs == { results }</code>。可是因為我們用 <code>useSWRInfinite</code>，<code>data</code> 變成是 array (陣列) 格式，裡面包含很多個 API response 為一頁，</p>
<pre><code class="language-javascript=">// data
[
  API response 1, // 第一頁
  API response 2, // 第二頁
  ...
]

</code></pre>
<p>所以需要用兩個回圈去顯示資料喔！最後給大家看成果～</p>
<p><img src="https://i.imgur.com/1Pmvmm3.gif" alt="Load more" /></p>
<h2>小結</h2>
<p>耶～ 終於做完部落格的分頁功能了，而且今天寫得還滿順利，SWR 配 Next.js 的 API Routes 真的很讚！而且用 SWR 資料會自動被 cache，所以只有第一次 loading 會比較久。大家有什麼問題都可以問喔～</p>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。</p>
<p>祝大家連假愉快！</p>
<p>午安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://swr.vercel.app/docs/with-nextjs">SWR Pre-rendering</a>
</li>
<li>
<a href="https://swr.vercel.app/docs/pagination">SWR Pagination</a>
</li>
<li>
<a href="https://developers.notion.com/reference/pagination">Notion SDK Pagination</a>
</li>
</ul>


嗨大家！像昨天說的，今天會講怎麼用 SWR 實作 Notion 部落格的 pagination (分頁) 功能～ 還沒看昨天的文章的大家，可以點這裡，今天的文章會用到昨天的 API Route 喔！還不知道什麼是 SWR 的大家也可以看這篇～

API Route
在昨天的文章我們開了一個新的 API，路徑為 /api/blogs，這 API 會回傳某 Notion database 的內容 (部落格文章)：
// pages/api/blogs.js
import { queryDatabase } from "lib/notion";

export default async function handler(req, res) {
  // pagination 的 cursor
  const { cursor } = req.query;
  // 去 query Notion database  
  const resp = await queryDatabase({ start_cursor: cursor });

  // 用 Next.js 提供的 response helper 回傳 JSON 格式的 `resp`
  res.json(resp);
}

getStaticProps
在使用 API Route 之前，我們先去 pages/blogs.js 裡寫 getStaticProps 的 data fetching 方式，來抓取資料～
// pages/blogs.js
export const getStaticProps = async () => {
  // 去 query Notion database
  const blogs = await queryDatabase();

  return {
    props: { fallback: { "/api/blogs": blogs } },
    revalidate: 60, // 過了 60 秒後至少會更新一次資料
  };
};

看了上面的 code 之後，可能會發現跟之前的寫法不太一樣。原本應該可以直接回傳 props: { blogs }，可是今天是回傳 props: { fallback: { "/api/blogs": blogs } }。為什麼呢？
這麼做的原因是想要用 SWR 在 client-side 抓取資料，
不過不希望頁面的 build 的過程拿不到資料導致產生的 HTML 檔案沒有內容
所以在 build 時候先抓取資料，然後把這些資料給該 page 的 props
fallback 物件包含各 SWR key 的備份資料 (沒內容時的預設資料)
其中一個 key 是 /api/blogs 就是我們 API Route 的路徑
想了解更多可以看這篇的 Pre-rendering 小段
SWRConfig
在上一段已經拿完的資料，該怎麼提供給 components 去顯示呢？該怎麼給 useSWR 當 fallback 料？答案就是透過 SWRConfig 的 context！
const Blogs = ({ fallback }) => {
  return (
    <main>
      // 用 SWRConfig 去包需要用到 fallback 資料的 components
      <SWRConfig value={{ fallback }}>
        // 部落個文章的 list
        <List />
      </SWRConfig>
    </main>
  );
};

SWRConfig 裡的所有 components 可以用 useSWR 拿到 fallback 資料～
Infinite Loading
SWR 提供兩種 pagination 模式，一個是一般的上下頁那種，另一種是可以一直按 load more 的 infinite loading。今天這篇文是用 useSWRInfinite，也就是頁面可以一直往下滑的那種，用法跟一般的 useSWR 類似：
import useSWRInfinite from 'swr/infinite'

const { data, error, isValidating, mutate, size, setSize } = useSWRInfinite(
  getKey, fetcher?, options?
)

不過要注意的是他第一個 parameter 不是 key 而是 getKey，一個回傳 key 的 function：
const getKey = (pageIndex, previousPageData) => {
  if (previousPageData && !previousPageData.length) return null // 到最後一頁了
  return `/api/blogs?page=${pageIndex}` // 回傳 SWR key
}

getKey
上面的 getKey function 只是例子，而且他是用 pageIndex 做分頁的，可是 Notion SDK 是用 cursor 做分頁，所以我們可以寫一個 cursor based 的 getKey：
const getKey = (pageIndex,previousData) => {
  if (pageIndex === 0) {
    return "/api/blogs"; // 第ㄧ頁
  }
  return previousData && previousData.has_more && previousData.next_cursor
    ? `/api/blogs?cursor=${previousData.next_cursor}` // key 加 cursor
    : null; // 到底
};

List component
現在可以寫 component 來顯示資料了！
const List = () => {
  const { data, size, setSize } = useSWRInfinite(getKey, fetcher);

  if (!data) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      // array of API responses
      {data.map((blogs) =>
        // results 為 page list
        blogs.results.map((page) => (
          <Box key={page.id}>
            <AvatarComponent size={80} user={page.properties.Owner} />
            // Notion page 的 Title 資料格式比較複雜ＸＤ
            {page.properties.Title.type === "title" &&
              page.properties.Title.title.map((t) => t.plain_text).join(" ")}
          </Box>
        ))
      )}
      <Button onClick={() => setSize(size + 1)}>
        Load more
      </Button>
    </div>
  );
};

這裡要注意，如果用 useSWR 的話，data 會是 API 回傳的資料，也就是 data == blogs == { results }。可是因為我們用 useSWRInfinite，data 變成是 array (陣列) 格式，裡面包含很多個 API response 為一頁，
// data
[
  API response 1, // 第一頁
  API response 2, // 第二頁
  ...
]


所以需要用兩個回圈去顯示資料喔！最後給大家看成果～

小結
耶～ 終於做完部落格的分頁功能了，而且今天寫得還滿順利，SWR 配 Next.js 的 API Routes 真的很讚！而且用 SWR 資料會自動被 cache，所以只有第一次 loading 會比較久。大家有什麼問題都可以問喔～
大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。
祝大家連假愉快！
午安 <3
看更多
SWR Pre-rendering


SWR Pagination


Notion SDK Pagination

嗨大家！像昨天說的，今天會講怎麼用 SWR 實作 Notion 部落格的 pagination (分頁) 功能～ 還沒看昨天的文章的大家，可以點<a href="https://ithelp.i...

#25 No-code 之旅 — 實作 Notion 部落格 Pagination (分頁) 功能 ft. SWR

<p>嗨大家！今天在串 Notion SDK 時因為想要實作 pagination (分頁) 的關係，才發現在 client-side 呼叫會遇到 CORS 問題。這時候想到可以自己寫個 API Ro...

<p>嗨大家！今天在串 Notion SDK 時因為想要實作 pagination (分頁) 的關係，才發現在 client-side 呼叫會遇到 CORS 問題。這時候想到可以自己寫個 API Route，然後在後端的 code 呼叫 SDK！這樣就可以避免 CORS 問題了～ 所以今天來講一下怎麼做的！</p>
<p><img src="https://i.imgur.com/TphOWTX.png" alt="API" /></p>
<h2>API Routes 簡介</h2>
<p>API Routes 主要是讓我們可以在 Next.js 專案中自己開 API，而且是跑在後端的喔！所以資料庫操作什麼的都很方便，也不會增肥前端的程式包 (bundle size)。<br>因為之前有寫過一篇 API Routes 的簡介，所以不會再重複了～ 想知道更多可以看看這篇喔！</p>
<p>點我 → <a href="https://ithelp.ithome.com.tw/articles/10269316">#06 No-code 之旅 — 用 Next.js 解決前後端？API Routes 簡介</a></p>
<h2>後端</h2>
<p>像<a href="https://ithelp.ithome.com.tw/articles/10269316">這篇</a>提到的，想要用 API Route 需要在 <code>pages/api</code> 資料夾裡新增檔案，例如 <code>blogs.js</code> 然後裡面要 default export 一個 handler function，來處理請求：</p>
<pre><code class="language-javascript=">// pages/api/blogs.js
import { queryDatabase } from &quot;lib/notion&quot;;

export default async function handler(req, res) {
  // 去 query Notion database  
  const resp = await queryDatabase();

  // 用 Next.js 提供的 response helper 回傳 JSON 格式的 `resp`
  res.json(resp);
}
</code></pre>
<p>上面的 <code>queryDatabase</code> 是使用 Notion SDK 抓取某 database 的資料：</p>
<pre><code class="language-javascript=">// lib/notion.js
const notion = new Client({
  auth: process.env.NOTION_TOKEN,
});

export const queryDatabase = async (params) =&gt; {
  const response = await notion.databases.query({
    database_id: process.env.NOTION_DATABASE_ID,
    ...params,
  });

  return response;
};
</code></pre>
<p>如果想要更了解 Notion SDK，可以看看之前寫的兩篇文章～</p>
<ul>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10272845">#11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10277143">#18 No-code 之旅 — 讀取資料庫來實作部落格 ft. Notion SDK</a>
</li>
</ul>
<h2>前端</h2>
<p>寫完 API 之後，我們可以在前端的 code 使用了！我自己會想要用 SWR 做資料管理，可是今天的文章先用 <code>fetch</code> API 就好～</p>
<pre><code class="language-javascript=">const Blogs = () =&gt; {
  const [blogs, setBlogs] = useState();
  
  useEffect(() =&gt; {
    fetch(&quot;/api/blogs&quot;).then(d =&gt; d.json()).then(d =&gt; setBlogs(d));
  }, []);
  
  return (...);
}
</code></pre>
<p>所以我們可以用 <code>fetch</code> 直接打到 <code>/api/blogs</code> 這個路徑，然後我們 Next.js 的伺服器端會用 <code>handler</code> function 去處理請求，抓完資料再去回傳 response 到前端在 component 中顯示～ 這樣終於解決原本遇到 CORS 的問題！</p>
<h2>小結</h2>
<p>今天串資料串的有點痛苦ＸＤ 遇到各種問題，所以比較晚寫文章Ｑ 最後決定用 API Routes 跟 Notion 溝通，之後會再用 SWR 來同步資料。應該是明天的文章喔！當初想要在前後端都跟 Notion 溝通，不只在後端而已，是因為想要做分頁，不然一開始在 <code>getStaticProps</code> 抓完資料其實很足夠了。</p>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。</p>
<p>祝大家連假愉快！</p>
<p>晚安 &lt;3</p>


嗨大家！今天在串 Notion SDK 時因為想要實作 pagination (分頁) 的關係，才發現在 client-side 呼叫會遇到 CORS 問題。這時候想到可以自己寫個 API Route，然後在後端的 code 呼叫 SDK！這樣就可以避免 CORS 問題了～ 所以今天來講一下怎麼做的！

API Routes 簡介
API Routes 主要是讓我們可以在 Next.js 專案中自己開 API，而且是跑在後端的喔！所以資料庫操作什麼的都很方便，也不會增肥前端的程式包 (bundle size)。
因為之前有寫過一篇 API Routes 的簡介，所以不會再重複了～ 想知道更多可以看看這篇喔！
點我 → #06 No-code 之旅 — 用 Next.js 解決前後端？API Routes 簡介
後端
像這篇提到的，想要用 API Route 需要在 pages/api 資料夾裡新增檔案，例如 blogs.js 然後裡面要 default export 一個 handler function，來處理請求：
// pages/api/blogs.js
import { queryDatabase } from "lib/notion";

export default async function handler(req, res) {
  // 去 query Notion database  
  const resp = await queryDatabase();

  // 用 Next.js 提供的 response helper 回傳 JSON 格式的 `resp`
  res.json(resp);
}

上面的 queryDatabase 是使用 Notion SDK 抓取某 database 的資料：
// lib/notion.js
const notion = new Client({
  auth: process.env.NOTION_TOKEN,
});

export const queryDatabase = async (params) => {
  const response = await notion.databases.query({
    database_id: process.env.NOTION_DATABASE_ID,
    ...params,
  });

  return response;
};

如果想要更了解 Notion SDK，可以看看之前寫的兩篇文章～
#11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK


#18 No-code 之旅 — 讀取資料庫來實作部落格 ft. Notion SDK


前端
寫完 API 之後，我們可以在前端的 code 使用了！我自己會想要用 SWR 做資料管理，可是今天的文章先用 fetch API 就好～
const Blogs = () => {
  const [blogs, setBlogs] = useState();
  
  useEffect(() => {
    fetch("/api/blogs").then(d => d.json()).then(d => setBlogs(d));
  }, []);
  
  return (...);
}

所以我們可以用 fetch 直接打到 /api/blogs 這個路徑，然後我們 Next.js 的伺服器端會用 handler function 去處理請求，抓完資料再去回傳 response 到前端在 component 中顯示～ 這樣終於解決原本遇到 CORS 的問題！
小結
今天串資料串的有點痛苦ＸＤ 遇到各種問題，所以比較晚寫文章Ｑ 最後決定用 API Routes 跟 Notion 溝通，之後會再用 SWR 來同步資料。應該是明天的文章喔！當初想要在前後端都跟 Notion 溝通，不只在後端而已，是因為想要做分頁，不然一開始在 getStaticProps 抓完資料其實很足夠了。
大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。
祝大家連假愉快！
晚安 <3

嗨大家！今天在串 Notion SDK 時因為想要實作 pagination (分頁) 的關係，才發現在 client-side 呼叫會遇到 CORS 問題。這時候想到可以自己寫個 API Ro...

#24 No-code 之旅 — 在 Next.js 專案中實作 API

<p>大家～ 今天文章會也會很短Ｑ 昨天講了靜態網站可以部署到哪裡之後，今天來講 Next.js 的專案可以部署到哪？Next.js 專案基本上是用 Node.js server 起的，所以他跟一般靜...

<p>大家～ 今天文章會也會很短Ｑ 昨天講了靜態網站可以部署到哪裡之後，今天來講 Next.js 的專案可以部署到哪？Next.js 專案基本上是用 Node.js server 起的，所以他跟一般靜態網站不太一樣，也因為這樣他預設不能用 Github Pages 那種服務去部署喔 (要用別的方式去 build 專案)～</p>
<p><img src="https://i.imgur.com/BBp67xi.png" alt="Deploy" /></p>
<h2>Deployments (部署)</h2>
<p>先做個聲明，我沒有用過全部ＸＤ 今天的清單是可以支援部署 Node.js server 的服務，並不是把 Next.js 轉成靜態網站模式喔 (<code>next export</code>)：</p>
<ul>
<li>
<p><a href="https://vercel.com/">Vercel</a><br />
用 Next.js 通常會用 Vercel 部署，超好用～ 也可以綁定 Github repository 做自動化<br><img src="https://i.imgur.com/l9hStxo.png" alt="Vercel" /></p>
</li>
<li>
<p><a href="https://www.netlify.com/">Netlify</a><br />
現在也支援 Next.js 的部署！提供很多服務包含 serverless functions ～<br><img src="https://i.imgur.com/nyVGhZg.png" alt="Netlify" /></p>
</li>
<li>
<p><a href="https://www.heroku.com/">Heroku</a><br>支援各種後端語言，其中一個就是 Node.js！</p>
</li>
<li>
<p><a href="https://railway.app?referralCode=jade">Railway</a><br>最近知道的，超讚！還可以直接部署資料庫～<br><img src="https://i.imgur.com/vLhJd5J.jpg" alt="Railway" /></p>
</li>
<li>
<p><a href="https://render.com/">Render</a><br />
這也是剛找到的一個服務，他支援<a href="https://render.com/docs/deploy-nextjs-app">部署 Next.js 專案</a>，為 Node.js server 或是靜態網站都可以！<br><img src="https://i.imgur.com/MSxnng9.png" alt="Render" /></p>
</li>
<li>
<p><a href="https://cloud.google.com/appengine/docs/standard/nodejs/building-app">Google Cloud Platform (GCP)</a></p>
</li>
<li>
<p><a href="https://aws.amazon.com/amplify/">Amazon Amplify</a> (AWS) (<a href="https://aws.amazon.com/blogs/mobile/host-a-next-js-ssr-app-with-real-time-data-on-aws-amplify/">tutorial</a>)</p>
</li>
</ul>
<h2>小結</h2>
<p>今天也意外的忙，所以文章也很短ＱＱ 希望大家有部署的需求可以看看上面的清單！我個人還是很喜歡 Vercel 和 Netlify ＸＤ～</p>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。</p>
<p>祝大家連假愉快！</p>
<p>晚安 &lt;3</p>


大家～ 今天文章會也會很短Ｑ 昨天講了靜態網站可以部署到哪裡之後，今天來講 Next.js 的專案可以部署到哪？Next.js 專案基本上是用 Node.js server 起的，所以他跟一般靜態網站不太一樣，也因為這樣他預設不能用 Github Pages 那種服務去部署喔 (要用別的方式去 build 專案)～

Deployments (部署)
先做個聲明，我沒有用過全部ＸＤ 今天的清單是可以支援部署 Node.js server 的服務，並不是把 Next.js 轉成靜態網站模式喔 (next export)：
Vercel

Netlify

Heroku
支援各種後端語言，其中一個就是 Node.js！
Railway
最近知道的，超讚！還可以直接部署資料庫～

Render
部署 Next.js 專案，為 Node.js server 或是靜態網站都可以！

Google Cloud Platform (GCP)
Amazon Amplify (AWS) (tutorial)
小結
今天也意外的忙，所以文章也很短ＱＱ 希望大家有部署的需求可以看看上面的清單！我個人還是很喜歡 Vercel 和 Netlify ＸＤ～
大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。
祝大家連假愉快！
晚安 <3

大家～ 今天文章會也會很短Ｑ 昨天講了靜態網站可以部署到哪裡之後，今天來講 Next.js 的專案可以部署到哪？Next.js 專案基本上是用 Node.js server 起的，所以他跟一般靜...

#23 No-code 之旅 — Next.js 網站可以部署到哪裡呢？

<p>大家～ 今天文章會特別短Ｑ 來講一下靜態網站可以部署到哪裡呢？大家應該常聽到 Github Pages，不過其實還有很多服務可以用！那今天我會列幾個好用而且免費的選項～</p>
<p><img ...

<p>大家～ 今天文章會特別短Ｑ 來講一下靜態網站可以部署到哪裡呢？大家應該常聽到 Github Pages，不過其實還有很多服務可以用！那今天我會列幾個好用而且免費的選項～</p>
<p><img src="https://i.imgur.com/dZrnuFE.png" alt="Deploy" /></p>
<h2>Deployments (部署)</h2>
<p>先做個聲明，我沒有用過全部ＸＤ</p>
<ul>
<li>
<p><a href="https://pages.github.com/">Github Pages</a><br />
如果有用 Github 的話，這方式最簡單！除了 Github Pages 以外，也有 <a href="https://docs.gitlab.com/ee/user/project/pages/">GitLab Pages</a><br><img src="https://i.imgur.com/NGDASM3.png" alt="Github Pages" /></p>
</li>
<li>
<p><a href="https://vercel.com/">Vercel</a><br />
用 Next.js 通常會用 Vercel 部署，超好用～ 也可以綁定 Github repository 做自動化<br><img src="https://i.imgur.com/l9hStxo.png" alt="Vercel" /></p>
</li>
<li>
<p><a href="https://www.netlify.com/">Netlify</a><br />
現在也支援 Next.js 的部署！提供很多服務包含 serverless functions ～<br><img src="https://i.imgur.com/nyVGhZg.png" alt="Netlify" /></p>
</li>
<li>
<p><a href="https://firebase.google.com/products/hosting">Firebase Hosting</a><br />
Firebase 也提供 Hosting 服務，而且有用到 Firebase 的話，可以用一個指令把 Hosting、Database、Functions 等服務都傳上去～<br><img src="https://i.imgur.com/q3UswOi.png" alt="Firebase Hosting" /></p>
</li>
<li>
<p><a href="https://surge.sh/">Surge</a><br />
最近才知道的服務，看起來超可愛的，而且評價都很好～<br><img src="https://i.imgur.com/SgyTu2S.png" alt="Surge" /></p>
</li>
<li>
<p><a href="https://render.com/">Render</a><br />
這也是剛找到的一個服務，他可以部署不只靜態網站，還可以部署 cron jobs、APIs 等東西<br><img src="https://i.imgur.com/MSxnng9.png" alt="Render" /></p>
</li>
<li>
<p><a href="https://cloud.google.com/storage/docs/hosting-static-website">Google Cloud Platform (GCP)</a></p>
</li>
<li>
<p>Amazon <a href="https://aws.amazon.com/amplify/">Amplify</a> / <a href="https://aws.amazon.com/s3/">S3</a> (AWS)</p>
</li>
</ul>
<h2>小結</h2>
<p>今天太忙了，所以文章很短ＱＱ 希望大家有部署的需求可以看看上面的清單！我個人很喜歡 Vercel 和 Netlify ～<br>大家有其他的服務也可以分享！</p>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。</p>
<p>祝大家明天上班上課愉快！</p>
<p>晚安 &lt;3</p>


大家～ 今天文章會特別短Ｑ 來講一下靜態網站可以部署到哪裡呢？大家應該常聽到 Github Pages，不過其實還有很多服務可以用！那今天我會列幾個好用而且免費的選項～

Deployments (部署)
先做個聲明，我沒有用過全部ＸＤ
Github Pages
GitLab Pages

Vercel

Netlify

Firebase Hosting

Surge

Render

Google Cloud Platform (GCP)
Amazon Amplify / S3 (AWS)
小結
今天太忙了，所以文章很短ＱＱ 希望大家有部署的需求可以看看上面的清單！我個人很喜歡 Vercel 和 Netlify ～
大家有其他的服務也可以分享！
大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。
祝大家明天上班上課愉快！
晚安 <3

大家～ 今天文章會特別短Ｑ 來講一下靜態網站可以部署到哪裡呢？大家應該常聽到 Github Pages，不過其實還有很多服務可以用！那今天我會列幾個好用而且免費的選項～
<img ...

#22 No-code 之旅 — 靜態網站可以部署到哪裡？～

<p>大家有沒有發現當有人在社群軟體分享網址的時候，通常除了網址本身還會看到一張縮圖加上網站的標題和描述？這就是用 Open Graph (OG) 設定出來的！今天會解釋一點點什麼是 OG tag (...

<p>大家有沒有發現當有人在社群軟體分享網址的時候，通常除了網址本身還會看到一張縮圖加上網站的標題和描述？這就是用 Open Graph (OG) 設定出來的！今天會解釋一點點什麼是 OG tag (標籤)，加上怎麼在 Next.js 專案中設定 OG 標籤～</p>
<p><img src="https://i.imgur.com/D9cZHL7.png" alt="OG" /></p>
<h2>Open Graph (OG) 簡介</h2>
<p>OG 的全名是 Open Graph Protocol，中文為 “開放社交關係圖”。OG 的目標是讓網頁在<strong>社交關係圖</strong>可以豐富的呈現出來。這協定讓我們分享任何網頁在社群軟體或其他地方時，不只用網址呈現，而用比較漂亮吸引人的方式呈現，例如縮圖、標題、描述等。這些資訊都跟 OG 有關，在做網站專案時我們要特別去做設定喔～<br>沒有設定其實也完全不影響功能，只是分享網頁的時候可能顯示的資訊並不是你想要的或是除了網址以外什麼都沒有。</p>
<h2>基本的 OG 標籤</h2>
<p>OG 標籤都會放在 <code>&lt;head&gt;</code> 裡，用 <code>&lt;meta&gt;</code> 標籤去設定：</p>
<ul>
<li>
<code>og:title</code> - 網頁標題</li>
<li>
<code>og:type</code> - 內容的媒體類型，預設為 <code>website</code>
</li>
<li>
<code>og:image</code> - 分享網頁時會顯示的縮圖</li>
<li>
<code>og:url</code> - 網頁的<a href="https://developers.facebook.com/docs/sharing/webmasters/getting-started/versioned-link">標準網址</a>，也就是這網頁在<strong>社交關係圖中</strong>的 ID</li>
</ul>
<p>來寫個例子，如果用這篇文章當範例：</p>
<pre><code class="language-xml=">&lt;!-- property 是標籤名稱，content 是標籤的值 --&gt;
&lt;meta property=&quot;og:url&quot; content=&quot;https://ithelp.ithome.com.tw/articles/10278469&quot; /&gt;
&lt;meta property=&quot;og:type&quot; content=&quot;article&quot; /&gt;
&lt;meta property=&quot;og:title&quot; content=&quot;#21 No-code 之旅 — 如何讓網站在分享時看起來漂亮和有吸引力？Open Graph (OG) 簡介&quot; /&gt;
&lt;meta property=&quot;og:description&quot; content=&quot;大家有沒有發現當有人在社群軟體分享網址的時候，通常除了網址本身還會看到一張縮圖加上網站的標題和描述？這就是用 Open Graph (OG) 設定出來的！今天會解釋一點點什麼是 OG tag (標籤)，加上怎麼在 Next.js 專案中設定 OG 標籤～&quot; /&gt;
&lt;meta property=&quot;og:image&quot; content=&quot;https://i.imgur.com/D9cZHL7.png&quot; /&gt;
</code></pre>
<p>有沒有發現上面的例子有出現新的標籤，就是 <code>og:description</code> 為網頁的描述或是簡短說明</p>
<h2>社群軟體的特別標籤</h2>
<p>除了一般的用 <code>og</code> 開頭的 OG 標籤之外，你可能會看到 <code>fb</code> 或 <code>twitter</code> 開頭的標籤，用途就是該社群軟體可以拿到更詳細的資訊而比較豐富的呈現方式喔～</p>
<h3>Facebook 標籤</h3>
<p>其實 Facebook 只有一個比較特別的標籤，也就是 <code>fb:app_id</code>。如果你有 Facebook 到粉專或 Facebook Page，可以用你的 <strong>App ID</strong> 來分析有幾個觀看者來自你的 Facebook 粉專。</p>
<h3>Twitter 標籤</h3>
<p>Twitter 提供比較多的 OG 標籤，雖然他們也可以用一般 OG 標籤的資訊去顯示內容，可是 Twitter 支援比較多客製化的內容～</p>
<ul>
<li>
<code>twitter:card</code>，必須要有的標籤，內容有四種選擇 <code>summary</code>，<code>summary_large_image</code>，<code>app</code>，<code>player</code>
</li>
<li>
<code>twitter:site</code>，網頁歸屬 (<code>@username</code>)，例如 <code>nytimes.com</code> 會設定 <code>@nytimes</code>
</li>
<li>
<code>twitter:creator</code>，網頁內容的創作者歸屬 (<code>@username</code>)</li>
</ul>
<p>以 <strong>iT 邦幫忙</strong> 為例子：</p>
<pre><code class="language-xml=">&lt;meta name=&quot;twitter:card&quot; content=&quot;summary_large_image&quot;&gt;
&lt;meta property=&quot;og:url&quot; content=&quot;https://ithelp.ithome.com.tw/&quot;&gt;
&lt;meta property=&quot;og:type&quot; content=&quot;website&quot;&gt;
&lt;meta property=&quot;og:title&quot; content=&quot;iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天&quot;&gt;
&lt;meta property=&quot;og:description&quot; content=&quot;iT 邦幫忙是 IT 領域的技術問答與分享社群，透過 IT 人互相幫忙，一起解決每天面臨的靠北時刻。一起來當 IT 人的超級英雄吧，拯救下一個卡關的 IT 人&quot;&gt;
&lt;meta property=&quot;og:image&quot; content=&quot;https://ithelp.ithome.com.tw/storage/image/fbpic.jpg&quot;&gt;
</code></pre>
<h2>在 Next.js 專案中加 OG 標籤</h2>
<p>因為 OG 標籤需要加在 <code>&lt;head&gt;</code> 裡，所以我們可以用 Next.js 的 <code>next/head</code> 提供的 <code>Head</code> 元件來加我們所需要的 OG tags ～</p>
<pre><code class="language-javascript=">import Head from 'next/head'

function IndexPage() {
  return (
    &lt;div&gt;
      &lt;Head&gt;
        &lt;title&gt;2021 iTHome Day 07&lt;/title&gt;
        &lt;meta name=&quot;description&quot; content=&quot;2021 iTHome Day 07 by Jade&quot; /&gt;
        // OG TAGS～～～
        &lt;meta property=&quot;og:title&quot; content=&quot;2021 iTHome Day 07&quot; /&gt;
        &lt;meta property=&quot;og:description&quot; content=&quot;2021 iTHome Day 07 by Jade&quot; /&gt;
        ...
      &lt;/Head&gt;
      &lt;p&gt;Hello world!&lt;/p&gt;
      ...
    &lt;/div&gt;
  )
}

export default IndexPage
</code></pre>
<p>如果有些標籤會重複出現在不同的頁面呢？我們也可以放在 <code>pages/_app.js</code> 裡！而且 Next.js 保證不會重複 render 一樣的標籤，前提是我們要給每個標籤一個 <code>key</code>：</p>
<pre><code class="language-xml=">&lt;!-- pages/_app.js 裡 --&gt;
&lt;Head&gt;
  &lt;title&gt;2021 iTHome Day 07&lt;/title&gt;
  &lt;meta property=&quot;og:title&quot; content=&quot;2021 iTHome Day 07&quot; key=&quot;title&quot; /&gt;
&lt;/Head&gt;

&lt;!-- pages/rss.js 裡 --&gt;
&lt;Head&gt;
  &lt;meta property=&quot;og:title&quot; content=&quot;RSS | 2021 iTHome Day 07&quot; key=&quot;title&quot; /&gt;
&lt;/Head&gt;
</code></pre>
<p>上面出現了兩個 <code>og:title</code> 的標籤，可是因為給了 <code>key=&quot;title&quot;</code> 讓 Next.js 知道這個指同一個標籤，Next.js 只會 render 最後一個標籤喔！</p>
<p>還有一件事，OG 標籤需要寫在伺服器回傳的 HTML 檔案裡面。如果是動態資料，然後伺服器回傳的 HTML 檔案裡沒有包含這些，而是等到瀏覽器去抓取動態資料再把 <code>&lt;head&gt;</code> 補齊，這麼做是沒有辦法正常顯示 OG 內容～</p>
<h2>測試</h2>
<p>最後，想要測試或是預覽我們的 OG 標籤有沒有正常運作可以看看下面這些工具：</p>
<ul>
<li>
<a href="https://developers.facebook.com/tools/debug/">Facebook Debugger</a>
</li>
<li>
<a href="https://cards-dev.twitter.com/validator">Twitter Card Validator</a>
</li>
<li>
<a href="https://www.opengraph.xyz/">Free Open Graph Generator and Preview</a>，這工具除了能看到 Facebook、Twitter、LinkedIn、Discord 上的結果，還可以幫產生 OG 標籤～</li>
</ul>
<h2>小結</h2>
<p>今天會講到 Open Graph 的原因是因為如果之後要做個人網頁，一定會需要設定 OG 標籤，不然在分享的時候，看不到網頁的任何資訊感覺很可惜。尤其是如果有做部落格，通常每篇文章會有不同的縮圖、標題、描述，這些都需要特別去設喔，像這樣～</p>
<p><img src="https://i.imgur.com/ybBFcTd.png" alt="RSS" /></p>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。</p>
<p>祝大家明天上班上課愉快！</p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://ogp.me/">The Open Graph Protocol</a>
</li>
<li>
<a href="https://www.opengraph.xyz/">Free Open Graph Generator and Preview</a>
</li>
<li>
<a href="https://developers.facebook.com/tools/debug/">Facebook Debugger</a>
</li>
<li>
<a href="https://cards-dev.twitter.com/validator">Twitter Card Validator</a>
</li>
</ul>


大家有沒有發現當有人在社群軟體分享網址的時候，通常除了網址本身還會看到一張縮圖加上網站的標題和描述？這就是用 Open Graph (OG) 設定出來的！今天會解釋一點點什麼是 OG tag (標籤)，加上怎麼在 Next.js 專案中設定 OG 標籤～

Open Graph (OG) 簡介
OG 的全名是 Open Graph Protocol，中文為 “開放社交關係圖”。OG 的目標是讓網頁在社交關係圖可以豐富的呈現出來。這協定讓我們分享任何網頁在社群軟體或其他地方時，不只用網址呈現，而用比較漂亮吸引人的方式呈現，例如縮圖、標題、描述等。這些資訊都跟 OG 有關，在做網站專案時我們要特別去做設定喔～
沒有設定其實也完全不影響功能，只是分享網頁的時候可能顯示的資訊並不是你想要的或是除了網址以外什麼都沒有。
基本的 OG 標籤
OG 標籤都會放在 <head> 裡，用 <meta> 標籤去設定：
og:title - 網頁標題
og:type - 內容的媒體類型，預設為 website


og:image - 分享網頁時會顯示的縮圖
og:url - 網頁的標準網址，也就是這網頁在社交關係圖中的 ID
來寫個例子，如果用這篇文章當範例：

<meta property="og:url" content="https://ithelp.ithome.com.tw/articles/10278469" />
<meta property="og:type" content="article" />
<meta property="og:title" content="#21 No-code 之旅 — 如何讓網站在分享時看起來漂亮和有吸引力？Open Graph (OG) 簡介" />
<meta property="og:description" content="大家有沒有發現當有人在社群軟體分享網址的時候，通常除了網址本身還會看到一張縮圖加上網站的標題和描述？這就是用 Open Graph (OG) 設定出來的！今天會解釋一點點什麼是 OG tag (標籤)，加上怎麼在 Next.js 專案中設定 OG 標籤～" />
<meta property="og:image" content="https://i.imgur.com/D9cZHL7.png" />

有沒有發現上面的例子有出現新的標籤，就是 og:description 為網頁的描述或是簡短說明
社群軟體的特別標籤
除了一般的用 og 開頭的 OG 標籤之外，你可能會看到 fb 或 twitter 開頭的標籤，用途就是該社群軟體可以拿到更詳細的資訊而比較豐富的呈現方式喔～
Facebook 標籤
其實 Facebook 只有一個比較特別的標籤，也就是 fb:app_id。如果你有 Facebook 到粉專或 Facebook Page，可以用你的 App ID 來分析有幾個觀看者來自你的 Facebook 粉專。
Twitter 標籤
Twitter 提供比較多的 OG 標籤，雖然他們也可以用一般 OG 標籤的資訊去顯示內容，可是 Twitter 支援比較多客製化的內容～
twitter:card，必須要有的標籤，內容有四種選擇 summary，summary_large_image，app，player


twitter:site，網頁歸屬 (@username)，例如 nytimes.com 會設定 @nytimes


twitter:creator，網頁內容的創作者歸屬 (@username)
以 iT 邦幫忙 為例子：
<meta name="twitter:card" content="summary_large_image">
<meta property="og:url" content="https://ithelp.ithome.com.tw/">
<meta property="og:type" content="website">
<meta property="og:title" content="iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天">
<meta property="og:description" content="iT 邦幫忙是 IT 領域的技術問答與分享社群，透過 IT 人互相幫忙，一起解決每天面臨的靠北時刻。一起來當 IT 人的超級英雄吧，拯救下一個卡關的 IT 人">
<meta property="og:image" content="https://ithelp.ithome.com.tw/storage/image/fbpic.jpg">

在 Next.js 專案中加 OG 標籤
因為 OG 標籤需要加在 <head> 裡，所以我們可以用 Next.js 的 next/head 提供的 Head 元件來加我們所需要的 OG tags ～
import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>2021 iTHome Day 07</title>
        <meta name="description" content="2021 iTHome Day 07 by Jade" />
        // OG TAGS～～～
        <meta property="og:title" content="2021 iTHome Day 07" />
        <meta property="og:description" content="2021 iTHome Day 07 by Jade" />
        ...
      </Head>
      <p>Hello world!</p>
      ...
    </div>
  )
}

export default IndexPage

如果有些標籤會重複出現在不同的頁面呢？我們也可以放在 pages/_app.js 裡！而且 Next.js 保證不會重複 render 一樣的標籤，前提是我們要給每個標籤一個 key：

<Head>
  <title>2021 iTHome Day 07</title>
  <meta property="og:title" content="2021 iTHome Day 07" key="title" />
</Head>


<Head>
  <meta property="og:title" content="RSS | 2021 iTHome Day 07" key="title" />
</Head>

上面出現了兩個 og:title 的標籤，可是因為給了 key="title" 讓 Next.js 知道這個指同一個標籤，Next.js 只會 render 最後一個標籤喔！
還有一件事，OG 標籤需要寫在伺服器回傳的 HTML 檔案裡面。如果是動態資料，然後伺服器回傳的 HTML 檔案裡沒有包含這些，而是等到瀏覽器去抓取動態資料再把 <head> 補齊，這麼做是沒有辦法正常顯示 OG 內容～
測試
最後，想要測試或是預覽我們的 OG 標籤有沒有正常運作可以看看下面這些工具：
Facebook Debugger


Twitter Card Validator


Free Open Graph Generator and Preview，這工具除了能看到 Facebook、Twitter、LinkedIn、Discord 上的結果，還可以幫產生 OG 標籤～
小結
今天會講到 Open Graph 的原因是因為如果之後要做個人網頁，一定會需要設定 OG 標籤，不然在分享的時候，看不到網頁的任何資訊感覺很可惜。尤其是如果有做部落格，通常每篇文章會有不同的縮圖、標題、描述，這些都需要特別去設喔，像這樣～

大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。
祝大家明天上班上課愉快！
晚安 <3
看更多
The Open Graph Protocol


Free Open Graph Generator and Preview


Facebook Debugger


Twitter Card Validator

大家有沒有發現當有人在社群軟體分享網址的時候，通常除了網址本身還會看到一張縮圖加上網站的標題和描述？這就是用 Open Graph (OG) 設定出來的！今天會解釋一點點什麼是 OG tag (...

#21 No-code 之旅 — 如何讓網站在分享時看起來漂亮和有吸引力？Open Graph (OG) 簡介

<p>嗨！今天的主題是加 analytics 到網站 (專案) 裡～ 講到 analytics，大家通常會想到 <a href="https://analytics.google.com/">Goog...

<p>嗨！今天的主題是加 analytics 到網站 (專案) 裡～ 講到 analytics，大家通常會想到 <a href="https://analytics.google.com/">Google Analytics</a>，所以今天會分享怎麼加到 Next.js 專案裡。還有最近找到的 analytics 平台，叫做 <a href="https://splitbee.io/">Splitbee</a>，今天會一起分享～</p>
<p><img src="https://i.imgur.com/rHA0bog.png" alt="Analytics" /></p>
<h2>Google Analytics</h2>
<p>想要用 Google Analytics 之前，需要登入到 Google 帳號，然後新增完 <strong>property</strong> 之後，輸入網站的網址，最後會拿到我們的 <strong>Measurement ID</strong> 和一段 script：</p>
<pre><code class="language-xml=">&lt;!-- Global site tag (gtag.js) - Google Analytics --&gt;
&lt;script async src=&quot;https://www.googletagmanager.com/gtag/js?id={GA_TAG}&quot;&gt;&lt;/script&gt;
&lt;script&gt;
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', {GA_TAG});
&lt;/script&gt;
</code></pre>
<h2>Splitbee</h2>
<p>首先，需要辦 Splitbee 的帳號，然後新增 <strong>project</strong>，輸入網站的網址，最後跟 Google Analytics 一樣，會拿到一段 script，可是它沒有任何 ID。代表每一個專案會用到一樣的 script：</p>
<pre><code class="language-xml=">&lt;!-- 記得要用 async 或 defer 喔～ --&gt;
&lt;script async src=&quot;https://cdn.splitbee.io/sb.js&quot;&gt;&lt;/script&gt;
</code></pre>
<p>不過如果需要更多的功能，也可以裝 Splitbee 的 JS library <a href="https://splitbee.io/docs/javascript-library"><code>@splitbee/web</code></a>～</p>
<h3>優點</h3>
<p>UI 非常乾淨，設定也很簡單，然後他們網站寫說我們的資料是<strong>我們的</strong>而不會把資料賣掉ＸＤ Splitbee 的 script 大小比 GA 小 (14次)。最後，Splitbee 提供 <strong>automation</strong> 功能，代表每次有使用者的 event，我們可以設定一些動作，例如寄信給使用者。</p>
<h2>Next.js Script Optimization</h2>
<p>Next.js 提供這個功能，所以需要加 <code>&lt;script&gt;</code> 的時候，可以用 <code>next/script</code> 的 <a href="https://nextjs.org/docs/basic-features/script">Script</a> component。它提供不同的 <code>strategy</code>：</p>
<ul>
<li>
<code>beforeInteractive</code>，還沒有辦法跟 <strong>page</strong> 互動之前，Next.js 會先引入和執行 script</li>
<li>
<code>afterInteractive</code> (<strong>default</strong>)，可以跟 <strong>page</strong> 互動之後才去抓取和執行 script，像 analytics</li>
<li>
<code>lazyOnload</code>，等到 idle 時候抓取和執行 script，像 chat 或 feedback widget</li>
</ul>
<p><strong>Script</strong> 元件不該放在 <code>next/head</code> 的 <strong>Head</strong> 元件裡，可是加在 page 的 body 裡～</p>
<h3>加 Analytics</h3>
<p>因為 <strong>Script</strong> 元件不該放在 <strong>Head</strong> 元件裡，而且這些 script 需要用在所有的 page 裡，所以我把下面這些 scripts 放在 <code>pages/_app.js</code> 裡：</p>
<pre><code class="language-xml=">&lt;Script
  strategy=&quot;afterInteractive&quot;
  src=&quot;https://cdn.splitbee.io/sb.js&quot;
/&gt;
&lt;Script
  strategy=&quot;afterInteractive&quot;
  src=&quot;https://www.googletagmanager.com/gtag/js?id={GA_TAG}&quot;
/&gt;
&lt;Script id=&quot;analytics&quot; strategy=&quot;afterInteractive&quot;&gt;
  &lt;!-- Inline scripts --&gt;
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', {GA_TAG});
  `}
&lt;/Script&gt;
</code></pre>
<p><strong>Script</strong> 元件也可以放 <strong>inline scripts</strong>，不過需要放 <code>id</code> attribute，像上面的 Google Analytics scripts 加了 <code>id=&quot;analytics&quot;</code>。</p>
<h2>小結</h2>
<p>今天講的不詳細，不過希望大家如果有 analytics 的需求，可以看看 Splitbee 或是當然用最常用的 Google Analytics。要加任何 scripts 的時候也記得用 <code>next/script</code> 的 <strong>Script</strong>，這樣 Next.js 會自動做 scripts 的優化～</p>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。</p>
<p>祝大家明天上班上課愉快！</p>
<p>晚安 &lt;3</p>


嗨！今天的主題是加 analytics 到網站 (專案) 裡～ 講到 analytics，大家通常會想到 Google Analytics，所以今天會分享怎麼加到 Next.js 專案裡。還有最近找到的 analytics 平台，叫做 Splitbee，今天會一起分享～

Google Analytics
想要用 Google Analytics 之前，需要登入到 Google 帳號，然後新增完 property 之後，輸入網站的網址，最後會拿到我們的 Measurement ID 和一段 script：

<script async src="https://www.googletagmanager.com/gtag/js?id={GA_TAG}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', {GA_TAG});
</script>

Splitbee
首先，需要辦 Splitbee 的帳號，然後新增 project，輸入網站的網址，最後跟 Google Analytics 一樣，會拿到一段 script，可是它沒有任何 ID。代表每一個專案會用到一樣的 script：

<script async src="https://cdn.splitbee.io/sb.js"></script>

不過如果需要更多的功能，也可以裝 Splitbee 的 JS library @splitbee/web～
優點
UI 非常乾淨，設定也很簡單，然後他們網站寫說我們的資料是我們的而不會把資料賣掉ＸＤ Splitbee 的 script 大小比 GA 小 (14次)。最後，Splitbee 提供 automation 功能，代表每次有使用者的 event，我們可以設定一些動作，例如寄信給使用者。
Next.js Script Optimization
Next.js 提供這個功能，所以需要加 <script> 的時候，可以用 next/script 的 Script component。它提供不同的 strategy：
beforeInteractive，還沒有辦法跟 page 互動之前，Next.js 會先引入和執行 script
afterInteractive (default)，可以跟 page 互動之後才去抓取和執行 script，像 analytics
lazyOnload，等到 idle 時候抓取和執行 script，像 chat 或 feedback widget
Script 元件不該放在 next/head 的 Head 元件裡，可是加在 page 的 body 裡～
加 Analytics
因為 Script 元件不該放在 Head 元件裡，而且這些 script 需要用在所有的 page 裡，所以我把下面這些 scripts 放在 pages/_app.js 裡：
<Script
  strategy="afterInteractive"
  src="https://cdn.splitbee.io/sb.js"
/>
<Script
  strategy="afterInteractive"
  src="https://www.googletagmanager.com/gtag/js?id={GA_TAG}"
/>
<Script id="analytics" strategy="afterInteractive">
  
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', {GA_TAG});
  `}
</Script>

Script 元件也可以放 inline scripts，不過需要放 id attribute，像上面的 Google Analytics scripts 加了 id="analytics"。
小結
今天講的不詳細，不過希望大家如果有 analytics 的需求，可以看看 Splitbee 或是當然用最常用的 Google Analytics。要加任何 scripts 的時候也記得用 next/script 的 Script，這樣 Next.js 會自動做 scripts 的優化～
大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。
祝大家明天上班上課愉快！
晚安 <3

嗨！今天的主題是加 analytics 到網站 (專案) 裡～ 講到 analytics，大家通常會想到 Goog...

#20 No-code 之旅 — Analytics ft. Google Analytics & Splitbee

<p>嗨～ 今天來個比較特別的主題，Avatars libraries。很多時候我們需要顯示一些頭貼，有的是用 Google，Facebook，Github，等其他服務的頭貼。不過，有時候我們可能會想...

<p>嗨～ 今天來個比較特別的主題，Avatars libraries。很多時候我們需要顯示一些頭貼，有的是用 Google，Facebook，Github，等其他服務的頭貼。不過，有時候我們可能會想用其他比較匿名或隨機的圖當頭貼。今天這篇會分享一些 libraries～</p>
<p><img src="https://i.imgur.com/jm9X4ty.png" alt="Avatars Libraries" /></p>
<h2>Libraries</h2>
<ul>
<li>
<a href="https://github.com/dicebear/dicebear">DiceBear</a>，第一個知道的 avatar library，蠻多風格可以選！有些很好笑ＸＤ</li>
<li>
<a href="https://github.com/HB0N0/AvataaarsJs">AvataaarsJs</a>，基於 DiceBear～</li>
<li>
<a href="https://github.com/dmester/jdenticon">Jdenticon</a>，各種三角形方形圓形組成的圖，也有提供 React 的 <a href="https://www.npmjs.com/package/react-jdenticon">library</a>
</li>
<li>
<a href="https://github.com/boringdesigners/boring-avatars">Boring Avatars</a>，最近找到的，我很喜歡，它超可愛～ 有六種風格，可以自己調顏色</li>
</ul>
<h2>Boring Avatars</h2>
<p><img src="https://i.imgur.com/CWand7a.png" alt="Boring 1" /></p>
<p>我選擇用 Boring Avatars 來顯示專案中的 avatars，原因是它特別可愛ＸＤ尤其是 Beam 風格～ 使用方式也很簡單：</p>
<ul>
<li>安裝 library
<pre><code class="language-bash=">npm install boring-avatars
# or
yarn add boring-avatars
</code></pre>
</li>
<li>或是直接用 source <code>src</code> 的方式<br><code>https://source.boringavatars.com/marble/{SIZE}/{NAME}?colors={COLOR1,COLOR2,COLOR3,COLOR4,COLOR5}</code><br>例如：<code>https://source.boringavatars.com/marble/120/Maria%20Mitchell?colors=264653,2a9d8f,e9c46a,f4a261,e76f51 </code>
</li>
</ul>
<p><img src="https://i.imgur.com/UGCSERd.png" alt="Boring 2" /></p>
<p>上面是 Beam 風格！使用 library 的方式也很簡單～</p>
<pre><code class="language-javascript=">import Avatar from &quot;boring-avatars&quot;;

&lt;Avatar
  size={40}
  name=&quot;Maria Mitchell&quot;
  variant=&quot;marble&quot;
  colors={[&quot;#92A1C6&quot;, &quot;#146A7C&quot;, &quot;#F0AB3D&quot;, &quot;#C271B4&quot;, &quot;#C20D90&quot;]}
/&gt;;
</code></pre>
<p>這樣子我們可以幫每個人做一張頭貼，而且一樣的名字只會有一張圖 (一種風格一張，總共六張圖)</p>
<h2>小結</h2>
<p>當然，我們可以不用這些 libraries，直接拿 user 原本的頭貼。今天分享的就給大家參考，有需要的時候可以拿來用！專案裡因為會做部落格，所以選擇用 Boring Avatars 顯示作者的頭貼～</p>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。</p>
<p>祝大家明天上班上課愉快！</p>
<p>晚安 &lt;3</p>


嗨～ 今天來個比較特別的主題，Avatars libraries。很多時候我們需要顯示一些頭貼，有的是用 Google，Facebook，Github，等其他服務的頭貼。不過，有時候我們可能會想用其他比較匿名或隨機的圖當頭貼。今天這篇會分享一些 libraries～

Libraries
DiceBear，第一個知道的 avatar library，蠻多風格可以選！有些很好笑ＸＤ
AvataaarsJs，基於 DiceBear～
Jdenticon，各種三角形方形圓形組成的圖，也有提供 React 的 library


Boring Avatars，最近找到的，我很喜歡，它超可愛～ 有六種風格，可以自己調顏色
Boring Avatars

我選擇用 Boring Avatars 來顯示專案中的 avatars，原因是它特別可愛ＸＤ尤其是 Beam 風格～ 使用方式也很簡單：
安裝 library
npm install boring-avatars
# or
yarn add boring-avatars

或是直接用 source src 的方式
https://source.boringavatars.com/marble/{SIZE}/{NAME}?colors={COLOR1,COLOR2,COLOR3,COLOR4,COLOR5}
例如：https://source.boringavatars.com/marble/120/Maria%20Mitchell?colors=264653,2a9d8f,e9c46a,f4a261,e76f51 



上面是 Beam 風格！使用 library 的方式也很簡單～
import Avatar from "boring-avatars";

<Avatar
  size={40}
  name="Maria Mitchell"
  variant="marble"
  colors={["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"]}
/>;

這樣子我們可以幫每個人做一張頭貼，而且一樣的名字只會有一張圖 (一種風格一張，總共六張圖)
小結
當然，我們可以不用這些 libraries，直接拿 user 原本的頭貼。今天分享的就給大家參考，有需要的時候可以拿來用！專案裡因為會做部落格，所以選擇用 Boring Avatars 顯示作者的頭貼～
大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。
祝大家明天上班上課愉快！
晚安 <3

嗨～ 今天來個比較特別的主題，Avatars libraries。很多時候我們需要顯示一些頭貼，有的是用 Google，Facebook，Github，等其他服務的頭貼。不過，有時候我們可能會想...

#19 No-code 之旅 — Avatars Libraries

<p>嗨大家～ 像昨天文章裡提的，這專案會採用 Notion 來當 CMS (包含資料庫)，意思是部落格文章的新增編輯刪除都會發生在 Notion 裡。所以，這專案需要可以讀取 Notion data...

<p>嗨大家～ 像昨天文章裡提的，這專案會採用 Notion 來當 CMS (包含資料庫)，意思是部落格文章的新增編輯刪除都會發生在 Notion 裡。所以，這專案需要可以讀取 Notion database 的資料。今天就是來串 Notion SDK 讀取 DB 資料喔！開始之前有些步驟需要完成才能拿到 Notion 的讀取權限喔，請大家看<a href="https://ithelp.ithome.com.tw/articles/10272845">這篇</a>。</p>
<p><img src="https://i.imgur.com/NbjRW9m.png" alt="Notion DB" /></p>
<h2>Setup</h2>
<p>這專案會用到 Notion SDK，所以需要安裝 SDK，不過如果你們想要用 Notion API 也可以喔！：</p>
<pre><code class="language-bash=">npm install @notionhq/client
# or
yarn add @notionhq/client
</code></pre>
<p>裝完之後我們需要初始化 Client：</p>
<pre><code class="language-javascript=">import { Client } from &quot;@notionhq/client&quot;;

// 初始化 Client
const notion = new Client({
  auth: process.env.NOTION_TOKEN, // Notion 的 secret token
});
</code></pre>
<h2>取得 Database 資料</h2>
<p>因為我們要做的是部落格，所以這次不是用 Notion Page，而是用 Notion Database。Database 裡有很多 Pages，所以 Database 就是我們的部落格資料庫，然後 Page 是我們每篇部落格文章的內容。Notion API 有提供很多 endpoints，其中一個是取得該 database 裡的 pages：</p>
<pre><code class="language-javascript=">export const queryDatabase = async (params) =&gt; {
  const databaseId = process.env.NOTION_DATABASE_ID;

  if (!databaseId) {
    throw new Error(&quot;Required: Notion database ID.&quot;);
  }

  // 讀取資料庫裡的 pages
  const response = await notion.databases.query({
    database_id: databaseId,
    filter: params?.filter,
    sorts: params?.sorts,
  });

  return response;
};
</code></pre>
<p>在這裡用的是 <code>notion.databases.query</code> 而不是 <code>notion.databases.retrieve</code>，<code>retrieve</code> 這 API 是來讀取該 database 的 properties，而 <code>query</code> 是來讀取 database 裡的 pages，我們也可以加 <code>filter</code> 和 <code>sorts</code> 做文章的過濾和排序。</p>
<pre><code class="language-json=">{
  &quot;object&quot;: &quot;list&quot;,
  &quot;results&quot;: [
    {
      &quot;object&quot;: &quot;page&quot;,
      &quot;id&quot;: &quot;2e01e904-febd-43a0-ad02-8eedb903a82c&quot;,
      &quot;created_time&quot;: &quot;2020-03-17T19:10:04.968Z&quot;,
      &quot;last_edited_time&quot;: &quot;2020-03-17T21:49:37.913Z&quot;,
      &quot;parent&quot;: {
        &quot;type&quot;: &quot;database_id&quot;,
        &quot;database_id&quot;: &quot;897e5a76-ae52-4b48-9fdf-e71f5945d1af&quot;
      },
      &quot;archived&quot;: false,
      &quot;url&quot;: &quot;https://www.notion.so/2e01e904febd43a0ad028eedb903a82c&quot;,
      &quot;properties&quot;: {
        &quot;Recipes&quot;: {
          &quot;id&quot;: &quot;Ai`L&quot;,
          &quot;type&quot;: &quot;relation&quot;,
          &quot;relation&quot;: [
            {
              &quot;id&quot;: &quot;796659b4-a5d9-4c64-a539-06ac5292779e&quot;
            },
          ]
        },
        ...
      }
    }
  ],
  &quot;has_more&quot;: false,
  &quot;next_cursor&quot;: null
}
</code></pre>
<p><code>response</code> 會包含 <code>results</code> 為 list of pages，還有 <code>has_more</code> 和 <code>next_cursor</code> 做 pagination 用的～</p>
<h2>部落格路徑</h2>
<p>因為我們使用 Next.js，所以做部落格的話，應該要用 Next.js 的 dynamic routing！於是我們需要寫 <code>getStaticPaths</code>：</p>
<pre><code class="language-javascript=">export const getStaticPaths = async () =&gt; {
  const blogs = await queryDatabase();
  const paths = blogs.results.map((b) =&gt; ({
    params: { id: b.id }, // Notion 的 Page ID 當路徑的 dynamic path
  }));

  return { paths, fallback: &quot;blocking&quot; };
};

</code></pre>
<p>把上面這段 code 放在 <code>pages/blogs/[id].js</code> 裡面，這樣我們會匹配到 <code>/blogs/[id]</code> 的動態路徑～</p>
<h2>小結</h2>
<p>今天才讀取資料庫的文章，還沒把每篇文章的內容取出來，而抓完資料還要做多處理喔！現在還蠻流行把 Notion 當成 CMS 或是資料庫，把文章都寫在 Notion 裡，然後再用 API 取這些資料去顯示。今天的小功能還差很多很多，尤其是資料處理方面！ＸＤ 我發現第三方 library 大部分都不是用 Notion SDK 讀取資料，所以資料格式又不一樣Ｑ 感覺要自己寫 Notion renderer 了 :o</p>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。</p>
<p>祝大家明天上班上課愉快！</p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://developers.notion.com/reference/intro">Notion API Reference</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10268611">#05 No-code 之旅 — Next.js 的 Pages 與 Routing</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10272845">#11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK</a>
</li>
</ul>


嗨大家～ 像昨天文章裡提的，這專案會採用 Notion 來當 CMS (包含資料庫)，意思是部落格文章的新增編輯刪除都會發生在 Notion 裡。所以，這專案需要可以讀取 Notion database 的資料。今天就是來串 Notion SDK 讀取 DB 資料喔！開始之前有些步驟需要完成才能拿到 Notion 的讀取權限喔，請大家看這篇。

Setup
這專案會用到 Notion SDK，所以需要安裝 SDK，不過如果你們想要用 Notion API 也可以喔！：
npm install @notionhq/client
# or
yarn add @notionhq/client

裝完之後我們需要初始化 Client：
import { Client } from "@notionhq/client";

// 初始化 Client
const notion = new Client({
  auth: process.env.NOTION_TOKEN, // Notion 的 secret token
});

取得 Database 資料
因為我們要做的是部落格，所以這次不是用 Notion Page，而是用 Notion Database。Database 裡有很多 Pages，所以 Database 就是我們的部落格資料庫，然後 Page 是我們每篇部落格文章的內容。Notion API 有提供很多 endpoints，其中一個是取得該 database 裡的 pages：
export const queryDatabase = async (params) => {
  const databaseId = process.env.NOTION_DATABASE_ID;

  if (!databaseId) {
    throw new Error("Required: Notion database ID.");
  }

  // 讀取資料庫裡的 pages
  const response = await notion.databases.query({
    database_id: databaseId,
    filter: params?.filter,
    sorts: params?.sorts,
  });

  return response;
};

在這裡用的是 notion.databases.query 而不是 notion.databases.retrieve，retrieve 這 API 是來讀取該 database 的 properties，而 query 是來讀取 database 裡的 pages，我們也可以加 filter 和 sorts 做文章的過濾和排序。
{
  "object": "list",
  "results": [
    {
      "object": "page",
      "id": "2e01e904-febd-43a0-ad02-8eedb903a82c",
      "created_time": "2020-03-17T19:10:04.968Z",
      "last_edited_time": "2020-03-17T21:49:37.913Z",
      "parent": {
        "type": "database_id",
        "database_id": "897e5a76-ae52-4b48-9fdf-e71f5945d1af"
      },
      "archived": false,
      "url": "https://www.notion.so/2e01e904febd43a0ad028eedb903a82c",
      "properties": {
        "Recipes": {
          "id": "Ai`L",
          "type": "relation",
          "relation": [
            {
              "id": "796659b4-a5d9-4c64-a539-06ac5292779e"
            },
          ]
        },
        ...
      }
    }
  ],
  "has_more": false,
  "next_cursor": null
}

response 會包含 results 為 list of pages，還有 has_more 和 next_cursor 做 pagination 用的～
部落格路徑
因為我們使用 Next.js，所以做部落格的話，應該要用 Next.js 的 dynamic routing！於是我們需要寫 getStaticPaths：
export const getStaticPaths = async () => {
  const blogs = await queryDatabase();
  const paths = blogs.results.map((b) => ({
    params: { id: b.id }, // Notion 的 Page ID 當路徑的 dynamic path
  }));

  return { paths, fallback: "blocking" };
};


把上面這段 code 放在 pages/blogs/[id].js 裡面，這樣我們會匹配到 /blogs/[id] 的動態路徑～
小結
今天才讀取資料庫的文章，還沒把每篇文章的內容取出來，而抓完資料還要做多處理喔！現在還蠻流行把 Notion 當成 CMS 或是資料庫，把文章都寫在 Notion 裡，然後再用 API 取這些資料去顯示。今天的小功能還差很多很多，尤其是資料處理方面！ＸＤ 我發現第三方 library 大部分都不是用 Notion SDK 讀取資料，所以資料格式又不一樣Ｑ 感覺要自己寫 Notion renderer 了 :o
大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。
祝大家明天上班上課愉快！
晚安 <3
看更多
Notion API Reference


#05 No-code 之旅 — Next.js 的 Pages 與 Routing


#11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK

嗨大家～ 像昨天文章裡提的，這專案會採用 Notion 來當 CMS (包含資料庫)，意思是部落格文章的新增編輯刪除都會發生在 Notion 裡。所以，這專案需要可以讀取 Notion data...

#18 No-code 之旅 — 讀取資料庫來實作部落格 ft. Notion SDK

<p>今天先建立專案，還有開始慢慢地定架構，裝 <strong>dependencies</strong> ～</p>
<p><img src="https://i.imgur.com/ZzkEOWZ...

<p>今天先建立專案，還有開始慢慢地定架構，裝 <strong>dependencies</strong> ～</p>
<p><img src="https://i.imgur.com/ZzkEOWZ.png" alt="No-code" /></p>
<h2>Setup</h2>
<p>這專案想要用 Next.js + TypeScript 寫，所以用下面指令建立專案：</p>
<pre><code class="language-bash=">npx create-next-app --typescript
# or
yarn create next-app --typescript
</code></pre>
<p>想了解更多可以看這篇 (<a href="https://ithelp.ithome.com.tw/articles/10266342">Next.js 簡介</a>)</p>
<h2><code>tsconfig.json</code></h2>
<p>因為專案用 <strong>TypeScript</strong>，這裡有 config 檔案，因為 <strong>Next.js</strong> 剛好沒有 <code>src</code> 資料夾，所有資料夾直接在根目錄，例如 <code>/pages/</code>，<code>/config/</code>。然後我想要用 <strong>absolute import</strong>，所以在 <code>tsconfig.json</code> 裡加了這行：</p>
<pre><code class="language-json=">{
  &quot;compilerOptions&quot;: {
    &quot;target&quot;: &quot;es5&quot;,
    &quot;lib&quot;: [&quot;dom&quot;, &quot;dom.iterable&quot;, &quot;esnext&quot;],
    &quot;allowJs&quot;: true,
    &quot;skipLibCheck&quot;: true,
    &quot;strict&quot;: true,
    &quot;forceConsistentCasingInFileNames&quot;: true,
    &quot;noEmit&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;module&quot;: &quot;esnext&quot;,
    &quot;moduleResolution&quot;: &quot;node&quot;,
    &quot;resolveJsonModule&quot;: true,
    &quot;isolatedModules&quot;: true,
    &quot;jsx&quot;: &quot;preserve&quot;,
    &quot;baseUrl&quot;: &quot;.&quot; // 加這行～
  },
  &quot;include&quot;: [&quot;next-env.d.ts&quot;, &quot;**/*.ts&quot;, &quot;**/*.tsx&quot;],
  &quot;exclude&quot;: [&quot;node_modules&quot;]
}
</code></pre>
<h2>Dependencies</h2>
<p>元件開發選擇用 <a href="https://ithelp.ithome.com.tw/articles/10274188">Chakra UI</a>：</p>
<pre><code class="language-bash=">npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
# or
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
</code></pre>
<p>專案應該不需要什麼比較特表的 state management，所以採用 <a href="https://ithelp.ithome.com.tw/articles/10271427">SWR</a>：</p>
<pre><code class="language-bash=">npm install swr
# or
yarn add swr
</code></pre>
<h2><code>pages/_document.tsx</code></h2>
<p>因為想用 <strong>Chakra UI</strong> 的 color mode，所以需要加 <code>ColorModeScript</code> 在 <code>_document.tsx</code> 裡：</p>
<pre><code class="language-javascript=">import { ColorModeScript } from &quot;@chakra-ui/react&quot;;
import theme from &quot;config/theme&quot;;
import NextDocument, { Head, Html, Main, NextScript } from &quot;next/document&quot;;

export default class Document extends NextDocument {
  render() {
    return (
      &lt;Html lang=&quot;en&quot;&gt;
        &lt;Head /&gt;
        &lt;body&gt;
          &lt;ColorModeScript initialColorMode={theme.config.initialColorMode} /&gt; // 這個～
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/Html&gt;
    );
  }
}
</code></pre>
<h2><code>pages/_app.tsx</code></h2>
<p>用了 <strong>Chakra UI</strong> 也不忘記要加 <code>ChakraProvider</code> 喔：</p>
<pre><code class="language-javascript=">import { ChakraProvider } from &quot;@chakra-ui/react&quot;;
import type { AppProps } from &quot;next/app&quot;;

function MyApp({ Component, pageProps }: AppProps) {
  return (
    &lt;ChakraProvider&gt; // 這個！
      &lt;Component {...pageProps} /&gt;
    &lt;/ChakraProvider&gt;
  );
}
export default MyApp;

</code></pre>
<h2>小結</h2>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。</p>
<p>祝大家明天上班上課愉快！</p>
<p><a href="https://day07.vercel.app/rss">Live Demo</a></p>
<p>晚安 &lt;3</p>


今天先建立專案，還有開始慢慢地定架構，裝 dependencies ～

Setup
這專案想要用 Next.js + TypeScript 寫，所以用下面指令建立專案：
npx create-next-app --typescript
# or
yarn create next-app --typescript

想了解更多可以看這篇 (Next.js 簡介)
tsconfig.json
因為專案用 TypeScript，這裡有 config 檔案，因為 Next.js 剛好沒有 src 資料夾，所有資料夾直接在根目錄，例如 /pages/，/config/。然後我想要用 absolute import，所以在 tsconfig.json 裡加了這行：
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": "." // 加這行～
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Dependencies
元件開發選擇用 Chakra UI：
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
# or
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

專案應該不需要什麼比較特表的 state management，所以採用 SWR：
npm install swr
# or
yarn add swr

pages/_document.tsx
因為想用 Chakra UI 的 color mode，所以需要加 ColorModeScript 在 _document.tsx 裡：
import { ColorModeScript } from "@chakra-ui/react";
import theme from "config/theme";
import NextDocument, { Head, Html, Main, NextScript } from "next/document";

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <ColorModeScript initialColorMode={theme.config.initialColorMode} /> // 這個～
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

pages/_app.tsx
用了 Chakra UI 也不忘記要加 ChakraProvider 喔：
import { ChakraProvider } from "@chakra-ui/react";
import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider> // 這個！
      <Component {...pageProps} />
    </ChakraProvider>
  );
}
export default MyApp;


小結
大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。
祝大家明天上班上課愉快！
Live Demo
晚安 <3

今天先建立專案，還有開始慢慢地定架構，裝 dependencies ～
<img src="https://i.imgur.com/ZzkEOWZ...

#17 No-code 之旅 — 專案架構

<p>嗨嗨～ 今天比較晚下班，還沒寫文章也還沒寫專案ＸＤ 今天先建立專案好了～ 週末再趕進度！</p>
<p><img src="https://i.imgur.com/dvW6ORl.png" al...

<p>嗨嗨～ 今天比較晚下班，還沒寫文章也還沒寫專案ＸＤ 今天先建立專案好了～ 週末再趕進度！</p>
<p><img src="https://i.imgur.com/dvW6ORl.png" alt="No-code" /></p>
<h2>Setup</h2>
<p>這專案想要用 Next.js + TypeScript 寫，所以用下面指令建立專案：</p>
<pre><code class="language-bash=">npx create-next-app --typescript
# or
yarn create next-app --typescript
</code></pre>
<p>想了解更多可以看這篇 (<a href="https://ithelp.ithome.com.tw/articles/10266342">Next.js 簡介</a>)</p>
<h2>Dependencies</h2>
<p>這專案打算用 <a href="https://ithelp.ithome.com.tw/articles/10274188">Chakra UI</a> 去刻元件，然後用 <a href="https://ithelp.ithome.com.tw/articles/10271427">SWR</a> 抓取資料，資料預計放在 Notion 裡，所以也會用到 <a href="https://ithelp.ithome.com.tw/articles/10272845">Notion SDK</a>。其他的 dependencies 會隨著需求增加～</p>
<h2>Goal</h2>
<p>想要做出類似以下這些專案，</p>
<ul>
<li>
<a href="https://github.com/splitbee/react-notion">react-notion</a>
</li>
<li>
<a href="https://github.com/NotionX/react-notion-x">react-notion-x</a>
</li>
<li>
<a href="https://github.com/samuelkraft/notion-blog-nextjs">notion-blog-nextjs</a>
</li>
<li>
<a href="https://github.com/ijjk/notion-blog">notion-blog</a>
</li>
</ul>
<p>可是這些比較像是用 Notion 來當 CMS 寫部落格，我想做的比較像是<strong>個人網站 + 部落個 + 作品集</strong>～ 所以也會串接 Github API，如果還有時間再接 Twitter / Instagram / Youtube API！</p>
<h2>小結</h2>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。</p>
<p>祝大家明天上班上課愉快！</p>
<p><a href="https://day07.vercel.app/rss">Live Demo</a></p>
<p>晚安 &lt;3</p>


嗨嗨～ 今天比較晚下班，還沒寫文章也還沒寫專案ＸＤ 今天先建立專案好了～ 週末再趕進度！

Setup
這專案想要用 Next.js + TypeScript 寫，所以用下面指令建立專案：
npx create-next-app --typescript
# or
yarn create next-app --typescript

想了解更多可以看這篇 (Next.js 簡介)
Dependencies
這專案打算用 Chakra UI 去刻元件，然後用 SWR 抓取資料，資料預計放在 Notion 裡，所以也會用到 Notion SDK。其他的 dependencies 會隨著需求增加～
Goal
想要做出類似以下這些專案，
react-notion


react-notion-x


notion-blog-nextjs


notion-blog


可是這些比較像是用 Notion 來當 CMS 寫部落格，我想做的比較像是個人網站 + 部落個 + 作品集～ 所以也會串接 Github API，如果還有時間再接 Twitter / Instagram / Youtube API！
小結
大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。
祝大家明天上班上課愉快！
Live Demo
晚安 <3

嗨嗨～ 今天比較晚下班，還沒寫文章也還沒寫專案ＸＤ 今天先建立專案好了～ 週末再趕進度！
<img src="https://i.imgur.com/dvW6ORl.png" al...

#16 No-code 之旅 — Project Setup

<p>系列文總共有了 14 篇文章，除了第一篇的系列文介紹之外，幾乎是技術相關的簡介。談了 Next.js 的各種用法，還有一些 API 的串接，也講到一點點 React 的 UI component...

<p>系列文總共有了 14 篇文章，除了第一篇的系列文介紹之外，幾乎是技術相關的簡介。談了 Next.js 的各種用法，還有一些 API 的串接，也講到一點點 React 的 UI component library。未來還是會繼續寫一些技術簡介，例如 <strong>Open Graph</strong> (OG)，deployment (<strong>Vercel</strong>, <strong>Netlify</strong>, etc)，還有 <strong>Google Analytics</strong> (GA)。不過，系列文的下半段會注重在實作，我會把當初想像的 No-code 個人網頁實作出來～ 過程中會跟大家分享做了哪些事，用了哪些技術，遇到什麼問題，等等。希望最後也可以跟大家分享完整的程式碼！</p>
<p><img src="https://i.imgur.com/fKLhofP.jpg" alt="No-code" /></p>
<h2>回顧</h2>
<p>來整理一下前 14 天的文章：</p>
<ul>
<li>Next.js
<ul>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10266342">簡介</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10267249">SSG，SSR，CSR，ISR</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10267894">Pre-render &amp; Data Fetching</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10268611">Pages &amp; Routing</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10269316">API Routes</a>
</li>
</ul>
</li>
<li>API / SDK
<ul>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10270688">Github API 簡介</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10270175">Github API 實作例子</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10272845">Notion SDK</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10273521">RSS</a>
</li>
</ul>
</li>
<li>SWR
<ul>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10271427">簡介</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10272079">實作例子</a>
</li>
</ul>
</li>
<li>Chakra UI
<ul>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10274188">簡介</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10274751">客製化</a>
</li>
</ul>
</li>
</ul>
<h2>小結</h2>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。</p>
<p>祝大家明天上班上課愉快！</p>
<p><a href="https://day07.vercel.app/rss">Live Demo</a></p>
<p>晚安 &lt;3</p>


系列文總共有了 14 篇文章，除了第一篇的系列文介紹之外，幾乎是技術相關的簡介。談了 Next.js 的各種用法，還有一些 API 的串接，也講到一點點 React 的 UI component library。未來還是會繼續寫一些技術簡介，例如 Open Graph (OG)，deployment (Vercel, Netlify, etc)，還有 Google Analytics (GA)。不過，系列文的下半段會注重在實作，我會把當初想像的 No-code 個人網頁實作出來～ 過程中會跟大家分享做了哪些事，用了哪些技術，遇到什麼問題，等等。希望最後也可以跟大家分享完整的程式碼！

回顧
來整理一下前 14 天的文章：
Next.js


簡介


SSG，SSR，CSR，ISR


Pre-render & Data Fetching


Pages & Routing


API Routes



API / SDK


Github API 簡介


Github API 實作例子


Notion SDK


RSS



SWR


簡介


實作例子



Chakra UI


簡介


客製化




小結
大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。
祝大家明天上班上課愉快！
Live Demo
晚安 <3

系列文總共有了 14 篇文章，除了第一篇的系列文介紹之外，幾乎是技術相關的簡介。談了 Next.js 的各種用法，還有一些 API 的串接，也講到一點點 React 的 UI component...

#15 No-code 之旅 — 期中小結

<p>繼續昨天的主題，該怎麼用 <a href="https://chakra-ui.com/">Chakra UI</a> 做開發呢？現成的元件該怎麼去做客製化？專案有定設計系統 (design s...

<p>繼續昨天的主題，該怎麼用 <a href="https://chakra-ui.com/">Chakra UI</a> 做開發呢？現成的元件該怎麼去做客製化？專案有定設計系統 (design system)，那怎麼跟 <strong>Chakra UI</strong> 結合呢？</p>
<p><img src="https://i.imgur.com/FVMAuFh.jpg" alt="Chakra UI" /></p>
<h2>Style Props</h2>
<p><a href="https://chakra-ui.com/">Chakra UI</a> 提供的元件都會包含這些 <a href="https://chakra-ui.com/docs/features/style-props">style props</a>，什麼東西？就是一般的 React component props，可是他的用途是加一些 CSS styling 到元件上，而這些 props 的命名都很簡單，如果大家已熟悉 <strong>Tailwind CSS</strong> 的話，一定很快就會用這些 style props。</p>
<pre><code class="language-javascript=">import { Box, Flex } from &quot;@chakra-ui/react&quot;

// m={2} 代表把 margin 設成 `theme.space[2]`，也就是 2 * 4px
&lt;Box m={2} maxW=&quot;960px&quot;&gt;Tomato&lt;/Box&gt;

// display: flex, align-items: center, 和 justify-content: space-between
&lt;Box display=&quot;flex&quot; alignItems=&quot;center&quot; justifyContent=&quot;space-between&quot;&gt;
  Box with Flex props
&lt;/Box&gt;

// 上面的元件可以直接用 Flex 元件來代替 `&lt;Box display=&quot;flex&quot; /&gt;`
&lt;Flex align=&quot;center&quot; justify=&quot;center&quot;&gt;
  Flex Container
&lt;/Flex&gt;
</code></pre>
<h2>Gradient (漸層)</h2>
<p>現在很流行的漸層設計，<strong>Chakra UI</strong> 也提供一些 <a href="https://chakra-ui.com/docs/features/gradient">gradient API</a>，讓我們可以快速寫漸層。</p>
<ul>
<li>
<code>linear(&lt;direction&gt;, &lt;from&gt;, &lt;to&gt;)</code>
</li>
<li>
<code>radial(&lt;from&gt;, &lt;to&gt;)</code>
</li>
<li>
<code>repeating-linear</code>，<code>conic</code>，等等其他漸層模式</li>
</ul>
<p>除了 <code>background</code> 相關的 API 之外，也不忘記 <strong>text gradient</strong>，就是讓文字加上漸層～</p>
<pre><code class="language-javascript=">import { Text } from &quot;@chakra-ui/react&quot;

&lt;Text
  bgGradient=&quot;linear(to-l, #7928CA, #FF0080)&quot;
  bgClip=&quot;text&quot; // background-clip: text
  fontSize=&quot;6xl&quot; // font-size: theme.fontSizes.6xl =&gt; 3.75rem
  fontWeight=&quot;extrabold&quot; // font-weight: theme.fontWeights.extrabold =&gt; 800
&gt;
  Welcome to Chakra UI
&lt;/Text&gt;
</code></pre>
<p>像這樣：<br><img src="https://i.imgur.com/F3IE2fP.png" alt="Text Gradient" /></p>
<h2>Color Mode (Light / Dark Mode)</h2>
<p>越來越多網站有提供 dark mode 了，而 <strong>Chakra UI</strong> 內建支援 color mode 管理喔！<strong>Chakra UI</strong> 會把使用者設定的 color mode 存到瀏覽器的 <code>localStorage</code>，讓使用者下一次來到網站的時候，網站會採取之前設定好的模式。想要使用 color mode 的話，必須加這些程式：</p>
<pre><code class="language-javascript=">// theme.js

import { extendTheme } from &quot;@chakra-ui/react&quot;

const config = {
  initialColorMode: &quot;light&quot;, // 設定預設的模式
  useSystemColorMode: false, // 要不要跟著使用者系統的 color mode
}

// 把設定加進 theme 裡
const theme = extendTheme({ config })

export default theme
</code></pre>
<p>還有很重要的 <code>ColorModeScript</code>，這 script 會確保我們網站的 color mode 會持續跟 <code>localStorage</code> 同步，而這 script 一定要放在 <code>body</code> 之前或是如果用 Next.js 那要放在我們的 <code>pages/_document.js</code> 裡：</p>
<pre><code class="language-javascript=">// pages/_document.js

import { ColorModeScript } from &quot;@chakra-ui/react&quot;
import NextDocument, { Html, Head, Main, NextScript } from &quot;next/document&quot;
import theme from &quot;./theme&quot;

export default class Document extends NextDocument {
  render() {
    return (
      &lt;Html lang=&quot;en&quot;&gt;
        &lt;Head /&gt;
        &lt;body&gt;
          // body 裡的第一個～
          &lt;ColorModeScript initialColorMode={theme.config.initialColorMode} /&gt;
          &lt;Main /&gt; // 這是我們的 App！
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/Html&gt;
    )
  }
}
</code></pre>
<h2>Responsive</h2>
<p>這應該是很多人很在意的功能，使用上也很簡單，而且 <strong>Chakra UI</strong> 是採用 <code>@media(min-width)</code> 的方式，讓畫面是 <strong>mobile-first</strong> 的～ 內建有提供一些 <code>breakpoints</code>，不過我們也可以去做調整！基本上，寫 responsive 元件有兩種方法：</p>
<h3>Array syntax</h3>
<p>用 array (陣列) 定義 style props，像下面的例子，我們想要讓 <code>Box</code> 的寬度跟著螢幕大小而改變：</p>
<pre><code class="language-xml=">&lt;Box bg=&quot;red.200&quot; w={[300, 400, 500]}&gt;
  This is a responsive box
&lt;/Box&gt;
</code></pre>
<p>所以</p>
<ul>
<li>當螢幕大於 0em 寬度會是 300px</li>
<li>當螢幕大於 30em 寬度會是 400px</li>
<li>當螢幕大於 48em 寬度會是 500px</li>
</ul>
<p>更多的 breakpoints 可以看在<a href="https://chakra-ui.com/docs/features/responsive-styles">這裡</a>～</p>
<h3>Object syntax</h3>
<p>除了用 array 以外，我們也可以用 object (物件)，好處是不需要按照順序去設定 style props：</p>
<pre><code class="language-xml=">&lt;Text fontSize={{ base: &quot;24px&quot;, md: &quot;40px&quot;, lg: &quot;56px&quot; }}&gt;
  This is responsive text
&lt;/Text&gt;
</code></pre>
<p>物件裡的每一個 <code>key</code> 會對應到一個 breakpoint，例如 <code>md</code> 就是大於 48em 的時候，<code>fontSize</code> 字體大小會等於 <code>40px</code>。</p>
<h2>Chakra Factory</h2>
<p>以上講到怎麼用現成的元件去做客製，那如果我們想要從頭刻一個元件該怎麼辦呢？或是原本已經有的非 Chakra 元件，該怎麼做？<strong>Chakra UI</strong> 有提供叫做 <a href="https://chakra-ui.com/docs/features/chakra-factory">Chakra Factory</a>，讓任一個元件也可以有 <strong>style props</strong> 方便去做客製：</p>
<pre><code class="language-xml=">&lt;chakra.button
  px=&quot;3&quot;
  py=&quot;2&quot;
  bg=&quot;green.200&quot;
  rounded=&quot;md&quot;
  _hover={{ bg: &quot;green.300&quot; }}
&gt;
  Click me
&lt;/chakra.button&gt;
</code></pre>
<p>我們可以用 <code>chakra.&lt;element&gt;</code> 然後 <code>&lt;element&gt;</code> 為 HTML element 開發全新的元件。或是我們也可以用 <strong>Chakra factory function</strong> 去把其他元件 <strong>Chakra-化</strong>：</p>
<pre><code class="language-javascript=">// AnotherCard 是個 React 元件
const AwesomeCard = chakra(AnotherCard, {
  baseStyle: {
    shadow: &quot;lg&quot;,
    rounded: &quot;lg&quot;,
    bg: &quot;white&quot;,
  },
})
</code></pre>
<h2>Global Styles</h2>
<p>除了針對元件的客製化，我們也可以加一些 <a href="https://chakra-ui.com/docs/features/global-styles">Global Styles</a>，就是對整個 HTML 加一些 CSS styling，例如設定字體～</p>
<pre><code class="language-javascript=">const theme = {
  styles: {
    global: {
      &quot;html, body&quot;: {
        color: &quot;gray.600&quot;,
        lineHeight: &quot;tall&quot;,
        fontFamily: &quot;'Open Sans', Helvetica Neue, sans-serif&quot;,
      },
      a: {
        color: &quot;teal.500&quot;,
      },
    },
  },
}
</code></pre>
<p>別忘記把上面的 <code>theme</code> 加進 <code>ChakraProvider</code> 裡喔～</p>
<h2>小結</h2>
<p>大家本來就知道 <strong>Chakra UI</strong> 嗎？覺得如何呢？個人覺得真的好用！因為他提供蠻多元件可以直接拿來用，而且還有像 <strong>Tailwind CSS</strong> 的那種 <strong>style props</strong> 方式，讓客製化變得簡單一些～ 想看 <strong>Chakra UI</strong> 的簡介和比較可以看<a href="https://ithelp.ithome.com.tw/articles/10274188">這篇</a>！</p>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～ 不過這專案不是用 <strong>Chakra UI</strong> 開發出來的喔。</p>
<p>祝大家明天上班上課愉快！</p>
<p><a href="https://day07.vercel.app/rss">Live Demo</a></p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://chakra-ui.com">Chakra UI</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10272845">#11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10273521">#12 No-code 之旅 — 在 Next.js 專案中顯示 RSS 的資料 ft. RSS Parser</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10274188">#13 No-code 之旅 — 簡單快速開發漂亮的 React 元件 ft. Chakra UI</a>
</li>
</ul>


繼續昨天的主題，該怎麼用 Chakra UI 做開發呢？現成的元件該怎麼去做客製化？專案有定設計系統 (design system)，那怎麼跟 Chakra UI 結合呢？

Style Props
Chakra UI 提供的元件都會包含這些 style props，什麼東西？就是一般的 React component props，可是他的用途是加一些 CSS styling 到元件上，而這些 props 的命名都很簡單，如果大家已熟悉 Tailwind CSS 的話，一定很快就會用這些 style props。
import { Box, Flex } from "@chakra-ui/react"

// m={2} 代表把 margin 設成 `theme.space[2]`，也就是 2 * 4px
<Box m={2} maxW="960px">Tomato</Box>

// display: flex, align-items: center, 和 justify-content: space-between
<Box display="flex" alignItems="center" justifyContent="space-between">
  Box with Flex props
</Box>

// 上面的元件可以直接用 Flex 元件來代替 `<Box display="flex" />`
<Flex align="center" justify="center">
  Flex Container
</Flex>

Gradient (漸層)
現在很流行的漸層設計，Chakra UI 也提供一些 gradient API，讓我們可以快速寫漸層。
linear(<direction>, <from>, <to>)


radial(<from>, <to>)


repeating-linear，conic，等等其他漸層模式
除了 background 相關的 API 之外，也不忘記 text gradient，就是讓文字加上漸層～
import { Text } from "@chakra-ui/react"

<Text
  bgGradient="linear(to-l, #7928CA, #FF0080)"
  bgClip="text" // background-clip: text
  fontSize="6xl" // font-size: theme.fontSizes.6xl => 3.75rem
  fontWeight="extrabold" // font-weight: theme.fontWeights.extrabold => 800
>
  Welcome to Chakra UI
</Text>

像這樣：

Color Mode (Light / Dark Mode)
越來越多網站有提供 dark mode 了，而 Chakra UI 內建支援 color mode 管理喔！Chakra UI 會把使用者設定的 color mode 存到瀏覽器的 localStorage，讓使用者下一次來到網站的時候，網站會採取之前設定好的模式。想要使用 color mode 的話，必須加這些程式：
// theme.js

import { extendTheme } from "@chakra-ui/react"

const config = {
  initialColorMode: "light", // 設定預設的模式
  useSystemColorMode: false, // 要不要跟著使用者系統的 color mode
}

// 把設定加進 theme 裡
const theme = extendTheme({ config })

export default theme

還有很重要的 ColorModeScript，這 script 會確保我們網站的 color mode 會持續跟 localStorage 同步，而這 script 一定要放在 body 之前或是如果用 Next.js 那要放在我們的 pages/_document.js 裡：
// pages/_document.js

import { ColorModeScript } from "@chakra-ui/react"
import NextDocument, { Html, Head, Main, NextScript } from "next/document"
import theme from "./theme"

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          // body 裡的第一個～
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
          <Main /> // 這是我們的 App！
          <NextScript />
        </body>
      </Html>
    )
  }
}

Responsive
這應該是很多人很在意的功能，使用上也很簡單，而且 Chakra UI 是採用 @media(min-width) 的方式，讓畫面是 mobile-first 的～ 內建有提供一些 breakpoints，不過我們也可以去做調整！基本上，寫 responsive 元件有兩種方法：
Array syntax
用 array (陣列) 定義 style props，像下面的例子，我們想要讓 Box 的寬度跟著螢幕大小而改變：
<Box bg="red.200" w={[300, 400, 500]}>
  This is a responsive box
</Box>

所以
當螢幕大於 0em 寬度會是 300px
當螢幕大於 30em 寬度會是 400px
當螢幕大於 48em 寬度會是 500px
更多的 breakpoints 可以看在這裡～
Object syntax
除了用 array 以外，我們也可以用 object (物件)，好處是不需要按照順序去設定 style props：
<Text fontSize={{ base: "24px", md: "40px", lg: "56px" }}>
  This is responsive text
</Text>

物件裡的每一個 key 會對應到一個 breakpoint，例如 md 就是大於 48em 的時候，fontSize 字體大小會等於 40px。
Chakra Factory
以上講到怎麼用現成的元件去做客製，那如果我們想要從頭刻一個元件該怎麼辦呢？或是原本已經有的非 Chakra 元件，該怎麼做？Chakra UI 有提供叫做 Chakra Factory，讓任一個元件也可以有 style props 方便去做客製：
<chakra.button
  px="3"
  py="2"
  bg="green.200"
  rounded="md"
  _hover={{ bg: "green.300" }}
>
  Click me
</chakra.button>

我們可以用 chakra.<element> 然後 <element> 為 HTML element 開發全新的元件。或是我們也可以用 Chakra factory function 去把其他元件 Chakra-化：
// AnotherCard 是個 React 元件
const AwesomeCard = chakra(AnotherCard, {
  baseStyle: {
    shadow: "lg",
    rounded: "lg",
    bg: "white",
  },
})

Global Styles
除了針對元件的客製化，我們也可以加一些 Global Styles，就是對整個 HTML 加一些 CSS styling，例如設定字體～
const theme = {
  styles: {
    global: {
      "html, body": {
        color: "gray.600",
        lineHeight: "tall",
        fontFamily: "'Open Sans', Helvetica Neue, sans-serif",
      },
      a: {
        color: "teal.500",
      },
    },
  },
}

別忘記把上面的 theme 加進 ChakraProvider 裡喔～
小結
大家本來就知道 Chakra UI 嗎？覺得如何呢？個人覺得真的好用！因為他提供蠻多元件可以直接拿來用，而且還有像 Tailwind CSS 的那種 style props 方式，讓客製化變得簡單一些～ 想看 Chakra UI 的簡介和比較可以看這篇！
大家想要看看之前的網站可以看這裡，或是直接到首頁～ 不過這專案不是用 Chakra UI 開發出來的喔。
祝大家明天上班上課愉快！
Live Demo
晚安 <3
看更多
Chakra UI


#11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK


#12 No-code 之旅 — 在 Next.js 專案中顯示 RSS 的資料 ft. RSS Parser


#13 No-code 之旅 — 簡單快速開發漂亮的 React 元件 ft. Chakra UI

繼續昨天的主題，該怎麼用 Chakra UI 做開發呢？現成的元件該怎麼去做客製化？專案有定設計系統 (design s...

#14 No-code 之旅 — 怎麼利用 Chakra UI 去做 React 元件客製化？

<p>今天來點不一樣的！來講一個我最近常用的 React UI component library，就是 <a href="https://chakra-ui.com/">Chakra UI</a>～...

<p>今天來點不一樣的！來講一個我最近常用的 React UI component library，就是 <a href="https://chakra-ui.com/">Chakra UI</a>～ 講到 React，很多人會想到 <a href="https://mui.com/">Material UI (MUI)</a>，或是單純講 CSS styling 的話，現在 <a href="https://tailwindcss.com/">Tailwind CSS</a> 很紅，那 <a href="https://chakra-ui.com/">Chakra UI</a> 跟這兩個 framework / library 有什麼不同呢？</p>
<p><img src="https://i.imgur.com/turYnFN.jpg" alt="Chakra UI" /></p>
<h2>簡介</h2>
<p><a href="https://chakra-ui.com/">Chakra UI</a> 是一個 <strong>React</strong> 的 UI component library，重點是他很簡單也好用！怎麼說？他的元件都符合 <a href="https://www.w3.org/WAI/standards-guidelines/aria/">WAI-ARIA 標準</a> (accessible)，也提供客製化 (themeable)，還有因為模組化所以可以簡單地做出新元件 (composable)！雖然比較不有名，可是最近真的常常看到用到 <strong>Chakra UI</strong> 的專案呢～</p>
<h2>與 Tailwind CSS 的不同</h2>
<p>一個是 CSS 框架，另一個是 React UI component library，所以其實差蠻多的。<a href="https://tailwindcss.com/">Tailwind CSS</a> 主要就是做 styling，也是因為他是 CSS 框架，所以可以跟不同的前端框架搭配起來。而 <a href="https://chakra-ui.com/">Chakra UI</a> 是 UI 庫，它提供了很多 <strong>React</strong> 的元件，<strong>可是！</strong> <strong>Chakra UI</strong> 也提供 Tailwind-like (類似 Tailwind) 的 styling 功能～</p>
<pre><code class="language-xml=">// Chakra UI
&lt;Text mt={2} fontSize=&quot;xl&quot; fontWeight=&quot;semibold&quot;&gt;
  Modern, Chic Penthouse with Mountain, City &amp; Sea Views
&lt;/Text&gt;
</code></pre>
<p><code>Text</code> 為 text 元件，這元件有很多 styling 相關的 props，例如 <code>mt</code> 代表 <code>marginTop</code>，或是字體相關的 props 像是 <code>fontSize</code> 和 <code>fontWeight</code>。</p>
<pre><code class="language-xml=">// Tailwind CSS
&lt;p class=&quot;mt-2 text-xl font-semibold&quot;&gt;
  Modern, Chic Penthouse with Mountain, City &amp; Sea Views
&lt;/p&gt;
</code></pre>
<p>上面是 <strong>Tailwind CSS</strong> 的寫法，是不是長得很像呢？寫起來就是一個是 React 元件的 props，而另一個是寫成元件的 classnames ～</p>
<h2>與 Material UI (MUI) 的不同</h2>
<p><a href="https://mui.com/">Material UI (MUI)</a> 跟 <strong>Chakra UI</strong> 一樣是 React 的 UI component library，兩個都提供很多 React 元件。不過 MUI 有一個特點，讓很多人會選擇用 <strong>MUI</strong> 的其中一個原因，就是基於 Material Design guidelines。如果我們拿 CSS 框架來比喻的話，<strong>MUI</strong> 像是 <strong>Bootstrap</strong>，而 <strong>Chakra UI</strong> 像是 <strong>Tailwind CSS</strong>。當然 MUI 也提供客製化的功能，不過因為元件本身都有一定的風格，所以想要做一些調整的時候會比較麻煩一點。不過 <strong>MUI</strong> 提供更多的元件～</p>
<h2>Chakra UI 的 Hooks</h2>
<p>對，沒錯！<strong>Chakra UI</strong> 還提供 React hooks！這些 hooks 都是 utility functions，讓我們實作元件的過程簡單一些～ 像這 <code>useDisclosure</code> hook (<a href="https://chakra-ui.com/docs/hooks/use-disclosure">docs</a>)，當我們想要做一個小視窗，點某個按鈕的時候把小視窗打開，點小視窗外的地方或是裡面的關閉按鈕，會把小視窗關起來，我們可以用這 custom hook。</p>
<pre><code class="language-javascript=">const { isOpen, onOpen, onClose, onToggle } = useDisclosure();
</code></pre>
<p><code>useDisclosure</code> hook 回傳四個東西，不過我平常只會用三個：</p>
<ul>
<li>
<code>isOpen</code>：如果視窗是開著的狀態，<code>isOpen</code> 為 <code>true</code>
</li>
<li>
<code>onOpen</code>：我們可以把某個按鈕的 <code>onClick</code> event handler 設成 <code>onClick={onOpen}</code>，讓使用者每次點到按鈕，小視窗會立即打開～</li>
<li>
<code>onClose</code>：跟 <code>onOpen</code> 相反，這 function 會把 <code>isOpen</code> 設成 <code>false</code>
</li>
</ul>
<p><strong>Chakra UI</strong> 還提供其他的 custom hooks，像 <code>useClipboard</code> (<a href="https://chakra-ui.com/docs/hooks/use-clipboard">docs</a>)，<code>useBreakpointValue</code> (<a href="https://chakra-ui.com/docs/hooks/use-breakpoint-value">docs</a>)，等等有用的 hooks 喔～</p>
<h2>Setup</h2>
<p><strong>Chakra UI</strong> 本身有用到一些 library，所以安裝的時候還需要裝其他的 library 否則程式碼跑不動：</p>
<pre><code class="language-bash=">npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
# or
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
</code></pre>
<p><a href="https://emotion.sh/docs/introduction">Emotion</a> 是 CSS-in-JS library，<a href="https://www.framer.com/motion/">Framer Motion</a> 是 animation library，而 <strong>Chakra UI</strong> 的元件都有用到這兩個 library，所以都要裝喔～</p>
<p>再來是，我們需要在專案的 root component 把 <code>ChakraProvider</code> import 進來，讓所有元件可以拿到 theme 相關的資料，不過在 Next.js 專案裡我們需要放在 <code>pages/_app.js</code> 裡：</p>
<pre><code class="language-javascript=">// pages/_app.js
import { ChakraProvider } from &quot;@chakra-ui/react&quot;

function MyApp({ Component, pageProps }) {
  return (
    &lt;ChakraProvider&gt;
      &lt;Component {...pageProps} /&gt;
    &lt;/ChakraProvider&gt;
  )
}

export default MyApp
</code></pre>
<p>豪！可以開始使用 <strong>Chakra UI</strong> 所提供的 React 元件做開發了喔～</p>
<h2>小結</h2>
<p>大家本來就知道 <strong>Chakra UI</strong> 嗎？覺得如何呢？個人覺得真的好用！因為他提供蠻多元件可以直接拿來用，而且還有像 <strong>Tailwind CSS</strong> 的那種 styling 方式，讓客製化變得簡單一些～ 還有是因為他符合 a11y 的原則，讓網站比較友善！</p>
<p>大家想要看看之前的網站可以看<a href="https://day07.vercel.app/rss">這裡</a>，或是直接到<a href="https://day07.vercel.app/">首頁</a>～ 不過這專案不是用 <strong>Chakra UI</strong> 開發出來的喔。</p>
<p>祝大家明天上班上課愉快！</p>
<p><a href="https://day07.vercel.app">Live Demo</a></p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://chakra-ui.com">Chakra UI</a>
</li>
<li>
<a href="https://mui.com/">Material UI (MUI)</a>
</li>
<li>
<a href="https://tailwindcss.com/">Tailwind CSS</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10272079">#10 實作篇 — 使用 SWR 抓取和 Cache 資料</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10272845">#11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10273521">#12 No-code 之旅 — 在 Next.js 專案中顯示 RSS 的資料 ft. RSS Parser</a>
</li>
</ul>


今天來點不一樣的！來講一個我最近常用的 React UI component library，就是 Chakra UI～ 講到 React，很多人會想到 Material UI (MUI)，或是單純講 CSS styling 的話，現在 Tailwind CSS 很紅，那 Chakra UI 跟這兩個 framework / library 有什麼不同呢？

簡介
Chakra UI 是一個 React 的 UI component library，重點是他很簡單也好用！怎麼說？他的元件都符合 WAI-ARIA 標準 (accessible)，也提供客製化 (themeable)，還有因為模組化所以可以簡單地做出新元件 (composable)！雖然比較不有名，可是最近真的常常看到用到 Chakra UI 的專案呢～
與 Tailwind CSS 的不同
一個是 CSS 框架，另一個是 React UI component library，所以其實差蠻多的。Tailwind CSS 主要就是做 styling，也是因為他是 CSS 框架，所以可以跟不同的前端框架搭配起來。而 Chakra UI 是 UI 庫，它提供了很多 React 的元件，可是！ Chakra UI 也提供 Tailwind-like (類似 Tailwind) 的 styling 功能～
// Chakra UI
<Text mt={2} fontSize="xl" fontWeight="semibold">
  Modern, Chic Penthouse with Mountain, City & Sea Views
</Text>

Text 為 text 元件，這元件有很多 styling 相關的 props，例如 mt 代表 marginTop，或是字體相關的 props 像是 fontSize 和 fontWeight。
// Tailwind CSS
<p class="mt-2 text-xl font-semibold">
  Modern, Chic Penthouse with Mountain, City & Sea Views
</p>

上面是 Tailwind CSS 的寫法，是不是長得很像呢？寫起來就是一個是 React 元件的 props，而另一個是寫成元件的 classnames ～
與 Material UI (MUI) 的不同
Material UI (MUI) 跟 Chakra UI 一樣是 React 的 UI component library，兩個都提供很多 React 元件。不過 MUI 有一個特點，讓很多人會選擇用 MUI 的其中一個原因，就是基於 Material Design guidelines。如果我們拿 CSS 框架來比喻的話，MUI 像是 Bootstrap，而 Chakra UI 像是 Tailwind CSS。當然 MUI 也提供客製化的功能，不過因為元件本身都有一定的風格，所以想要做一些調整的時候會比較麻煩一點。不過 MUI 提供更多的元件～
Chakra UI 的 Hooks
對，沒錯！Chakra UI 還提供 React hooks！這些 hooks 都是 utility functions，讓我們實作元件的過程簡單一些～ 像這 useDisclosure hook (docs)，當我們想要做一個小視窗，點某個按鈕的時候把小視窗打開，點小視窗外的地方或是裡面的關閉按鈕，會把小視窗關起來，我們可以用這 custom hook。
const { isOpen, onOpen, onClose, onToggle } = useDisclosure();

useDisclosure hook 回傳四個東西，不過我平常只會用三個：
isOpen：如果視窗是開著的狀態，isOpen 為 true


onOpen：我們可以把某個按鈕的 onClick event handler 設成 onClick={onOpen}，讓使用者每次點到按鈕，小視窗會立即打開～
onClose：跟 onOpen 相反，這 function 會把 isOpen 設成 false


Chakra UI 還提供其他的 custom hooks，像 useClipboard (docs)，useBreakpointValue (docs)，等等有用的 hooks 喔～
Setup
Chakra UI 本身有用到一些 library，所以安裝的時候還需要裝其他的 library 否則程式碼跑不動：
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
# or
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Emotion 是 CSS-in-JS library，Framer Motion 是 animation library，而 Chakra UI 的元件都有用到這兩個 library，所以都要裝喔～
再來是，我們需要在專案的 root component 把 ChakraProvider import 進來，讓所有元件可以拿到 theme 相關的資料，不過在 Next.js 專案裡我們需要放在 pages/_app.js 裡：
// pages/_app.js
import { ChakraProvider } from "@chakra-ui/react"

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

豪！可以開始使用 Chakra UI 所提供的 React 元件做開發了喔～
小結
大家本來就知道 Chakra UI 嗎？覺得如何呢？個人覺得真的好用！因為他提供蠻多元件可以直接拿來用，而且還有像 Tailwind CSS 的那種 styling 方式，讓客製化變得簡單一些～ 還有是因為他符合 a11y 的原則，讓網站比較友善！
大家想要看看之前的網站可以看這裡，或是直接到首頁～ 不過這專案不是用 Chakra UI 開發出來的喔。
祝大家明天上班上課愉快！
Live Demo
晚安 <3
看更多
Chakra UI


Material UI (MUI)


Tailwind CSS


#10 實作篇 — 使用 SWR 抓取和 Cache 資料


#11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK


#12 No-code 之旅 — 在 Next.js 專案中顯示 RSS 的資料 ft. RSS Parser

今天來點不一樣的！來講一個我最近常用的 React UI component library，就是 Chakra UI～...

#13 No-code 之旅 — 簡單快速開發漂亮的 React 元件 ft. Chakra UI

<p>嗨嗨嗨！昨天使用 <a href="https://developers.notion.com/docs/getting-started">Notion SDK</a> 顯示我的 Notion ...

<p>嗨嗨嗨！昨天使用 <a href="https://developers.notion.com/docs/getting-started">Notion SDK</a> 顯示我的 Notion page 裡面的內容，可以在<a href="https://day07.vercel.app/notion">這裡</a>看看喔。那今天新增了一個新的頁面，使用 <strong>RSS</strong> 顯示<strong>iT邦幫忙</strong>系列文的文章！<a href="https://day07.vercel.app/rss">點我</a>看成果～</p>
<p><img src="https://i.imgur.com/5F6PAac.png" alt="RSS Parser" /></p>
<h2>Setup</h2>
<p>我們今天用的 library 叫做 <code>rss-parser</code> (<a href="https://github.com/rbren/rss-parser">Github</a>)，來安裝喔：</p>
<pre><code class="language-bash=">npm install rss-parser
# or
yarn add rss-parser
</code></pre>
<p>這 library 可以用在 Node.js 環境同時也能在 Web 使用，裝完之後我們可以開始用了～</p>
<pre><code class="language-javascript=">import Parser from &quot;rss-parser&quot;;

// 初始化 Parser
const parser = new Parser();
</code></pre>
<p>它提供兩種方法，一個是 <code>parser.parseURL</code> 去抓取某 RSS URL 的內容，另一個是 <code>parser.parseString</code> 去 parse XML 字串。我們今天用的是 <code>parser.parseURL</code>。</p>
<h2>取得系列文資料</h2>
<p>我們可以在瀏覽器上輸入 RSS 的連結 (例如 <a href="https://ithelp.ithome.com.tw/rss/series/4914">https://ithelp.ithome.com.tw/rss/series/4914</a>)，應該會看到很多黑白文字（？<br />
這是 <strong>XML</strong> 格式然後裡面會包含系列文的資訊以及系列文裡面的所有文章內容：</p>
<pre><code class="language-xml=">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?&gt;
&lt;rss version=&quot;2.0&quot;
  xmlns:atom=&quot;http://www.w3.org/2005/Atom&quot;
  xmlns:content=&quot;http://purl.org/rss/1.0/modules/content/&quot;
  xmlns:media=&quot;http://search.yahoo.com/mrss/&quot;&gt;
  &lt;channel&gt;
    &lt;title&gt;製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ :: 2021 iThome 鐵人賽&lt;/title&gt;
    &lt;link&gt;https://ithelp.ithome.com.tw/users/20141378/ironman&lt;/link&gt;
    &lt;description&gt;&lt;![CDATA[在這 30 天想要製作最近很紅的 no-code (無程式碼) 網頁～
...]]&gt;&lt;/description&gt;
    &lt;atom:link href=&quot;https://ithelp.ithome.com.tw/users/20141378/ironman&quot; rel=&quot;self&quot;&gt;&lt;/atom:link&gt;
    &lt;image&gt;
      &lt;url&gt;https://ithelp.ithome.com.tw/images/ironman/13th/fb.jpg&lt;/url&gt;
      &lt;title&gt;製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ :: 2021 iThome 鐵人賽&lt;/title&gt;
      &lt;link&gt;https://ithelp.ithome.com.tw/users/20141378/ironman&lt;/link&gt;
    &lt;/image&gt;
    &lt;language&gt;zh-TW&lt;/language&gt;
    &lt;lastBuildDate&gt;Mon, 27 Sep 2021 20:49:12 +0800&lt;/lastBuildDate&gt;
    &lt;item&gt;...&lt;/item&gt;
    &lt;item&gt;...&lt;/item&gt;
    ...
  &lt;/channel&gt;
&lt;/rss&gt;
</code></pre>
<p><code>&lt;item&gt;...&lt;/item&gt;</code> 就是系列文裡的每一篇文章，</p>
<pre><code class="language-xml=">&lt;item&gt;
  &lt;title&gt;#02 No-code 之旅 - Next.js 簡介&lt;/title&gt;
  &lt;link&gt;https://ithelp.ithome.com.tw/articles/10266342?sc=rss.iron&lt;/link&gt;
  &lt;guid isPermaLink=&quot;true&quot;&gt;https://ithelp.ithome.com.tw/articles/10266342?sc=rss.iron&lt;/guid&gt;
  &lt;description&gt;&lt;![CDATA[&lt;p&gt;大家星期五快樂！TGIF～ 今天想跟大家分享 Next.js 這個 React 框架 (官網寫 &amp;quot;The React Framework for Production&amp;quot;)。講...]]&gt;&lt;/description&gt;
  &lt;content:encoded&gt;&lt;![CDATA[&lt;p&gt;大家星期五快樂！TGIF～ 今天想跟大家分享 Next.js 這個 React 框架 (官網寫 &amp;quot;The React Framework for Production&amp;quot;)。講到...]]&gt;
  &lt;/content:encoded&gt;
  &lt;dc:creator xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot;&gt;Jade&lt;/dc:creator&gt;
  &lt;pubDate&gt;2021-09-17 22:30:01&lt;/pubDate&gt;
&lt;/item&gt;
</code></pre>
<p>裡面包含 <code>title</code>，<code>link</code>，<code>description</code>，<code>content</code> 等資訊。可是這些資料是用 <strong>XML</strong> 格式呈現出來的，所以我們需要 parser 來把這些資訊轉成 <strong>JavaScript object</strong> (物件) 格式！讓我們程式好拿我們所需的資料～</p>
<h2>用 Data Fetching 方式抓取資料</h2>
<p>豪！可以開始讀資料了～ 因為 RSS 會定期更新資料，所以我想我可以用 <code>getStaticProps</code> 再搭配 <code>revalidate</code> 去 parse 我們系列文的內容。</p>
<pre><code class="language-javascript=">export async function getStaticProps() {
  const parser = new Parser();
  const data = await parser.parseURL(
    // 我的系列文的 RSS 連結
    &quot;https://ithelp.ithome.com.tw/rss/series/4914&quot;
  );

  return {
    props: { data },
    revalidate: 30 * 60, // 至少 30 分鐘後去產生新頁面
  };
}
</code></pre>
<p><code>data</code> 為 <strong>JavaScript object</strong> 格式：</p>
<pre><code class="language-json=">{
  description: &quot;在這 30 天想要製作最近很紅的 no-code (無程式碼) 網頁～\r\n\r\n身為喜歡寫程式的工程師，這次想挑戰的並不是使用 no-code 平台實作一個網頁出來，而是自己手刻製...&quot;,
  feedUrl: &quot;https://ithelp.ithome.com.tw/users/20141378/ironman&quot;,
  image: {
    link: 'https://ithelp.ithome.com.tw/users/20141378/ironman',
    url: 'https://ithelp.ithome.com.tw/images/ironman/13th/fb.jpg',
    title: '製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ :: 2021 iThome 鐵人賽',
  },
  items: (11) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}],
  language: &quot;zh-TW&quot;,
  lastBuildDate: &quot;Mon, 27 Sep 2021 21:51:15 +0800&quot;,
  link: &quot;https://ithelp.ithome.com.tw/users/20141378/ironman&quot;,
  paginationLinks: {
    self: 'https://ithelp.ithome.com.tw/users/20141378/ironman',
  },
  title: &quot;製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ :: 2021 iThome 鐵人賽&quot;,
}
</code></pre>
<p>拿到這些資料之後，我們可以顯示在畫面上了！所以我把這些資料顯示在這個<a href="https://day07.vercel.app/rss">頁面</a>，裡面的內容都不是寫死的，而是從 RSS 拿到的資料喔～</p>
<p><img src="https://i.imgur.com/ZTNtG6I.png" alt="RSS 頁" /></p>
<h2>小結</h2>
<p>這幾天串了幾個不同的 API，取的各種資料，來顯示在我們的網頁上，而今天是讀取 RSS 所提供的內容。雖然格式比較不一樣，可是有了第三方 library 之後，我們也不需要自己去 parse 這些資訊。我們負責顯示或是後處理就可以了！而且搭配 Next.js 的 ISR 真的很方便～<br />
大家可以看看在<a href="https://day07.vercel.app/rss">這裡</a>，然後 RSS 連結在<a href="https://ithelp.ithome.com.tw/rss/series/4914">這裡</a>～</p>
<p>祝大家明天上班上課愉快！</p>
<p><a href="https://day07.vercel.app/rss">Live Demo</a></p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://github.com/rbren/rss-parser">RSS Parser</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10272079">#10 實作篇 — 使用 SWR 抓取和 Cache 資料</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10272845">#11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK</a>
</li>
</ul>


嗨嗨嗨！昨天使用 Notion SDK 顯示我的 Notion page 裡面的內容，可以在這裡看看喔。那今天新增了一個新的頁面，使用 RSS 顯示iT邦幫忙系列文的文章！點我看成果～

Setup
我們今天用的 library 叫做 rss-parser (Github)，來安裝喔：
npm install rss-parser
# or
yarn add rss-parser

這 library 可以用在 Node.js 環境同時也能在 Web 使用，裝完之後我們可以開始用了～
import Parser from "rss-parser";

// 初始化 Parser
const parser = new Parser();

它提供兩種方法，一個是 parser.parseURL 去抓取某 RSS URL 的內容，另一個是 parser.parseString 去 parse XML 字串。我們今天用的是 parser.parseURL。
取得系列文資料
我們可以在瀏覽器上輸入 RSS 的連結 (例如 https://ithelp.ithome.com.tw/rss/series/4914)，應該會看到很多黑白文字（？
XML 格式然後裡面會包含系列文的資訊以及系列文裡面的所有文章內容：
<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0"
  xmlns:atom="http://www.w3.org/2005/Atom"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ :: 2021 iThome 鐵人賽</title>
    <link>https://ithelp.ithome.com.tw/users/20141378/ironman</link>
    <description><![CDATA[在這 30 天想要製作最近很紅的 no-code (無程式碼) 網頁～
...]]></description>
    <atom:link href="https://ithelp.ithome.com.tw/users/20141378/ironman" rel="self"></atom:link>
    <image>
      <url>https://ithelp.ithome.com.tw/images/ironman/13th/fb.jpg</url>
      <title>製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ :: 2021 iThome 鐵人賽</title>
      <link>https://ithelp.ithome.com.tw/users/20141378/ironman</link>
    </image>
    <language>zh-TW</language>
    <lastBuildDate>Mon, 27 Sep 2021 20:49:12 +0800</lastBuildDate>
    <item>...</item>
    <item>...</item>
    ...
  </channel>
</rss>

<item>...</item> 就是系列文裡的每一篇文章，
<item>
  <title>#02 No-code 之旅 - Next.js 簡介</title>
  <link>https://ithelp.ithome.com.tw/articles/10266342?sc=rss.iron</link>
  <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10266342?sc=rss.iron</guid>
  <description><![CDATA[<p>大家星期五快樂！TGIF～ 今天想跟大家分享 Next.js 這個 React 框架 (官網寫 &quot;The React Framework for Production&quot;)。講...]]></description>
  <content:encoded><![CDATA[<p>大家星期五快樂！TGIF～ 今天想跟大家分享 Next.js 這個 React 框架 (官網寫 &quot;The React Framework for Production&quot;)。講到...]]>
  </content:encoded>
  <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">Jade</dc:creator>
  <pubDate>2021-09-17 22:30:01</pubDate>
</item>

裡面包含 title，link，description，content 等資訊。可是這些資料是用 XML 格式呈現出來的，所以我們需要 parser 來把這些資訊轉成 JavaScript object (物件) 格式！讓我們程式好拿我們所需的資料～
用 Data Fetching 方式抓取資料
豪！可以開始讀資料了～ 因為 RSS 會定期更新資料，所以我想我可以用 getStaticProps 再搭配 revalidate 去 parse 我們系列文的內容。
export async function getStaticProps() {
  const parser = new Parser();
  const data = await parser.parseURL(
    // 我的系列文的 RSS 連結
    "https://ithelp.ithome.com.tw/rss/series/4914"
  );

  return {
    props: { data },
    revalidate: 30 * 60, // 至少 30 分鐘後去產生新頁面
  };
}

data 為 JavaScript object 格式：
{
  description: "在這 30 天想要製作最近很紅的 no-code (無程式碼) 網頁～\r\n\r\n身為喜歡寫程式的工程師，這次想挑戰的並不是使用 no-code 平台實作一個網頁出來，而是自己手刻製...",
  feedUrl: "https://ithelp.ithome.com.tw/users/20141378/ironman",
  image: {
    link: 'https://ithelp.ithome.com.tw/users/20141378/ironman',
    url: 'https://ithelp.ithome.com.tw/images/ironman/13th/fb.jpg',
    title: '製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ :: 2021 iThome 鐵人賽',
  },
  items: (11) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}],
  language: "zh-TW",
  lastBuildDate: "Mon, 27 Sep 2021 21:51:15 +0800",
  link: "https://ithelp.ithome.com.tw/users/20141378/ironman",
  paginationLinks: {
    self: 'https://ithelp.ithome.com.tw/users/20141378/ironman',
  },
  title: "製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～ :: 2021 iThome 鐵人賽",
}

拿到這些資料之後，我們可以顯示在畫面上了！所以我把這些資料顯示在這個頁面，裡面的內容都不是寫死的，而是從 RSS 拿到的資料喔～

小結
這幾天串了幾個不同的 API，取的各種資料，來顯示在我們的網頁上，而今天是讀取 RSS 所提供的內容。雖然格式比較不一樣，可是有了第三方 library 之後，我們也不需要自己去 parse 這些資訊。我們負責顯示或是後處理就可以了！而且搭配 Next.js 的 ISR 真的很方便～
這裡，然後 RSS 連結在這裡～
祝大家明天上班上課愉快！
Live Demo
晚安 <3
看更多
RSS Parser


#10 實作篇 — 使用 SWR 抓取和 Cache 資料


#11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK

嗨嗨嗨！昨天使用 Notion SDK 顯示我的 Notion ...

#12 No-code 之旅 — 在 Next.js 專案中顯示 RSS 的資料 ft. RSS Parser

<p>哈囉！昨天使用 <a href="https://swr.vercel.app/">SWR</a> 實作了一個<a href="https://ithelp.ithome.com.tw/arti...

<p>哈囉！昨天使用 <a href="https://swr.vercel.app/">SWR</a> 實作了一個<a href="https://ithelp.ithome.com.tw/articles/10272079">小功能</a>，讓使用者可以列出某 Github user 的所有公開 repository～ 今天用 <a href="https://developers.notion.com/docs/getting-started">Notion SDK</a> 新增了一個新的頁面，顯示我的 Notion page 裡面的內容，可以在<a href="https://day07.vercel.app/notion">這裡</a>看看喔。</p>
<p><img src="https://i.imgur.com/ssvc0PW.png" alt="Notion SDK" /></p>
<h2>Getting Started</h2>
<p>想要可以用 Notion SDK 或呼叫 Notion API 之前，我們要去做這些<a href="https://developers.notion.com/docs/getting-started">步驟</a>取得權限：</p>
<ol>
<li>新增一個 integration
<ul>
<li>到 <a href="https://www.notion.com/my-integrations">My Integrations</a> 頁</li>
<li>按 &quot;+ New Integration&quot; 按鈕去</li>
<li>輸入需要的資料，例如 integration 名稱，選 workspace</li>
<li>按 &quot;Submit&quot; 送出，新增完了！</li>
<li>現在把 &quot;Internal Integration Token&quot; 裡的 secret 複製下來，放在安全的地方，我們之後會用到～</li>
</ul>
</li>
<li>把 page 分享給 integration
<ul>
<li>到你想要取得資料的 Notion page，像我的是<a href="https://jadejs.notion.site/iTHome-0f3a86530c5e44d18004c5c689044c5d">這一頁</a>
</li>
<li>按 &quot;Share&quot; 打開分享小視窗</li>
<li>點輸入匡，會有新的小視窗出來</li>
<li>裡面應該會看到你剛新增的 integration</li>
<li>選該 integration 然後按 &quot;Invite&quot;</li>
</ul>
</li>
<li>複製你的 Notion page ID，像我的 URL 長這樣 <code>https://jadejs.notion.site/iTHome-0f3a86530c5e44d18004c5c689044c5d</code>，<code>-</code> 後面的一串字串是我們想要的 ID</li>
<li>把 secret token 和 page ID 寫在 <code>.env</code> 檔裡面
<pre><code>NOTION_TOKEN=secret_**********************************
NOTION_PAGE_ID=0f3a86530c5e44d18004c5c689044c5d
</code></pre>
page ID 其實是公開的資訊，所以不一定要放在 <code>.env</code> 裡～</li>
</ol>
<h2>Setup</h2>
<p>我們現在要安裝 Notion SDK，如果你們想要用 Notion API 也可以喔！不過我在這專案裡使用的是 SDK：</p>
<pre><code class="language-bash=">npm install @notionhq/client
# or
yarn add @notionhq/client
</code></pre>
<p>裝完之後我們可以開始用 SDK 了～</p>
<pre><code class="language-javascript=">import { Client } from &quot;@notionhq/client&quot;;

// 初始化 Client
const notion = new Client({
  auth: process.env.NOTION_TOKEN, // 剛剛把 secret token 寫在 .env 裡面的那個！
});
</code></pre>
<h2>取得 Page 資料</h2>
<p>豪！可以開始拿資料了～ Notion API 有提供很多 endpoints，例如我們今天要用的 <code>pages.retrieve</code>，就是取得該 page 的內容。</p>
<pre><code class="language-javascript=">export const getPage = async () =&gt; {
  const pageId = process.env.NOTION_PAGE_ID; // 我們的 page ID
  const response = await notion.pages.retrieve({ page_id: pageId });

  // response 會是 page object
  return response;
};
</code></pre>
<p><code>response</code> 為 JSON 格式的 page object：</p>
<pre><code class="language-json=">{
  &quot;object&quot;: &quot;page&quot;,
  &quot;id&quot;: &quot;b55c9c91-384d-452b-81db-d1ef79372b75&quot;,
  &quot;created_time&quot;: &quot;2020-03-17T19:10:04.968Z&quot;,
  &quot;last_edited_time&quot;: &quot;2020-03-17T21:49:37.913Z&quot;,
  &quot;parent&quot;: {
    &quot;type&quot;: &quot;database_id&quot;,
    &quot;database_id&quot;: &quot;48f8fee9-cd79-4180-bc2f-ec0398253067&quot;
  },
  &quot;archived&quot;: false,
  &quot;url&quot;: &quot;https://www.notion.so/Avocado-b55c9c91384d452b81dbd1ef79372b75&quot;,
  &quot;icon&quot;: { &quot;type&quot;: &quot;emoji&quot;, &quot;emoji&quot;: &quot;?&quot; },
  &quot;cover&quot;: {
    &quot;type&quot;: &quot;external&quot;,
    &quot;external&quot;: {
    	&quot;url&quot;: &quot;https://website.domain/images/image.png&quot;
    }
  },
  &quot;properties&quot;: {...}
}
</code></pre>
<p>使用 <code>pages.retrieve</code> 並不會拿到該 page 的 <code>blocks</code> (page 的內容)，只會拿到 page 的一些資訊和 <code>properties</code>。<br><img src="https://files.readme.io/369b6a5-page-properties-and-content.png" alt="Working with page content" /></p>
<h6>圖片來源：<a href="https://developers.notion.com/docs/working-with-page-content">Working with page content</a></h6>
<p>所以我們拿不到上面圖中的連結和文字，可是我們會拿到 <code>title</code>，<code>Actor</code>，還有封面圖，新增編輯時間等。</p>
<h2>取得 Blocks</h2>
<pre><code class="language-javascript=">export const getBlocks = async () =&gt; {
  // page 也是一種 block
  const blockId = process.env.NOTION_PAGE_ID;
  // 我們想拿到 page 裡的 blocks，這裡 block_id 等於 page ID
  const response = await notion.blocks.children.list({ block_id: blockId });

  // response 為 list of blocks
  return response;
};
</code></pre>
<p>以上面的圖為例子，我們會拿到三個 blocks，第一個是連結，第二個是 <strong>Synopsis</strong>，第三個是 paragraph。</p>
<p><img src="https://i.imgur.com/kdebNLd.png" alt="Notion 頁" /></p>
<p>如果以上面的圖為例子，就是我今天做的<a href="https://day07.vercel.app/notion">頁面</a>，我們大概會拿到像這樣的 <code>response</code>：</p>
<pre><code class="language-json=">{
  &quot;object&quot;: &quot;list&quot;,
  &quot;results&quot;: [
    {
      &quot;object&quot;: &quot;block&quot;,
      &quot;id&quot;: &quot;c164f4b2-ad9e-45df-859c-bbb5759eff00&quot;,
      &quot;created_time&quot;: &quot;2021-09-26T08:42:00.000Z&quot;,
      &quot;last_edited_time&quot;: &quot;2021-09-26T08:42:00.000Z&quot;,
      &quot;has_children&quot;: false,
      &quot;archived&quot;: false,
      &quot;type&quot;: &quot;heading_1&quot;,
      &quot;heading_1&quot;: {
        &quot;text&quot;: [
          {
            &quot;type&quot;: &quot;text&quot;,
            &quot;text&quot;: { &quot;content&quot;: &quot;2021 鐵人賽 | iT邦幫忙&quot;, &quot;link&quot;: null },
            &quot;annotations&quot;: {
              &quot;bold&quot;: false,
              &quot;italic&quot;: false,
              &quot;strikethrough&quot;: false,
              &quot;underline&quot;: false,
              &quot;code&quot;: false,
              &quot;color&quot;: &quot;default&quot;
            },
            &quot;plain_text&quot;: &quot;2021 鐵人賽 | iT邦幫忙&quot;,
            &quot;href&quot;: null
          }
        ]
      }
    },
    {
      &quot;object&quot;: &quot;block&quot;,
      &quot;id&quot;: &quot;0f707dff-1498-4416-a156-7c6ef2a026d1&quot;,
      &quot;created_time&quot;: &quot;2021-09-26T08:42:00.000Z&quot;,
      &quot;last_edited_time&quot;: &quot;2021-09-26T08:42:00.000Z&quot;,
      &quot;has_children&quot;: false,
      &quot;archived&quot;: false,
      &quot;type&quot;: &quot;heading_3&quot;,
      &quot;heading_3&quot;: {
        &quot;text&quot;: [
          {
            &quot;type&quot;: &quot;text&quot;,
            &quot;text&quot;: {
              &quot;content&quot;: &quot;製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～&quot;,
              &quot;link&quot;: null
            },
            &quot;annotations&quot;: {
              &quot;bold&quot;: false,
              &quot;italic&quot;: false,
              &quot;strikethrough&quot;: false,
              &quot;underline&quot;: false,
              &quot;code&quot;: false,
              &quot;color&quot;: &quot;default&quot;
            },
            &quot;plain_text&quot;: &quot;製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～&quot;,
            &quot;href&quot;: null
          }
        ]
      }
    },
    ...
  ],
}
</code></pre>
<p>每個 block 會有 <code>id</code>，<code>type</code>，新增編輯時間等，也包含該 block 的內容，像 <code>heading_3</code> 的 block，裡面包含了 <code>text</code> 的陣列，每一個 text object 會有自己的格式 (formatting)，寫在 <code>annotations</code> 裡面。我們可以根據 <code>annotations</code> 還有 <code>href</code> 的資訊決定該怎麼顯示這個 text object (物件)～</p>
<h2>用 Data Fetching 方式抓取資料</h2>
<p>今天使用了 <code>getStaticProps</code> 抓取資料，可是也可以用 <code>getServerSideProps</code>，而且用 SSR 的話，頁面可以拿到最新的內容！不過我這頁面內容應該不會變，所以決定這麼寫：</p>
<pre><code class="language-javascript=">// pages/notion.js
export async function getStaticProps() {
  // 可以直接把 getPage 和 getBlocks import 進來～
  const page = await getPage();
  const blocks = await getBlocks();
  const data = { ...page, blocks };

  return {
    props: { data },
  };
}
</code></pre>
<h2>小結</h2>
<p>今天看了 Notion API 的文件，發現抓完資料還要做多處理！不過這也讓我們有更多的彈性，想怎麼顯示我們拿到的資料都可以～ 所以我從一開始打算把 Notion 當成 CMS 或是資料庫，把資料都寫在 Notion 裡，然後再用 API 取這些資料去顯示。今天的小功能有讓我覺得好像離目標更近一步了！ＸＤ<br />
大家可以看看在<a href="https://day07.vercel.app/notion">這裡</a>，然後 Notion 的 page 在<a href="https://jadejs.notion.site/iTHome-0f3a86530c5e44d18004c5c689044c5d">這裡</a>～</p>
<p>祝大家週末愉快！</p>
<p><a href="https://day07.vercel.app/notion">Live Demo</a></p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://developers.notion.com/docs/getting-started">Notion Integration</a>
</li>
<li>
<a href="https://developers.notion.com/reference/retrieve-a-page">Notion API</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10272079">#10 實作篇 — 使用 SWR 抓取和 Cache 資料</a>
</li>
</ul>


哈囉！昨天使用 SWR 實作了一個小功能，讓使用者可以列出某 Github user 的所有公開 repository～ 今天用 Notion SDK 新增了一個新的頁面，顯示我的 Notion page 裡面的內容，可以在這裡看看喔。

Getting Started
想要可以用 Notion SDK 或呼叫 Notion API 之前，我們要去做這些步驟取得權限：
新增一個 integration

到 My Integrations 頁
按 "+ New Integration" 按鈕去
輸入需要的資料，例如 integration 名稱，選 workspace
按 "Submit" 送出，新增完了！
現在把 "Internal Integration Token" 裡的 secret 複製下來，放在安全的地方，我們之後會用到～
把 page 分享給 integration

到你想要取得資料的 Notion page，像我的是這一頁

按 "Share" 打開分享小視窗
點輸入匡，會有新的小視窗出來
裡面應該會看到你剛新增的 integration
選該 integration 然後按 "Invite"
複製你的 Notion page ID，像我的 URL 長這樣 https://jadejs.notion.site/iTHome-0f3a86530c5e44d18004c5c689044c5d，- 後面的一串字串是我們想要的 ID
把 secret token 和 page ID 寫在 .env 檔裡面
NOTION_TOKEN=secret_**********************************
NOTION_PAGE_ID=0f3a86530c5e44d18004c5c689044c5d

.env 裡～
Setup
我們現在要安裝 Notion SDK，如果你們想要用 Notion API 也可以喔！不過我在這專案裡使用的是 SDK：
npm install @notionhq/client
# or
yarn add @notionhq/client

裝完之後我們可以開始用 SDK 了～
import { Client } from "@notionhq/client";

// 初始化 Client
const notion = new Client({
  auth: process.env.NOTION_TOKEN, // 剛剛把 secret token 寫在 .env 裡面的那個！
});

取得 Page 資料
豪！可以開始拿資料了～ Notion API 有提供很多 endpoints，例如我們今天要用的 pages.retrieve，就是取得該 page 的內容。
export const getPage = async () => {
  const pageId = process.env.NOTION_PAGE_ID; // 我們的 page ID
  const response = await notion.pages.retrieve({ page_id: pageId });

  // response 會是 page object
  return response;
};

response 為 JSON 格式的 page object：
{
  "object": "page",
  "id": "b55c9c91-384d-452b-81db-d1ef79372b75",
  "created_time": "2020-03-17T19:10:04.968Z",
  "last_edited_time": "2020-03-17T21:49:37.913Z",
  "parent": {
    "type": "database_id",
    "database_id": "48f8fee9-cd79-4180-bc2f-ec0398253067"
  },
  "archived": false,
  "url": "https://www.notion.so/Avocado-b55c9c91384d452b81dbd1ef79372b75",
  "icon": { "type": "emoji", "emoji": "?" },
  "cover": {
    "type": "external",
    "external": {
    	"url": "https://website.domain/images/image.png"
    }
  },
  "properties": {...}
}

使用 pages.retrieve 並不會拿到該 page 的 blocks (page 的內容)，只會拿到 page 的一些資訊和 properties。

圖片來源：Working with page content
所以我們拿不到上面圖中的連結和文字，可是我們會拿到 title，Actor，還有封面圖，新增編輯時間等。
取得 Blocks
export const getBlocks = async () => {
  // page 也是一種 block
  const blockId = process.env.NOTION_PAGE_ID;
  // 我們想拿到 page 裡的 blocks，這裡 block_id 等於 page ID
  const response = await notion.blocks.children.list({ block_id: blockId });

  // response 為 list of blocks
  return response;
};

以上面的圖為例子，我們會拿到三個 blocks，第一個是連結，第二個是 Synopsis，第三個是 paragraph。

如果以上面的圖為例子，就是我今天做的頁面，我們大概會拿到像這樣的 response：
{
  "object": "list",
  "results": [
    {
      "object": "block",
      "id": "c164f4b2-ad9e-45df-859c-bbb5759eff00",
      "created_time": "2021-09-26T08:42:00.000Z",
      "last_edited_time": "2021-09-26T08:42:00.000Z",
      "has_children": false,
      "archived": false,
      "type": "heading_1",
      "heading_1": {
        "text": [
          {
            "type": "text",
            "text": { "content": "2021 鐵人賽 | iT邦幫忙", "link": null },
            "annotations": {
              "bold": false,
              "italic": false,
              "strikethrough": false,
              "underline": false,
              "code": false,
              "color": "default"
            },
            "plain_text": "2021 鐵人賽 | iT邦幫忙",
            "href": null
          }
        ]
      }
    },
    {
      "object": "block",
      "id": "0f707dff-1498-4416-a156-7c6ef2a026d1",
      "created_time": "2021-09-26T08:42:00.000Z",
      "last_edited_time": "2021-09-26T08:42:00.000Z",
      "has_children": false,
      "archived": false,
      "type": "heading_3",
      "heading_3": {
        "text": [
          {
            "type": "text",
            "text": {
              "content": "製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～",
              "link": null
            },
            "annotations": {
              "bold": false,
              "italic": false,
              "strikethrough": false,
              "underline": false,
              "code": false,
              "color": "default"
            },
            "plain_text": "製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～",
            "href": null
          }
        ]
      }
    },
    ...
  ],
}

每個 block 會有 id，type，新增編輯時間等，也包含該 block 的內容，像 heading_3 的 block，裡面包含了 text 的陣列，每一個 text object 會有自己的格式 (formatting)，寫在 annotations 裡面。我們可以根據 annotations 還有 href 的資訊決定該怎麼顯示這個 text object (物件)～
用 Data Fetching 方式抓取資料
今天使用了 getStaticProps 抓取資料，可是也可以用 getServerSideProps，而且用 SSR 的話，頁面可以拿到最新的內容！不過我這頁面內容應該不會變，所以決定這麼寫：
// pages/notion.js
export async function getStaticProps() {
  // 可以直接把 getPage 和 getBlocks import 進來～
  const page = await getPage();
  const blocks = await getBlocks();
  const data = { ...page, blocks };

  return {
    props: { data },
  };
}

小結
今天看了 Notion API 的文件，發現抓完資料還要做多處理！不過這也讓我們有更多的彈性，想怎麼顯示我們拿到的資料都可以～ 所以我從一開始打算把 Notion 當成 CMS 或是資料庫，把資料都寫在 Notion 裡，然後再用 API 取這些資料去顯示。今天的小功能有讓我覺得好像離目標更近一步了！ＸＤ
這裡，然後 Notion 的 page 在這裡～
祝大家週末愉快！
Live Demo
晚安 <3
看更多
Notion Integration


Notion API


#10 實作篇 — 使用 SWR 抓取和 Cache 資料

哈囉！昨天使用 SWR 實作了一個<a href="https://ithelp.ithome.com.tw/arti...

#11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK

<p>嗨大家！昨天跟大家分享一個 library 叫做 <a href="https://swr.vercel.app/">SWR</a>，文章在<a href="https://ithelp.ith...

<p>嗨大家！昨天跟大家分享一個 library 叫做 <a href="https://swr.vercel.app/">SWR</a>，文章在<a href="https://ithelp.ithome.com.tw/articles/10271427">這裡</a>～ 今天用 <strong>SWR</strong> 新增了小功能，使用者可以輸入 Github username 然後列出該 user 的所有 public repository，可以在<a href="https://day07.vercel.app/search">這裡</a>試試看喔。</p>
<p><img src="https://i.imgur.com/VgBJ8DD.jpg" alt="Client-side SWR" /></p>
<h2><code>fetcher</code> Function</h2>
<p>像<a href="https://ithelp.ithome.com.tw/articles/10271427">這篇文章</a>提到的，使用 <code>useSWR</code> 時，我們要提供一個 <code>fetcher</code> function 去抓取資料。這 function 要回傳 data，發生錯誤時回 error：</p>
<pre><code class="language-javascript=">const fetcher = (user, page) =&gt;
  // Github API：列出該 user 的公開 repositories
  // user：Github username
  // page：做 pagination (分頁) 用的
  fetch(`https://api.github.com/users/${user}/repos?page=${page}`)
    .then((res) =&gt; res.json())
    .then((data) =&gt; {
      // API 找不到 user 時會回傳 { message: &quot;Not Found&quot; }
      // 所以在這裡判斷 data 是否包含 message
      if (&quot;message&quot; in data) {
        throw new Error(data.message);
      }
      // 全部正常的話，把 data 回傳給 SWR 處理
      return data;
    });
</code></pre>
<h2>Component State</h2>
<p>因為我們發 API 請求時需要給 <code>user</code> 和 <code>page</code> 這兩個 parameters，所以我們的 component 也要存這兩個參數當 state：</p>
<pre><code class="language-javascript=">const [input, setInput] = useState(&quot;&quot;); // input 用的
const [user, setUser] = useState(input); // Github username
const [page, setPage] = useState(1); // 當頁
</code></pre>
<p>在這裡把 <code>input</code> 和 <code>user</code> 拆開是因為不想要使用者每打字的同時發送請求，而是使用者按按鈕時，才會 <code>setUser(input)</code>。</p>
<pre><code class="language-javascript=">const handleClick = () =&gt; {
  setUser(input);
  setPage(1); // 換 user 代表也要從第一頁開始看
};
</code></pre>
<h2><code>useSWR</code></h2>
<p>有了 <code>fetcher</code> function 和需要的參數，我們可以開始寫 <strong>SWR</strong> hook 了！不過我們只想要使用者有輸入 <code>user</code> 的時候才會發送請求，其他時間不要做任何事，而且昨天我們看了 <code>useSWR</code> 只用 string 當 <code>key</code>，那我們今天同時有 <code>user</code> 和 <code>page</code>，怎麼辦？</p>
<pre><code class="language-javascript=">const { data: repos, error } = useSWR(user ? [user, page] : null, fetcher);
</code></pre>
<ul>
<li>一，我們可以用 array (陣列) 當 <code>key</code>，array 裡面也可以放 object (物件)，不過要注意，<strong>SWR</strong> 只做 <strong>shallow compare</strong>，代表 <code>const a = {}; const b = {};</code> 而 <code>a</code> 不等於 <code>b</code>
</li>
<li>二，當我們的 <code>key</code> 依賴其他的參數使得 <code>key</code> 有可能是 <strong>falsy</strong> 的時候，<strong>SWR</strong> 不會發任何請求。所以 <code>user ? [user, page] : null</code>，代表沒有 <code>user</code> 的時候我們不會去呼叫 Github API 喔～</li>
</ul>
<h2>結果</h2>
<p>現在可以開始顯示資料了！</p>
<pre><code class="language-javascript=">// error 時顯示 error message
{error
  ? &quot;User not found&quot;
  // 把每個 repo 用 RepoCard 去顯示～
  : repos?.map((repo) =&gt; &lt;RepoCard key={repo.id} data={repo} /&gt;)}
</code></pre>
<p>我們會看到以下的畫面～</p>
<p><img src="https://i.imgur.com/8E1tWPq.png" alt="Search page" /></p>
<h2>小結</h2>
<p>今天的文章很短，如果有什麼不清楚的歡迎問我喔！使用了 <a href="https://swr.vercel.app">SWR</a>，資料會自動被 cache，只有第一次抓取的時候會需要時間，第二次之後，資料會直接出現，完全不用等的意思ＸＤ<br />
大家可以試試看（<a href="https://day07.vercel.app/search">這裡</a>～)，換頁或重整畫面都不用等！</p>
<p>祝大家週末愉快！</p>
<p><a href="https://day07.vercel.app/search">Live Demo</a></p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://docs.github.com/en/rest">Github API</a>
</li>
<li>
<a href="https://swr.vercel.app/docs/getting-started">SWR Getting Started</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10271427">#09 No-code 之旅 — 怎麼在 Client-side 抓取資料？SWR 簡介</a>
</li>
</ul>


嗨大家！昨天跟大家分享一個 library 叫做 SWR，文章在這裡～ 今天用 SWR 新增了小功能，使用者可以輸入 Github username 然後列出該 user 的所有 public repository，可以在這裡試試看喔。

fetcher Function
像這篇文章提到的，使用 useSWR 時，我們要提供一個 fetcher function 去抓取資料。這 function 要回傳 data，發生錯誤時回 error：
const fetcher = (user, page) =>
  // Github API：列出該 user 的公開 repositories
  // user：Github username
  // page：做 pagination (分頁) 用的
  fetch(`https://api.github.com/users/${user}/repos?page=${page}`)
    .then((res) => res.json())
    .then((data) => {
      // API 找不到 user 時會回傳 { message: "Not Found" }
      // 所以在這裡判斷 data 是否包含 message
      if ("message" in data) {
        throw new Error(data.message);
      }
      // 全部正常的話，把 data 回傳給 SWR 處理
      return data;
    });

Component State
因為我們發 API 請求時需要給 user 和 page 這兩個 parameters，所以我們的 component 也要存這兩個參數當 state：
const [input, setInput] = useState(""); // input 用的
const [user, setUser] = useState(input); // Github username
const [page, setPage] = useState(1); // 當頁

在這裡把 input 和 user 拆開是因為不想要使用者每打字的同時發送請求，而是使用者按按鈕時，才會 setUser(input)。
const handleClick = () => {
  setUser(input);
  setPage(1); // 換 user 代表也要從第一頁開始看
};

useSWR
有了 fetcher function 和需要的參數，我們可以開始寫 SWR hook 了！不過我們只想要使用者有輸入 user 的時候才會發送請求，其他時間不要做任何事，而且昨天我們看了 useSWR 只用 string 當 key，那我們今天同時有 user 和 page，怎麼辦？
const { data: repos, error } = useSWR(user ? [user, page] : null, fetcher);

一，我們可以用 array (陣列) 當 key，array 裡面也可以放 object (物件)，不過要注意，SWR 只做 shallow compare，代表 const a = {}; const b = {}; 而 a 不等於 b

二，當我們的 key 依賴其他的參數使得 key 有可能是 falsy 的時候，SWR 不會發任何請求。所以 user ? [user, page] : null，代表沒有 user 的時候我們不會去呼叫 Github API 喔～
結果
現在可以開始顯示資料了！
// error 時顯示 error message
{error
  ? "User not found"
  // 把每個 repo 用 RepoCard 去顯示～
  : repos?.map((repo) => <RepoCard key={repo.id} data={repo} />)}

我們會看到以下的畫面～

小結
今天的文章很短，如果有什麼不清楚的歡迎問我喔！使用了 SWR，資料會自動被 cache，只有第一次抓取的時候會需要時間，第二次之後，資料會直接出現，完全不用等的意思ＸＤ
這裡～)，換頁或重整畫面都不用等！
祝大家週末愉快！
Live Demo
晚安 <3
看更多
Github API


SWR Getting Started


#09 No-code 之旅 — 怎麼在 Client-side 抓取資料？SWR 簡介

嗨大家！昨天跟大家分享一個 library 叫做 SWR，文章在<a href="https://ithelp.ith...

#10 實作篇 — 使用 SWR 抓取和 Cache 資料

<p>安安！前幾天講了怎麼在<a href="https://ithelp.ithome.com.tw/articles/10270688">專案</a>裡用些 data fetching funct...

<p>安安！前幾天講了怎麼在<a href="https://ithelp.ithome.com.tw/articles/10270688">專案</a>裡用些 data fetching functions 做 pre-rendering。不過如果想要直接在 client-side 抓取資料呢？有什麼方法？～ 今天跟大家分享一個 data fetching (抓取資料) 的 library，<a href="https://swr.vercel.app/">SWR</a>！</p>
<p><img src="https://i.imgur.com/xour6KN.jpg" alt="SWR" /></p>
<h2>什麼是 <a href="https://swr.vercel.app">SWR</a>？</h2>
<p><strong>SWR</strong> 是 <code>stale-while-revalidate</code> 的簡稱，意思是我們抓取資料的時候，會先拿到 cache 裡 (stale / 舊資料) 的，然後在背後去發請求抓取資料 (revalidate)，再回傳最新的資料。<strong>SWR</strong> 是一個提供<strong>抓取資料功能</strong>的 react hooks library，沒錯，他是 react hooks！</p>
<h2>為什麼要用 <a href="https://swr.vercel.app">SWR</a>？</h2>
<p>在 client-side 抓取資料算簡單，可是也必須注意一些事情，例如重複呼叫某 API。有了 <strong>SWR</strong> 之後，我們不用再擔心這件事！<strong>SWR</strong> 幫我們做這些：</p>
<ul>
<li>可重複使用的 react hooks</li>
<li>管理 cache</li>
<li>避免重複發 API 請求</li>
<li>定時抓取資料，讓體驗很像 real-time (即時)</li>
<li>遇到錯誤時，重試發請求</li>
<li>支援 SSG，ISR，SSR</li>
<li>支援 TypeScript</li>
</ul>
<h2>Setup</h2>
<p>很簡單～ 在專案的目錄下，輸入以下指令：</p>
<pre><code class="language-bash=">yarn add swr
# or
npm install swr
</code></pre>
<p>裝完就可以這樣使用：</p>
<pre><code class="language-javascript=">import useSWR from 'swr'

function User() {
  // Github API: https://api.github.com/users/vercel
  const { data, error } = useSWR('https://api.github.com/users/vercel', fetcher)

  if (error) return &lt;div&gt;發生錯誤 :o&lt;/div&gt;
  if (!data) return &lt;div&gt;loading...&lt;/div&gt;
  return &lt;div&gt;Hi {data.name}!&lt;/div&gt; // Hi Vercel!
}
</code></pre>
<p>這裡 <code>useSWR</code> hooks 接收兩個 parameters，<code>key</code> 和 <code>fetcher</code> function。</p>
<ul>
<li>
<p><code>key</code>：<strong>SWR</strong> 會根據這 key 做 cache，通常是請求的 API URL</p>
</li>
<li>
<p><code>fetcher</code>：去做抓取的 function，這 function 接收 <code>key</code> 當 parameter 然後回傳 data (資料)。可以用一般的 <code>fetch</code>，<code>axios</code>，或是 <code>GraphQL</code>，只要可以用 <code>key</code> 去抓取和回傳資料都可以</p>
<pre><code class="language-javascript=">const fetcher = (...args) =&gt; fetch(...args).then(res =&gt; res.json())
</code></pre>
</li>
</ul>
<h3>做成 Reusable Custom Hooks</h3>
<p>上面那段 code 只能抓取 <strong>vercel</strong> 這 Github user 的資料，如果我們想抓其他人的資料呢？要複製貼上嗎？不用～ 我們可以做 React custom hook：</p>
<pre><code class="language-javascript=">function useUser (id) {
  const { data, error } = useSWR(`https://api.github.com/users/${id}`, fetcher)

  return {
    user: data,
    isLoading: !error &amp;&amp; !data,
    isError: error
  }
}
</code></pre>
<p>然後在 React component 裡使用：</p>
<pre><code class="language-javascript=">// Avatar component
function Avatar ({ id }) {
  const { user, isLoading, isError } = useUser(id)

  if (isLoading) return &lt;Spinner /&gt;
  if (isError) return &lt;Error /&gt;
  return &lt;img src={user.avatar_url} alt={user.name} /&gt;
}
</code></pre>
<p>那如果有不只一個 component 需要用到 user 的資料呢？<code>useUser</code> hook 可以在很多 component 裡重複使用喔：</p>
<pre><code class="language-javascript=">// Info component
function Info ({ id }) {
  const { user, isLoading } = useUser(id)
  if (isLoading) return &lt;Spinner /&gt;
  if (isError) return &lt;Error /&gt;
  return &lt;h1&gt;Welcome back, {user.name} (@{user.login})&lt;/h1&gt;
}
</code></pre>
<p>是不是很方便！而且 <strong>SWR</strong> 會自動做 cache 還有避免重複發請求，雖然我們使用了 <code>useUser</code> 兩次，可是實際上我們只發<strong>一次</strong> API request 喔！這麼做可以減少 props 傳遞的動作，每個獨立的 component 自己處理資料～</p>
<h2>同步資料？</h2>
<p>伺服器端或是資料庫裡的資料有可能會變，我們該怎麼拿到最新值？該怎麼跟伺服器做同步？<strong>SWR</strong> 的 revalidation 機制成為答案！有幾個 revalidate 時機：</p>
<ul>
<li>
<strong>focus</strong> 時 (<code>revalidateOnFocus</code>)：這裡的 focus 是指 瀏覽器 tab 的 focus，使用者有沒有正在看該 tab，如果沒有，每次使用者回到這 tab，<strong>SWR</strong> 會做 revalidate (重新抓取資料)，讓使用者看到最新的資料</li>
<li>
<strong>interval</strong> (<code>refreshInterval</code>)：定時去做 revalidate，只要畫面上有用到這些資料，<strong>SWR</strong> 會根據我們設定的 interval 去做資料更新，讓畫面看起來有即時更新</li>
<li>
<strong>reconnect</strong> 時 (<code>revalidateOnReconnect</code>)：使用者有可能會斷線，例如電腦進入睡眠模式，當使用者重新連到網路時，<strong>SWR</strong> 會做 revalidate 更新資料～</li>
<li>永遠不同步 (<code>useSWRImmutable</code>)：以上三種 revalidate 時機會讓資料保持同次的狀態，可是如果資料完全不會變，那何必 revalidate 呢？我們可以把 revalidate 機制關掉，讓 <strong>SWR</strong> 永遠不做資料同步，只抓一次資料！</li>
</ul>
<h2><a href="https://nextjs.org/">Next.js</a> 與 <a href="https://swr.vercel.app">SWR</a></h2>
<p>看起來都很棒，想要開始用在 Next.js 的專案裡，該怎麼用呢？</p>
<h3>Client-side Data Fetching</h3>
<p>其實如果想要在瀏覽器端去抓取資料的話，直接用 <code>useSWR</code> 在 component 裡就可以～ 就像上面的 code 一樣，基本上就是在 React components 裡面使用 <code>useSWR</code> 或是 custom SWR hooks 喔！</p>
<h3>Pre-rendering</h3>
<p>可是 Next.js 又可以做 pre-rendering，例如 SSG 或是 SSR，那還是可以用 <strong>SWR</strong> 嗎？當然可以的！<strong>SWR</strong> 是處理 client-side 的資料抓取方式，我們只要可以在 build time 時拿到資料讓頁面不完全是空的，然後 request time 時在瀏覽器再重新抓取最新資料。之前如果用 <code>getStaticProps</code> 或是 <code>getServerSideProps</code> 時，我們都會把 <code>props</code> 傳到 page (頁面) component 裡。可是用 <strong>SWR</strong> 的方式比較不一樣：</p>
<pre><code class="language-javascript=">// 一樣在 getStaticProps 抓取資料
export async function getStaticProps () {
  const article = await getArticleFromAPI()
  // 要回傳 fallback 的資料！
  return {
    props: {
      fallback: {
        // 這 key 要跟 useSWR 用的 key 一樣喔～
        '/api/article': article
      }
    }
  }
}

// Article component
function Article() {
  // 因為 fallback 有包含 `/api/article` 這 key，
  // data 預設值會是 fallback 裡設定的值
  // 當使用者在瀏覽器看到這畫面時，SWR 會抓取最新料
  const { data } = useSWR('/api/article', fetcher)
  return &lt;h1&gt;{data.title}&lt;/h1&gt;
}

// Page component 收到 getStaticProps 回傳的 props.fallback
export default function Page({ fallback }) {
  // SWRConfig 去做設定，在這裡設定 fallback 值
  return (
    &lt;SWRConfig value={{ fallback }}&gt;
      &lt;Article /&gt;
    &lt;/SWRConfig&gt;
  )
}
</code></pre>
<p>所以產生頁面時會先塞資料進 HTML 檔案，不過當使用者在瀏覽器看到這畫面時，<strong>SWR</strong> 會抓取最新料，更新 HTML 裡原本的內容。</p>
<h2>小結</h2>
<p>如果大家對於 client-side data fetching 有興趣或需求，真的可以去看看 <a href="https://swr.vercel.app">SWR</a>！簡單又方便，還能做 cache，也不用做 props drilling，實在很開心～ 不過我目前也沒有在大專案用過 <strong>SWR</strong>，所以不太清楚會不會不適用在較複雜的專案Ｑ</p>
<p>祝大家週末愉快！</p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://docs.github.com/en/rest">Github API</a>
</li>
<li>
<a href="https://swr.vercel.app/docs/getting-started">SWR Getting Started</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10267249">#03 No-code 之旅 — 什麼是 SSG、SSR、CSR、ISR？</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10267894">#04 No-code 之旅 — Next.js 中的 Pre-render 與 Data Fetching</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10270688">#08 實作篇 — 使用 Next.js 的各種 Data Fetching 方式實作小專案 ft. Github API</a>
</li>
</ul>


安安！前幾天講了怎麼在專案裡用些 data fetching functions 做 pre-rendering。不過如果想要直接在 client-side 抓取資料呢？有什麼方法？～ 今天跟大家分享一個 data fetching (抓取資料) 的 library，SWR！

什麼是 SWR？
SWR 是 stale-while-revalidate 的簡稱，意思是我們抓取資料的時候，會先拿到 cache 裡 (stale / 舊資料) 的，然後在背後去發請求抓取資料 (revalidate)，再回傳最新的資料。SWR 是一個提供抓取資料功能的 react hooks library，沒錯，他是 react hooks！
為什麼要用 SWR？
在 client-side 抓取資料算簡單，可是也必須注意一些事情，例如重複呼叫某 API。有了 SWR 之後，我們不用再擔心這件事！SWR 幫我們做這些：
可重複使用的 react hooks
管理 cache
避免重複發 API 請求
定時抓取資料，讓體驗很像 real-time (即時)
遇到錯誤時，重試發請求
支援 SSG，ISR，SSR
支援 TypeScript
Setup
很簡單～ 在專案的目錄下，輸入以下指令：
yarn add swr
# or
npm install swr

裝完就可以這樣使用：
import useSWR from 'swr'

function User() {
  // Github API: https://api.github.com/users/vercel
  const { data, error } = useSWR('https://api.github.com/users/vercel', fetcher)

  if (error) return <div>發生錯誤 :o</div>
  if (!data) return <div>loading...</div>
  return <div>Hi {data.name}!</div> // Hi Vercel!
}

這裡 useSWR hooks 接收兩個 parameters，key 和 fetcher function。
key：SWR 會根據這 key 做 cache，通常是請求的 API URL
fetcher：去做抓取的 function，這 function 接收 key 當 parameter 然後回傳 data (資料)。可以用一般的 fetch，axios，或是 GraphQL，只要可以用 key 去抓取和回傳資料都可以
const fetcher = (...args) => fetch(...args).then(res => res.json())

做成 Reusable Custom Hooks
上面那段 code 只能抓取 vercel 這 Github user 的資料，如果我們想抓其他人的資料呢？要複製貼上嗎？不用～ 我們可以做 React custom hook：
function useUser (id) {
  const { data, error } = useSWR(`https://api.github.com/users/${id}`, fetcher)

  return {
    user: data,
    isLoading: !error && !data,
    isError: error
  }
}

然後在 React component 裡使用：
// Avatar component
function Avatar ({ id }) {
  const { user, isLoading, isError } = useUser(id)

  if (isLoading) return <Spinner />
  if (isError) return <Error />
  return <img src={user.avatar_url} alt={user.name} />
}

那如果有不只一個 component 需要用到 user 的資料呢？useUser hook 可以在很多 component 裡重複使用喔：
// Info component
function Info ({ id }) {
  const { user, isLoading } = useUser(id)
  if (isLoading) return <Spinner />
  if (isError) return <Error />
  return <h1>Welcome back, {user.name} (@{user.login})</h1>
}

是不是很方便！而且 SWR 會自動做 cache 還有避免重複發請求，雖然我們使用了 useUser 兩次，可是實際上我們只發一次 API request 喔！這麼做可以減少 props 傳遞的動作，每個獨立的 component 自己處理資料～
同步資料？
伺服器端或是資料庫裡的資料有可能會變，我們該怎麼拿到最新值？該怎麼跟伺服器做同步？SWR 的 revalidation 機制成為答案！有幾個 revalidate 時機：
focus 時 (revalidateOnFocus)：這裡的 focus 是指 瀏覽器 tab 的 focus，使用者有沒有正在看該 tab，如果沒有，每次使用者回到這 tab，SWR 會做 revalidate (重新抓取資料)，讓使用者看到最新的資料
interval (refreshInterval)：定時去做 revalidate，只要畫面上有用到這些資料，SWR 會根據我們設定的 interval 去做資料更新，讓畫面看起來有即時更新
reconnect 時 (revalidateOnReconnect)：使用者有可能會斷線，例如電腦進入睡眠模式，當使用者重新連到網路時，SWR 會做 revalidate 更新資料～
永遠不同步 (useSWRImmutable)：以上三種 revalidate 時機會讓資料保持同次的狀態，可是如果資料完全不會變，那何必 revalidate 呢？我們可以把 revalidate 機制關掉，讓 SWR 永遠不做資料同步，只抓一次資料！
Next.js 與 SWR
看起來都很棒，想要開始用在 Next.js 的專案裡，該怎麼用呢？
Client-side Data Fetching
其實如果想要在瀏覽器端去抓取資料的話，直接用 useSWR 在 component 裡就可以～ 就像上面的 code 一樣，基本上就是在 React components 裡面使用 useSWR 或是 custom SWR hooks 喔！
Pre-rendering
可是 Next.js 又可以做 pre-rendering，例如 SSG 或是 SSR，那還是可以用 SWR 嗎？當然可以的！SWR 是處理 client-side 的資料抓取方式，我們只要可以在 build time 時拿到資料讓頁面不完全是空的，然後 request time 時在瀏覽器再重新抓取最新資料。之前如果用 getStaticProps 或是 getServerSideProps 時，我們都會把 props 傳到 page (頁面) component 裡。可是用 SWR 的方式比較不一樣：
// 一樣在 getStaticProps 抓取資料
export async function getStaticProps () {
  const article = await getArticleFromAPI()
  // 要回傳 fallback 的資料！
  return {
    props: {
      fallback: {
        // 這 key 要跟 useSWR 用的 key 一樣喔～
        '/api/article': article
      }
    }
  }
}

// Article component
function Article() {
  // 因為 fallback 有包含 `/api/article` 這 key，
  // data 預設值會是 fallback 裡設定的值
  // 當使用者在瀏覽器看到這畫面時，SWR 會抓取最新料
  const { data } = useSWR('/api/article', fetcher)
  return <h1>{data.title}</h1>
}

// Page component 收到 getStaticProps 回傳的 props.fallback
export default function Page({ fallback }) {
  // SWRConfig 去做設定，在這裡設定 fallback 值
  return (
    <SWRConfig value={{ fallback }}>
      <Article />
    </SWRConfig>
  )
}

所以產生頁面時會先塞資料進 HTML 檔案，不過當使用者在瀏覽器看到這畫面時，SWR 會抓取最新料，更新 HTML 裡原本的內容。
小結
如果大家對於 client-side data fetching 有興趣或需求，真的可以去看看 SWR！簡單又方便，還能做 cache，也不用做 props drilling，實在很開心～ 不過我目前也沒有在大專案用過 SWR，所以不太清楚會不會不適用在較複雜的專案Ｑ
祝大家週末愉快！
晚安 <3
看更多
Github API


SWR Getting Started


#03 No-code 之旅 — 什麼是 SSG、SSR、CSR、ISR？


#04 No-code 之旅 — Next.js 中的 Pre-render 與 Data Fetching


#08 實作篇 — 使用 Next.js 的各種 Data Fetching 方式實作小專案 ft. Github API

安安！前幾天講了怎麼在專案裡用些 data fetching funct...

#09 No-code 之旅 — 怎麼在 Client-side 抓取資料？SWR 簡介

<p>大家好！昨天實作了小小專案，也寫了<a href="https://ithelp.ithome.com.tw/articles/10270175">一篇</a>短短的介紹文，那今天跟大家分享怎麼...

<p>大家好！昨天實作了小小專案，也寫了<a href="https://ithelp.ithome.com.tw/articles/10270175">一篇</a>短短的介紹文，那今天跟大家分享怎麼用 Next.js 的各種 data fetching functions 串 API 抓取資料然後做成一個專案～</p>
<blockquote>
<p>不過設計就這樣隨便做，請見諒Ｑ</p>
</blockquote>
<blockquote>
<p>這專案用 <a href="https://www.radix-ui.com">Radix UI</a> 的 <a href="https://www.radix-ui.com/docs/primitives/overview/introduction">Primitives</a> 和 <a href="https://stitches.dev/">Stitches</a> 做 styling</p>
</blockquote>
<p><img src="https://i.imgur.com/AjccvWo.png" alt="Day07" /></p>
<h2>Features (功能)</h2>
<p>開始之前，先跟大家分享這小專案的所有功能：</p>
<ul>
<li>看 Next.js 的 Github repository info (SSG)</li>
<li>看某 Github user info (ISR)</li>
<li>看某 Github repository info (SSR)</li>
</ul>
<h2><a href="https://ithelp.ithome.com.tw/articles/10266342">Setup</a></h2>
<p>用 Next.js 的 <code>create-next-app</code>，在終端機輸入以下指令建立專案：</p>
<pre><code class="language-bash=">npx create-next-app
# or
yarn create next-app
</code></pre>
<p>跑完上面的指令後進到該專案的資料夾，執行 <code>npm run dev</code> 或 <code>yarn dev</code>，打開瀏覽器瀏覽 <a href="http://localhost:3000"><code>http://localhost:3000</code></a>，應該會看到以下這畫面：</p>
<p><img src="https://i.imgur.com/p2p7ftg.png" alt="Next.js" /></p>
<p>耶～ 恭喜！我們可以開始了！</p>
<h2><code>pages/_app.js</code></h2>
<p>這是什麼？！之前的文章應該沒有提到這檔案呢？Next.js 使用 <code>App</code> 去做每個頁面的初始化，不過我們可以自己做 <strong>custom</strong> <code>App</code> 做客製化。因為每個頁面都會用這 <code>App</code> 被 <strong>initialize</strong>，所以如果我們想加一些<strong>每一頁必須有的 components 或 css</strong>，都可以加在這裡：</p>
<pre><code class="language-javascript=">// imports
import { globalCss } from &quot;@stitches/react&quot;;
import Link from &quot;next/link&quot;;
import { useRouter } from &quot;next/router&quot;;
import { Container } from &quot;../components/container&quot;;

// 加 global CSS styles
const globalStyles = globalCss({
  &quot;html, body&quot;: {
    padding: 0,
    margin: 0,
    fontFamily:
      &quot;'Open Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif&quot;,
  },
  a: { color: &quot;inherit&quot; },
  &quot;*&quot;: { boxSizing: &quot;border-box&quot; },
});

// custom App
function MyApp({ Component, pageProps }) {
  globalStyles();

  const { pathname } = useRouter();

  return (
    &lt;Container&gt;
      &lt;main&gt;
        // 顯示當頁
        &lt;Component {...pageProps} /&gt;
      &lt;/main&gt;
      // 每一頁會有這 footer
      &lt;footer&gt;
        &lt;p&gt;
          // 如果我們不在首頁，讓使用者看到 &quot;Go back to Home&quot;
          {pathname === &quot;/&quot; ? &quot;You are at &quot; : &quot;Go back to &quot;}
          &lt;Link href=&quot;/&quot;&gt;Home&lt;/Link&gt;
        &lt;/p&gt;
      &lt;/footer&gt;
    &lt;/Container&gt;
  );
}

// 記得用 export default 喔！
export default MyApp;
</code></pre>
<h2><code>pages/index.js</code></h2>
<p><img src="https://i.imgur.com/887ufu1.png" alt="Home (首頁)" /><br>先從 <a href="https://day07.vercel.app">Home (首頁)</a> 開始吧！所謂的首頁是我們的 <code>pages/index.js</code> 檔案，因為像<a href="https://ithelp.ithome.com.tw/articles/10268611">這篇</a>提到，<code>pages/index.js</code> 會對應到我們的 <code>/</code> 路徑。在這頁我們完全不用顯示任何資料，也就是我們不需要用到任合 data fetching 的 functions。不過，我們放了一個連結去 <a href="https://day07.vercel.app/next">Next 頁</a> (<code>/next</code>)，用 <code>Link</code> 做的：</p>
<pre><code class="language-xml=">&lt;p&gt;
  See what is &lt;Link href=&quot;/next&quot;&gt;Next&lt;/Link&gt;?
&lt;/p&gt;
</code></pre>
<p>除了連結之外，這頁最重要的功能是 <code>input</code>！上方的 <code>input</code> 可以填 Github <strong>username</strong>，而下方的 <code>input</code> 是填 Github <strong>repository</strong> name。大家可以填填看，會觀察到一件事，按鈕一開始是 <code>disabled</code> 的狀態，代表是不能點的 (或是點了沒有用)，等到有輸入值之後，才能點喔：</p>
<pre><code class="language-javascript=">// component state
const [user, setUser] = useState(&quot;&quot;);
const [repo, setRepo] = useState(&quot;&quot;);
</code></pre>
<pre><code class="language-xml=">// render inputs
&lt;Flex css={{ marginBottom: 12 }}&gt;
  &lt;UserInput value={user} onChange={handleChange(&quot;user&quot;)} /&gt;
  // 當 user 沒有值，按鈕的 disabled 會等於 true
  &lt;Button disabled={!user} onClick={handleClick(&quot;user&quot;)}&gt;
    Go →
  &lt;/Button&gt;
&lt;/Flex&gt;
&lt;Flex css={{ marginBottom: 12 }}&gt;
  &lt;RepoInput value={repo} onChange={handleChange(&quot;repo&quot;)} /&gt;
  // 當 user 或 repo 沒有值，按鈕的 disabled 會等於 true
  &lt;Button disabled={!user || !repo} onClick={handleClick(&quot;repo&quot;)}&gt;
    Go →
  &lt;/Button&gt;
&lt;/Flex&gt;
</code></pre>
<p><code>handleChange</code> 會在每次 <code>input</code> 觸發 <code>change event</code> 被執行，更新對應 <code>state</code> 的值。那 <code>handleClick</code> 是處理按按鈕的事件，我們希望當我們點 <code>UserInput</code> 旁邊的按鈕而且 <code>user</code> state 有值，我們會被導去 <a href="https://day07.vercel.app/users/facebook">User 頁</a>，怎麼導呢？用 <code>useRouter</code> 回傳的 <code>push</code> method：</p>
<pre><code class="language-javascript=">const { push } = useRouter();

const handleClick =
  (type = &quot;user&quot;) =&gt;
  () =&gt; {
    switch (type) {
      case &quot;user&quot;:
        if (user) {
          push({ pathname: &quot;/users/[user]&quot;, query: { user } });
        }
        break;
      case &quot;repo&quot;:
        if (user &amp;&amp; repo) {
          push({ pathname: &quot;/repos/[user]/[repo]&quot;, query: { user, repo } });
        }
        break;
      default:
        break;
    }
  };
</code></pre>
<p><code>RepoInput</code> 旁邊的按鈕需要加一個條件，就是 <code>user</code> 和 <code>repo</code> 都不能是空的，才能導去 <a href="https://day07.vercel.app/repos/facebook/react">Repo 頁</a>～</p>
<h2><code>pages/next.js</code></h2>
<p><img src="https://i.imgur.com/ilwF9Yh.png" alt="Next 頁" /><br><a href="https://day07.vercel.app/next">Next 頁</a>是採用 Static Generation 產生出來的，也就是使用 <code>getStaticProps</code> 去抓取該頁所需的內容。透過 <code>props</code> 去傳遞 <code>data</code>：</p>
<pre><code class="language-javascript=">// 在伺服器端在 build time 執行
export async function getStaticProps() {
  // 抓取 vercel/next.js repository 的資料
  const res = await fetch(&quot;https://api.github.com/repos/vercel/next.js&quot;);
  const data = await res.json();

  // 回傳該 page 所需的 props
  return {
    props: { data },
  };
}
</code></pre>
<p><a href="https://day07.vercel.app/next">Next 頁</a>會收到 <code>props</code> 而裡面包含 <code>data</code>：</p>
<pre><code class="language-javascript=">// 記得把 page component 當 default 的 export 喔！
export default function Next({ data }) {
  // 這裡的 data 就是 getStaticProps 回傳的～
  return &lt;RepoCard data={data} /&gt;;
}
</code></pre>
<h2><code>pages/users/[user].js</code></h2>
<p><img src="https://i.imgur.com/j0X7mqY.png" alt="User 頁" /><br><a href="https://day07.vercel.app/users/facebook">User 頁</a>的路徑是 <code>/users/[user]</code>，<code>user</code> 為動態資訊，也就是使用 <a href="https://nextjs.org/docs/routing/dynamic-routes">dynamic routes</a> 的方法！在這裡我用的是 <code>getStaticProps</code> 和 <code>getStaticPaths</code>，而且還加了 <code>revalidate</code> 和 <code>fallback = 'blocking'</code>，讓頁面會不斷更新也不斷產生 (生成)，所以這頁是採用 Incremental Static Regeneration 的模式：</p>
<pre><code class="language-javascript=">// 抓取該 page 所需的資料
export async function getStaticProps(context) {
  // 跟 Github 拿 user 的資料
  const res = await fetch(
    // context.params.user 就是路徑中的 [user]
    `https://api.github.com/users/${context.params.user}`
  );
  const data = await res.json();

  return {
    props: { data },
    revalidate: 24 * 60 * 60, // 至少 24 小時後伺服器會重新抓取資料而重新生成該頁
  };
}

// 抓取這 dynamic route 該產生的 paths
export async function getStaticPaths() {
  // 抓取 Github 的所有 users
  const res = await fetch(&quot;https://api.github.com/users&quot;);
  const data = await res.json();
  // 因為幾個 user 代表幾個 page，我不想要一次產生這麼多頁面，所以只挑前 1000 名
  const paths = data.slice(0, 1000).map((u) =&gt; ({ params: { user: u.login } }));

  // 回傳該在 build time 被產生的 paths，不在這清單裡的頁面，會採取 &quot;blocking&quot; 方式
  return { paths, fallback: &quot;blocking&quot; };
}
</code></pre>
<p>現在我們來看看<a href="https://day07.vercel.app/users/facebook">User 頁</a>的 component：</p>
<pre><code class="language-javascript=">// 記得把 page component 當 default 的 export
export default function User({ data }) {
  // 當 Github API 回傳 Not Found 錯誤
  if (&quot;message&quot; in data &amp;&amp; data.message === &quot;Not Found&quot;) {
    // 應該要用 Next.js 的 404 page，可是我先坐在這裡Ｑ
    return (
      &lt;Center column&gt;
        &lt;h3&gt;404 Not Found&lt;/h3&gt;
        &lt;p&gt;Try other user&lt;/p&gt;
      &lt;/Center&gt;
    );
  }

  return (
    &lt;&gt;
      &lt;Head&gt;
        &lt;title&gt;{data.name || &quot;A user&quot;} | 2021 iTHome Day 07&lt;/title&gt;
        &lt;meta name=&quot;description&quot; content=&quot;2021 iTHome Day 07 by Jade&quot; /&gt;
        &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
      &lt;/Head&gt;
      &lt;UserCard data={data} /&gt;
    &lt;/&gt;
  );
}
</code></pre>
<h2><code>pages/repos/[user]/[repo].js</code></h2>
<p><img src="https://i.imgur.com/npV552x.png" alt="Repo 頁" /><br><a href="https://day07.vercel.app/repos/facebook/react">Repo 頁</a>的路徑是 <code>/repos/[user]/[repo]</code>，<code>user</code> 和 <code>repo</code> 為動態資訊，一樣是用 dynamic routes，不過這頁是採用 <code>getServerSideProps</code> 實做出來的，也就是 Server-side Rendering：</p>
<pre><code class="language-javascript=">// 在伺服器端每次收到請求時會執行
export async function getServerSideProps(context) {
  const res = await fetch(
   // context.params.user 就是路徑中的 [user]
   // context.params.repo 就是路徑中的 [repo]
   `https://api.github.com/repos/${context.params.user}/${context.params.repo}`
  );
  const data = await res.json();

  return {
    props: { data },
  };
}
</code></pre>
<p><a href="https://day07.vercel.app/repos/facebook/react">Repo 頁</a> component 其實長得跟 <a href="https://day07.vercel.app/users/facebook">User 頁</a> 很像 (很懶Ｑ)，只差在顯示的資料喔：</p>
<pre><code class="language-javascript=">// 記得把 page component 當 default 的 export～
export default function Repo({ data }) {
  // 當 Github API 回傳 Not Found 錯誤
  if (&quot;message&quot; in data &amp;&amp; data.message === &quot;Not Found&quot;) {
    // 應該要用 Next.js 的 404 page，可是我先坐在這裡Ｑ
    return (
      &lt;Center column&gt;
        &lt;h3&gt;404 Not Found&lt;/h3&gt;
        &lt;p&gt;Try other repo or user&lt;/p&gt;
      &lt;/Center&gt;
    );
  }

  return (
    &lt;&gt;
      &lt;Head&gt;
        &lt;title&gt;
          {data.name || &quot;A repo&quot;} by {data.owner.login || &quot;someone&quot;} | 2021
          iTHome Day 07
        &lt;/title&gt;
        &lt;meta name=&quot;description&quot; content=&quot;2021 iTHome Day 07 by Jade&quot; /&gt;
        &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
      &lt;/Head&gt;
      &lt;RepoCard data={data} /&gt;
    &lt;/&gt;
  );
}
</code></pre>
<h2>小結</h2>
<p>哇！寫完了～ 這個小專案應該有用到前幾天學的東東，大家覺得如何呢？有沒有什麼問題？歡迎發問喔～<br>目前還沒有辦法提供完整的 code，不過有任何問題都可以問我！ (希望我回答得出來Ｑ)<br />
祝大家明天上班上課愉快！</p>
<p><a href="https://day07.vercel.app">Live Demo</a></p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://docs.github.com/en/rest">Github API</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10267894">#04 No-code 之旅 — Next.js 中的 Pre-render 與 Data Fetching</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10268611">#05 No-code 之旅 — Next.js 的 Pages 與 Routing</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10270175">#07 簡介篇 — 使用 Next.js 的各種 Data Fetching 方式實作小專案 ft. Github API</a>
</li>
</ul>


大家好！昨天實作了小小專案，也寫了一篇短短的介紹文，那今天跟大家分享怎麼用 Next.js 的各種 data fetching functions 串 API 抓取資料然後做成一個專案～
不過設計就這樣隨便做，請見諒Ｑ
這專案用 Radix UI 的 Primitives 和 Stitches 做 styling

Features (功能)
開始之前，先跟大家分享這小專案的所有功能：
看 Next.js 的 Github repository info (SSG)
看某 Github user info (ISR)
看某 Github repository info (SSR)
Setup
用 Next.js 的 create-next-app，在終端機輸入以下指令建立專案：
npx create-next-app
# or
yarn create next-app

跑完上面的指令後進到該專案的資料夾，執行 npm run dev 或 yarn dev，打開瀏覽器瀏覽 http://localhost:3000，應該會看到以下這畫面：

耶～ 恭喜！我們可以開始了！
pages/_app.js
這是什麼？！之前的文章應該沒有提到這檔案呢？Next.js 使用 App 去做每個頁面的初始化，不過我們可以自己做 custom App 做客製化。因為每個頁面都會用這 App 被 initialize，所以如果我們想加一些每一頁必須有的 components 或 css，都可以加在這裡：
// imports
import { globalCss } from "@stitches/react";
import Link from "next/link";
import { useRouter } from "next/router";
import { Container } from "../components/container";

// 加 global CSS styles
const globalStyles = globalCss({
  "html, body": {
    padding: 0,
    margin: 0,
    fontFamily:
      "'Open Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",
  },
  a: { color: "inherit" },
  "*": { boxSizing: "border-box" },
});

// custom App
function MyApp({ Component, pageProps }) {
  globalStyles();

  const { pathname } = useRouter();

  return (
    <Container>
      <main>
        // 顯示當頁
        <Component {...pageProps} />
      </main>
      // 每一頁會有這 footer
      <footer>
        <p>
          // 如果我們不在首頁，讓使用者看到 "Go back to Home"
          {pathname === "/" ? "You are at " : "Go back to "}
          <Link href="/">Home</Link>
        </p>
      </footer>
    </Container>
  );
}

// 記得用 export default 喔！
export default MyApp;

pages/index.js

先從 Home (首頁) 開始吧！所謂的首頁是我們的 pages/index.js 檔案，因為像這篇提到，pages/index.js 會對應到我們的 / 路徑。在這頁我們完全不用顯示任何資料，也就是我們不需要用到任合 data fetching 的 functions。不過，我們放了一個連結去 Next 頁 (/next)，用 Link 做的：
<p>
  See what is <Link href="/next">Next</Link>?
</p>

除了連結之外，這頁最重要的功能是 input！上方的 input 可以填 Github username，而下方的 input 是填 Github repository name。大家可以填填看，會觀察到一件事，按鈕一開始是 disabled 的狀態，代表是不能點的 (或是點了沒有用)，等到有輸入值之後，才能點喔：
// component state
const [user, setUser] = useState("");
const [repo, setRepo] = useState("");

// render inputs
<Flex css={{ marginBottom: 12 }}>
  <UserInput value={user} onChange={handleChange("user")} />
  // 當 user 沒有值，按鈕的 disabled 會等於 true
  <Button disabled={!user} onClick={handleClick("user")}>
    Go →
  </Button>
</Flex>
<Flex css={{ marginBottom: 12 }}>
  <RepoInput value={repo} onChange={handleChange("repo")} />
  // 當 user 或 repo 沒有值，按鈕的 disabled 會等於 true
  <Button disabled={!user || !repo} onClick={handleClick("repo")}>
    Go →
  </Button>
</Flex>

handleChange 會在每次 input 觸發 change event 被執行，更新對應 state 的值。那 handleClick 是處理按按鈕的事件，我們希望當我們點 UserInput 旁邊的按鈕而且 user state 有值，我們會被導去 User 頁，怎麼導呢？用 useRouter 回傳的 push method：
const { push } = useRouter();

const handleClick =
  (type = "user") =>
  () => {
    switch (type) {
      case "user":
        if (user) {
          push({ pathname: "/users/[user]", query: { user } });
        }
        break;
      case "repo":
        if (user && repo) {
          push({ pathname: "/repos/[user]/[repo]", query: { user, repo } });
        }
        break;
      default:
        break;
    }
  };

RepoInput 旁邊的按鈕需要加一個條件，就是 user 和 repo 都不能是空的，才能導去 Repo 頁～
pages/next.js

Next 頁是採用 Static Generation 產生出來的，也就是使用 getStaticProps 去抓取該頁所需的內容。透過 props 去傳遞 data：
// 在伺服器端在 build time 執行
export async function getStaticProps() {
  // 抓取 vercel/next.js repository 的資料
  const res = await fetch("https://api.github.com/repos/vercel/next.js");
  const data = await res.json();

  // 回傳該 page 所需的 props
  return {
    props: { data },
  };
}

Next 頁會收到 props 而裡面包含 data：
// 記得把 page component 當 default 的 export 喔！
export default function Next({ data }) {
  // 這裡的 data 就是 getStaticProps 回傳的～
  return <RepoCard data={data} />;
}

pages/users/[user].js

User 頁的路徑是 /users/[user]，user 為動態資訊，也就是使用 dynamic routes 的方法！在這裡我用的是 getStaticProps 和 getStaticPaths，而且還加了 revalidate 和 fallback = 'blocking'，讓頁面會不斷更新也不斷產生 (生成)，所以這頁是採用 Incremental Static Regeneration 的模式：
// 抓取該 page 所需的資料
export async function getStaticProps(context) {
  // 跟 Github 拿 user 的資料
  const res = await fetch(
    // context.params.user 就是路徑中的 [user]
    `https://api.github.com/users/${context.params.user}`
  );
  const data = await res.json();

  return {
    props: { data },
    revalidate: 24 * 60 * 60, // 至少 24 小時後伺服器會重新抓取資料而重新生成該頁
  };
}

// 抓取這 dynamic route 該產生的 paths
export async function getStaticPaths() {
  // 抓取 Github 的所有 users
  const res = await fetch("https://api.github.com/users");
  const data = await res.json();
  // 因為幾個 user 代表幾個 page，我不想要一次產生這麼多頁面，所以只挑前 1000 名
  const paths = data.slice(0, 1000).map((u) => ({ params: { user: u.login } }));

  // 回傳該在 build time 被產生的 paths，不在這清單裡的頁面，會採取 "blocking" 方式
  return { paths, fallback: "blocking" };
}

現在我們來看看User 頁的 component：
// 記得把 page component 當 default 的 export
export default function User({ data }) {
  // 當 Github API 回傳 Not Found 錯誤
  if ("message" in data && data.message === "Not Found") {
    // 應該要用 Next.js 的 404 page，可是我先坐在這裡Ｑ
    return (
      <Center column>
        <h3>404 Not Found</h3>
        <p>Try other user</p>
      </Center>
    );
  }

  return (
    <>
      <Head>
        <title>{data.name || "A user"} | 2021 iTHome Day 07</title>
        <meta name="description" content="2021 iTHome Day 07 by Jade" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <UserCard data={data} />
    </>
  );
}

pages/repos/[user]/[repo].js

Repo 頁的路徑是 /repos/[user]/[repo]，user 和 repo 為動態資訊，一樣是用 dynamic routes，不過這頁是採用 getServerSideProps 實做出來的，也就是 Server-side Rendering：
// 在伺服器端每次收到請求時會執行
export async function getServerSideProps(context) {
  const res = await fetch(
   // context.params.user 就是路徑中的 [user]
   // context.params.repo 就是路徑中的 [repo]
   `https://api.github.com/repos/${context.params.user}/${context.params.repo}`
  );
  const data = await res.json();

  return {
    props: { data },
  };
}

Repo 頁 component 其實長得跟 User 頁 很像 (很懶Ｑ)，只差在顯示的資料喔：
// 記得把 page component 當 default 的 export～
export default function Repo({ data }) {
  // 當 Github API 回傳 Not Found 錯誤
  if ("message" in data && data.message === "Not Found") {
    // 應該要用 Next.js 的 404 page，可是我先坐在這裡Ｑ
    return (
      <Center column>
        <h3>404 Not Found</h3>
        <p>Try other repo or user</p>
      </Center>
    );
  }

  return (
    <>
      <Head>
        <title>
          {data.name || "A repo"} by {data.owner.login || "someone"} | 2021
          iTHome Day 07
        </title>
        <meta name="description" content="2021 iTHome Day 07 by Jade" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <RepoCard data={data} />
    </>
  );
}

小結
哇！寫完了～ 這個小專案應該有用到前幾天學的東東，大家覺得如何呢？有沒有什麼問題？歡迎發問喔～
目前還沒有辦法提供完整的 code，不過有任何問題都可以問我！ (希望我回答得出來Ｑ)
Live Demo
晚安 <3
看更多
Github API


#04 No-code 之旅 — Next.js 中的 Pre-render 與 Data Fetching


#05 No-code 之旅 — Next.js 的 Pages 與 Routing


#07 簡介篇 — 使用 Next.js 的各種 Data Fetching 方式實作小專案 ft. Github API

大家好！昨天實作了小小專案，也寫了一篇短短的介紹文，那今天跟大家分享怎麼...

#08 實作篇 — 使用 Next.js 的各種 Data Fetching 方式實作小專案 ft. Github API

<p>看了好幾天的 Next.js 介紹，是不是想要開始做個小專案，試試 Next.js 呢？我今天做了小小 project 使用 Next.js 的各種 data fetching function...

<p>看了好幾天的 Next.js 介紹，是不是想要開始做個小專案，試試 Next.js 呢？我今天做了小小 project 使用 Next.js 的各種 data fetching functions (可以看<a href="https://ithelp.ithome.com.tw/articles/10267894">這篇</a>) 來串 Github API！不過今天不會詳細跟大家分享怎麼實作，明天再繼續～</p>
<h4>不過設計就這樣隨便做，請見諒Ｑ</h4>
<p><img src="https://i.imgur.com/ag7sAC9.png" alt="Day07" /></p>
<h2><a href="https://ithelp.ithome.com.tw/articles/10266342">Setup</a></h2>
<p>用 Next.js 的 <code>create-next-app</code>，在終端機輸入以下指令建立專案：</p>
<pre><code class="language-bash=">npx create-next-app
# or
yarn create next-app
</code></pre>
<h2>Home 首頁</h2>
<p><img src="https://i.imgur.com/dklTavH.png" alt="Day07 Home" /><br>在首頁用 Next.js 的 Link (<code>next/link</code>) 加了兩個連結，一個是回到 Home，另外一個是導去一個叫做 <a href="https://day07.vercel.app/next">Next</a> 的頁面。像<a href="https://ithelp.ithome.com.tw/articles/10268611">這篇</a>提到的，用 Link 換頁是 client-side 的 routing，所以瀏覽器不會看到白畫面喔～</p>
<p>在首頁也加了兩個 <code>input</code>，個別是 Github 的 <code>username</code> 和 <code>repository</code> name。填了 <code>username</code> 之後，旁邊的 <strong>Go</strong> 按鈕會亮起來 (代表可以點下去了！)，一點下去我們會被導去 <a href="https://day07.vercel.app/users/vercel">User</a> 頁面。下面的 <code>input</code> 是給 <code>repository</code> 用的，如果想看某個 <code>repo</code>，需要 <code>username</code> 和 <code>repository</code> 兩個都填完，旁邊的按鈕才能點，幫我們導頁去 <a href="https://day07.vercel.app/repos/facebook/react">Repo</a> 頁面。</p>
<p><img src="https://i.imgur.com/F2kL2VK.png" alt="Day07 User &amp;amp; Repo" /><br>左邊是 <strong>Repo</strong> 頁，右邊是 <strong>User</strong> 頁</p>
<h2>Next 頁</h2>
<p>Next 頁面是採用 Static Generation 產生出來的，也就是使用 <code>getStaticProps</code> 去抓取該頁所需的內容。透過 <code>props</code> 去傳遞 <code>data</code>：</p>
<pre><code class="language-javascript=">export async function getStaticProps() {
  const res = await fetch(&quot;https://api.github.com/repos/vercel/next.js&quot;);
  const data = await res.json();

  return {
    props: { data },
  };
}
</code></pre>
<h2>User 頁</h2>
<p>User 頁的路徑是 <code>/users/[user]</code>，<code>user</code> 為動態資訊，也就是使用 <a href="https://nextjs.org/docs/routing/dynamic-routes">dynamic routes</a> 的方法！今天我用的是 <code>getStaticProps</code> 和 <code>getStaticPaths</code>，而且還加了 <code>revalidate</code>，讓頁面會不斷更新，所以這頁是採用 Incremental Static Regeneration 的模式：</p>
<pre><code class="language-javascript=">export async function getStaticProps(context) {
  const res = await fetch(
    `https://api.github.com/users/${context.params.user}`
  );
  const data = await res.json();

  return {
    props: { data },
    revalidate: 24 * 60 * 60, // 24 hours
  };
}

export async function getStaticPaths() {
  const res = await fetch(&quot;https://api.github.com/users&quot;);
  const data = await res.json();
  const paths = data.slice(0, 1000).map((u) =&gt; ({ params: { user: u.login } }));

  return { paths, fallback: &quot;blocking&quot; };
}
</code></pre>
<h4>明天再詳細解釋喔～ (<a href="https://ithelp.ithome.com.tw/articles/10270688">來了！</a>)</h4>
<h2>Repo 頁</h2>
<p>Repo 頁的路徑是 <code>/repos/[user]/[repo]</code>，<code>user</code> 和 <code>repo</code> 為動態資訊，一樣是用 dynamic routes，不過這頁是採用 <code>getServerSideProps</code> 實做出來的，也就是 Server-side Rendering：</p>
<pre><code class="language-javascript=">export async function getServerSideProps(context) {
  const res = await fetch(
    `https://api.github.com/repos/${context.params.user}/${context.params.repo}`
  );
  const data = await res.json();

  return {
    props: { data },
  };
}
</code></pre>
<h2>小結</h2>
<p>今天這個小專案應該有用到前幾天學的東東，大家覺得如何呢？有沒有什麼問題？歡迎發問喔～<br>祝大家明天上班上課愉快！</p>
<p><a href="https://day07.vercel.app">Live Demo</a></p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://docs.github.com/en/rest">Github API</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10267894">#04 No-code 之旅 — Next.js 中的 Pre-render 與 Data Fetching</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10268611">#05 No-code 之旅 — Next.js 的 Pages 與 Routing</a>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10270688">#08 實作篇 — 使用 Next.js 的各種 Data Fetching 方式實作小專案 ft. Github API</a>
</li>
</ul>


看了好幾天的 Next.js 介紹，是不是想要開始做個小專案，試試 Next.js 呢？我今天做了小小 project 使用 Next.js 的各種 data fetching functions (可以看這篇) 來串 Github API！不過今天不會詳細跟大家分享怎麼實作，明天再繼續～
不過設計就這樣隨便做，請見諒Ｑ

Setup
用 Next.js 的 create-next-app，在終端機輸入以下指令建立專案：
npx create-next-app
# or
yarn create next-app

Home 首頁

在首頁用 Next.js 的 Link (next/link) 加了兩個連結，一個是回到 Home，另外一個是導去一個叫做 Next 的頁面。像這篇提到的，用 Link 換頁是 client-side 的 routing，所以瀏覽器不會看到白畫面喔～
在首頁也加了兩個 input，個別是 Github 的 username 和 repository name。填了 username 之後，旁邊的 Go 按鈕會亮起來 (代表可以點下去了！)，一點下去我們會被導去 User 頁面。下面的 input 是給 repository 用的，如果想看某個 repo，需要 username 和 repository 兩個都填完，旁邊的按鈕才能點，幫我們導頁去 Repo 頁面。

左邊是 Repo 頁，右邊是 User 頁
Next 頁
Next 頁面是採用 Static Generation 產生出來的，也就是使用 getStaticProps 去抓取該頁所需的內容。透過 props 去傳遞 data：
export async function getStaticProps() {
  const res = await fetch("https://api.github.com/repos/vercel/next.js");
  const data = await res.json();

  return {
    props: { data },
  };
}

User 頁
User 頁的路徑是 /users/[user]，user 為動態資訊，也就是使用 dynamic routes 的方法！今天我用的是 getStaticProps 和 getStaticPaths，而且還加了 revalidate，讓頁面會不斷更新，所以這頁是採用 Incremental Static Regeneration 的模式：
export async function getStaticProps(context) {
  const res = await fetch(
    `https://api.github.com/users/${context.params.user}`
  );
  const data = await res.json();

  return {
    props: { data },
    revalidate: 24 * 60 * 60, // 24 hours
  };
}

export async function getStaticPaths() {
  const res = await fetch("https://api.github.com/users");
  const data = await res.json();
  const paths = data.slice(0, 1000).map((u) => ({ params: { user: u.login } }));

  return { paths, fallback: "blocking" };
}

明天再詳細解釋喔～ (來了！)
Repo 頁
Repo 頁的路徑是 /repos/[user]/[repo]，user 和 repo 為動態資訊，一樣是用 dynamic routes，不過這頁是採用 getServerSideProps 實做出來的，也就是 Server-side Rendering：
export async function getServerSideProps(context) {
  const res = await fetch(
    `https://api.github.com/repos/${context.params.user}/${context.params.repo}`
  );
  const data = await res.json();

  return {
    props: { data },
  };
}

小結
今天這個小專案應該有用到前幾天學的東東，大家覺得如何呢？有沒有什麼問題？歡迎發問喔～
祝大家明天上班上課愉快！
Live Demo
晚安 <3
看更多
Github API


#04 No-code 之旅 — Next.js 中的 Pre-render 與 Data Fetching


#05 No-code 之旅 — Next.js 的 Pages 與 Routing


#08 實作篇 — 使用 Next.js 的各種 Data Fetching 方式實作小專案 ft. Github API

看了好幾天的 Next.js 介紹，是不是想要開始做個小專案，試試 Next.js 呢？我今天做了小小 project 使用 Next.js 的各種 data fetching function...

#07 簡介篇 — 使用 Next.js 的各種 Data Fetching 方式實作小專案 ft. Github API

<p>連假最後一天！分享了一些關於 Next.js 這個框架，雖然他是 React 的框架，可是你們知道嗎？Next.js 也可以同時實作後端喔！沒錯，前後端全包～ 怎麼做呢？今天來看看 Next.j...

<p>連假最後一天！分享了一些關於 Next.js 這個框架，雖然他是 React 的框架，可是你們知道嗎？Next.js 也可以同時實作後端喔！沒錯，前後端全包～ 怎麼做呢？今天來看看 Next.js 的 API Routes，看完應該會有想法怎麼實作，不過看這篇文章之前，可以先看看<a href="https://ithelp.ithome.com.tw/articles/10268611">上一篇</a>關於 Next.js 的 routing 喔！</p>
<p><img src="https://i.imgur.com/5waIBr3.png" alt="Next.js API Routes" /></p>
<h2><a href="https://nextjs.org/docs/api-routes/introduction">API Routes</a></h2>
<p>Next.js 的 API routes 也採用 file-based routing，意思是每個檔案代表一個 route，而檔案名稱 (file name) 會變成 route 的 path name (路徑名稱)。Next.js 會把 <code>pages/api</code> <strong>資料夾 / 目錄</strong>裡面的所有檔案看成 route (路徑) 的一部分：</p>
<ul>
<li>
<code>pages/api/index.js</code> 代表 <code>/</code> API route</li>
<li>
<code>pages/api/user.js</code> 代表 <code>/user</code> API route</li>
</ul>
<p>API routes 裡的所有程式碼是屬於後端的部分，所以只會跑在伺服器端。這代表我們寫的 API 不會讓我們前端的 bundle size 變大，不會影響網頁的下載時間！也是因為是跑在伺服器端，我們可以實作各種後端的功能，例如操作資料庫～</p>
<p>每個 <code>pages/api</code> 裡的檔案需要 <strong>export</strong> 一個 <strong>default</strong> function (函式) 作為 API 的 <strong>request handler</strong> (處理請求的函式)，然後每個 handler 會有兩個 parameters：</p>
<ul>
<li>
<code>req</code>：request 物件，是一種 <a href="https://nodejs.org/api/http.html#http_class_http_incomingmessage">http.IncomingMessage</a>，還有包含一些<strong>內建的</strong> <a href="https://nextjs.org/docs/api-routes/api-middlewares">middlewares</a>
</li>
<li>
<code>res</code>：response 物件，是個 <a href="https://nodejs.org/api/http.html#http_class_http_serverresponse">http.ServerResponse</a>，加上一些 <a href="https://nextjs.org/docs/api-routes/response-helpers">helper functions</a>
</li>
</ul>
<h2>Dynamic (動態) API routes</h2>
<p>像 Next.js 的 routing 一樣，API routes 也支援 dynamic (動態) routing。如果我們對 <code>pages/api/posts/[pid]/comments/[cid].js</code> 路徑發個 <code>/api/posts/world/comments/hello</code> 的請求：</p>
<pre><code class="language-javascript=">export default function handler(req, res) {
  const { pid, cid } = req.query
  res.end(`Comment #${cid} for post #${pid}`)
}
</code></pre>
<p>上面的 API 會回傳 <code>Comment #hello for post #world</code>。</p>
<h3>Index API routes</h3>
<p>每個 index 檔案代表根目錄，所以</p>
<ul>
<li>
<code>pages/api/posts.js</code> 代表 <code>/api/posts</code> API route</li>
<li>
<code>pages/api/posts/index.js</code> 也代表 <code>/api/posts</code> API route</li>
</ul>
<blockquote>
<p>注意：<code>pages/api/posts/[pid].js</code> 並不代表 <code>/api/posts</code> 只代表 <code>/api/posts/1</code>，<code>/api/posts/2</code> 等</p>
</blockquote>
<h3>Catch all API routes</h3>
<p>屬於 dynamic API routes 的一種，不過 catch all 的意思是不需要一個一個定義<strong>動態</strong>的部分，把所有動態的資訊抓起來，讓 route 比較彈性，寫法跟<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/rest_parameters">其餘參數</a>（rest parameter）一樣。</p>
<ul>
<li>
<code>pages/api/posts/[...slug].js</code> 可以代表 <code>/api/posts/a</code> 也可以是 <code>/api/posts/a/b</code>，<code>/api/posts/a/b/c</code> 等</li>
</ul>
<p><code>slug</code> 可以是 <code>param</code> 或是其他東西都可以，這些動態資訊也會出現在 <code>query</code> 物件裡面，例如 <code>/api/posts/a/b/c</code> 的 <code>query</code> 會是：</p>
<pre><code class="language-javascript=">{ &quot;slug&quot;: [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;] }
</code></pre>
<h3>Optional catch all routes</h3>
<p>跟 pages 的 optional catch all routes 一樣，只要把 catch all 的 <code>[...slug]</code> 改成 <code>[[...slug]]</code> 就會變成 <strong>optional</strong> catch all。意思是 <code>slug</code> 這個 array (陣列) 可以是不存在的，</p>
<ul>
<li>
<code>pages/posts/[[...slug]].js</code> 可以代表 <code>/posts/a</code> 也可以是 <code>/posts/a/b</code>，<code>/posts/a/b/c</code> 等，不過也可以代表 <code>/posts</code>
</li>
</ul>
<p>所以當我們發請求到 <code>/api/posts</code>，<code>query</code> 物件會是空物件</p>
<pre><code class="language-javascript=">{ } // GET `/api/post` (空物件)
{ &quot;slug&quot;: [&quot;a&quot;] } // `GET /api/post/a`
{ &quot;slug&quot;: [&quot;a&quot;, &quot;b&quot;] } // `GET /api/post/a/b`
</code></pre>
<h2>API Middlewares</h2>
<p>Next.js 有提供內建的 middlewares 塞進去 <code>req</code> 物件裡，除了內建的之外，我們還可以用其他 <a href="https://github.com/senchalabs/connect">Connect</a> / Express 相容的 middlewares。</p>
<h3>Built-in (內建) middlewares</h3>
<ul>
<li>
<p><code>req.cookies</code>：請求的 cookies，預設為 <code>{}</code></p>
</li>
<li>
<p><code>req.query</code>：請求的 <a href="https://en.wikipedia.org/wiki/Query_string">query string</a>，預設為 <code>{}</code></p>
</li>
<li>
<p><code>req.body</code>：已經被 parse 的請求 body，會根據 <code>content-type</code> 做 parse，當沒有 body 時會回傳 <code>null</code>。如果不想要 body 被 parse，可以在 API route 檔案裡加 <code>config</code>：</p>
<pre><code class="language-javascript=">export const config = {
  api: {
    bodyParser: false,
  },
}
</code></pre>
</li>
</ul>
<p>除了 body parser 的 config 以外，還有更多 API 相關的 config 可以看<a href="https://nextjs.org/docs/api-routes/api-middlewares#custom-config">這裡</a>喔～</p>
<h3><a href="https://github.com/senchalabs/connect">Connect</a> / Express 相容的 middlewares</h3>
<p>想要在我們的 API routes 增加其他 middlewares 也可以！直接在 handler function 裡執行該 middleware 再繼續跑 API 本身的 code，像：</p>
<pre><code class="language-javascript=">import Cors from 'cors'

// initialize cors middleware
const cors = Cors({
  methods: ['GET', 'HEAD'],
})

// helper method 去執行 middleware，結束後才繼續跑下去
// 發生錯誤時跳 error
function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) =&gt; {
    // fn 為 middleware
    fn(req, res, (result) =&gt; {
      if (result instanceof Error) {
        return reject(result)
      }

      return resolve(result)
    })
  })
}

async function handler(req, res) {
  // 先跑 middleware
  await runMiddleware(req, res, cors)

  // API 本身的邏輯
  res.json({ message: 'Hello Everyone!' })
}

export default handler
</code></pre>
<p><a href="https://nextjs.org/docs/api-routes/api-middlewares#connectexpress-middleware-support">官方 docs 在這裡</a>～</p>
<h2>Response Helper</h2>
<p>雖然 API routes 不是 <a href="https://expressjs.com/">Express.js</a>，可是 Next.js 有提供一些類似的 helper functions 來幫助我們開發而提升 DX (開發者體驗)：</p>
<ul>
<li>
<code>res.status(code)</code>：設定 response 的 status code (要符合 <a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">HTTP status code</a>)</li>
<li>
<code>res.json(body)</code>：回傳 JSON 為 response 給瀏覽器 (客戶端)</li>
<li>
<code>res.send(body)</code>：回傳 HTTP response，body 可以是 <code>string</code>，<code>object</code>，或是 <code>Buffer</code>
</li>
<li>
<code>res.redirect([status,] path)</code>：導頁，把瀏覽器導到別 path 或 URL，<code>status</code> 是 HTTP status code，是個非必須的 parameter，預設為 <code>307</code> (<code>Temporary redirect</code>).</li>
</ul>
<h2>小結</h2>
<p>我們看完 API routes 之後，可以開始做一些全端專案了（誤<br />
大家會想用 API routes 做哪些事呢？有了這個真的讓前後端開發簡單一些～<br />
祝大家明天上班上課愉快！</p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>Next.js API Routes
<ul>
<li>
<a href="https://nextjs.org/docs/api-routes/introduction">Introduction</a>
</li>
<li>
<a href="https://nextjs.org/docs/api-routes/dynamic-api-routes">Dynamic API Routes</a>
</li>
<li>
<a href="https://nextjs.org/docs/api-routes/api-middlewares">API Middlewares</a>
</li>
<li>
<a href="https://nextjs.org/docs/api-routes/response-helpers">Response Helpers</a>
</li>
</ul>
</li>
<li>
<a href="https://ithelp.ithome.com.tw/articles/10268611">#05 No-code 之旅 — Next.js 的 Pages 與 Routing</a>
</li>
</ul>


連假最後一天！分享了一些關於 Next.js 這個框架，雖然他是 React 的框架，可是你們知道嗎？Next.js 也可以同時實作後端喔！沒錯，前後端全包～ 怎麼做呢？今天來看看 Next.js 的 API Routes，看完應該會有想法怎麼實作，不過看這篇文章之前，可以先看看上一篇關於 Next.js 的 routing 喔！

API Routes
Next.js 的 API routes 也採用 file-based routing，意思是每個檔案代表一個 route，而檔案名稱 (file name) 會變成 route 的 path name (路徑名稱)。Next.js 會把 pages/api 資料夾 / 目錄裡面的所有檔案看成 route (路徑) 的一部分：
pages/api/index.js 代表 / API route
pages/api/user.js 代表 /user API route
API routes 裡的所有程式碼是屬於後端的部分，所以只會跑在伺服器端。這代表我們寫的 API 不會讓我們前端的 bundle size 變大，不會影響網頁的下載時間！也是因為是跑在伺服器端，我們可以實作各種後端的功能，例如操作資料庫～
每個 pages/api 裡的檔案需要 export 一個 default function (函式) 作為 API 的 request handler (處理請求的函式)，然後每個 handler 會有兩個 parameters：
req：request 物件，是一種 http.IncomingMessage，還有包含一些內建的 middlewares


res：response 物件，是個 http.ServerResponse，加上一些 helper functions


Dynamic (動態) API routes
像 Next.js 的 routing 一樣，API routes 也支援 dynamic (動態) routing。如果我們對 pages/api/posts/[pid]/comments/[cid].js 路徑發個 /api/posts/world/comments/hello 的請求：
export default function handler(req, res) {
  const { pid, cid } = req.query
  res.end(`Comment #${cid} for post #${pid}`)
}

上面的 API 會回傳 Comment #hello for post #world。
Index API routes
每個 index 檔案代表根目錄，所以
pages/api/posts.js 代表 /api/posts API route
pages/api/posts/index.js 也代表 /api/posts API route
注意：pages/api/posts/[pid].js 並不代表 /api/posts 只代表 /api/posts/1，/api/posts/2 等
Catch all API routes
屬於 dynamic API routes 的一種，不過 catch all 的意思是不需要一個一個定義動態的部分，把所有動態的資訊抓起來，讓 route 比較彈性，寫法跟其餘參數（rest parameter）一樣。
pages/api/posts/[...slug].js 可以代表 /api/posts/a 也可以是 /api/posts/a/b，/api/posts/a/b/c 等
slug 可以是 param 或是其他東西都可以，這些動態資訊也會出現在 query 物件裡面，例如 /api/posts/a/b/c 的 query 會是：
{ "slug": ["a", "b", "c"] }

Optional catch all routes
跟 pages 的 optional catch all routes 一樣，只要把 catch all 的 [...slug] 改成 [[...slug]] 就會變成 optional catch all。意思是 slug 這個 array (陣列) 可以是不存在的，
pages/posts/[[...slug]].js 可以代表 /posts/a 也可以是 /posts/a/b，/posts/a/b/c 等，不過也可以代表 /posts


所以當我們發請求到 /api/posts，query 物件會是空物件
{ } // GET `/api/post` (空物件)
{ "slug": ["a"] } // `GET /api/post/a`
{ "slug": ["a", "b"] } // `GET /api/post/a/b`

API Middlewares
Next.js 有提供內建的 middlewares 塞進去 req 物件裡，除了內建的之外，我們還可以用其他 Connect / Express 相容的 middlewares。
Built-in (內建) middlewares
req.cookies：請求的 cookies，預設為 {}
req.query：請求的 query string，預設為 {}
req.body：已經被 parse 的請求 body，會根據 content-type 做 parse，當沒有 body 時會回傳 null。如果不想要 body 被 parse，可以在 API route 檔案裡加 config：
export const config = {
  api: {
    bodyParser: false,
  },
}

除了 body parser 的 config 以外，還有更多 API 相關的 config 可以看這裡喔～
Connect / Express 相容的 middlewares
想要在我們的 API routes 增加其他 middlewares 也可以！直接在 handler function 裡執行該 middleware 再繼續跑 API 本身的 code，像：
import Cors from 'cors'

// initialize cors middleware
const cors = Cors({
  methods: ['GET', 'HEAD'],
})

// helper method 去執行 middleware，結束後才繼續跑下去
// 發生錯誤時跳 error
function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) => {
    // fn 為 middleware
    fn(req, res, (result) => {
      if (result instanceof Error) {
        return reject(result)
      }

      return resolve(result)
    })
  })
}

async function handler(req, res) {
  // 先跑 middleware
  await runMiddleware(req, res, cors)

  // API 本身的邏輯
  res.json({ message: 'Hello Everyone!' })
}

export default handler

官方 docs 在這裡～
Response Helper
雖然 API routes 不是 Express.js，可是 Next.js 有提供一些類似的 helper functions 來幫助我們開發而提升 DX (開發者體驗)：
res.status(code)：設定 response 的 status code (要符合 HTTP status code)
res.json(body)：回傳 JSON 為 response 給瀏覽器 (客戶端)
res.send(body)：回傳 HTTP response，body 可以是 string，object，或是 Buffer


res.redirect([status,] path)：導頁，把瀏覽器導到別 path 或 URL，status 是 HTTP status code，是個非必須的 parameter，預設為 307 (Temporary redirect).
小結
我們看完 API routes 之後，可以開始做一些全端專案了（誤
晚安 <3
看更多
Next.js API Routes


Introduction


Dynamic API Routes


API Middlewares


Response Helpers




#05 No-code 之旅 — Next.js 的 Pages 與 Routing

連假最後一天！分享了一些關於 Next.js 這個框架，雖然他是 React 的框架，可是你們知道嗎？Next.js 也可以同時實作後端喔！沒錯，前後端全包～ 怎麼做呢？今天來看看 Next.j...

#06 No-code 之旅 — 用 Next.js 解決前後端？API Routes 簡介

<p>嗨嗨嗨！昨天看完怎麼抓取資料的方式會影響到網頁的渲染模式之後，今天的主題是 Next.js 的 Pages 與 Routing。Next.js 的 routing 方式跟一般 React 使用的...

<p>嗨嗨嗨！昨天看完怎麼抓取資料的方式會影響到網頁的渲染模式之後，今天的主題是 Next.js 的 Pages 與 Routing。Next.js 的 routing 方式跟一般 React 使用的 <code>react-router</code> 不一樣，它採用 <a href="https://nextjs.org/docs/routing/introduction">file-based routing</a>。</p>
<p><img src="https://i.imgur.com/BTC5GgD.png" alt="Next.js Pages &amp;amp; Routing" /></p>
<h2><a href="https://nextjs.org/docs/routing/introduction">File-based Routing</a></h2>
<p>File-based routing 的意思是每個檔案代表一個 route，而檔案名稱 (file name) 會變成 route 的 path name (路徑名稱)。Next.js 會把 <code>pages</code> <strong>資料夾 / 目錄</strong>裡面的所有檔案看成 route (路徑) 的一部分，還不是很懂嗎？我們看看下面的例子～</p>
<ul>
<li>
<code>pages/index.js</code> 代表 <code>/</code> route</li>
<li>
<code>pages/about.js</code> 代表 <code>/about</code> route</li>
</ul>
<h3>Index routes</h3>
<p>每個 index 檔案代表根目錄，所以</p>
<ul>
<li>
<code>pages/index.js</code> 代表 <code>/</code> route</li>
<li>
<code>pages/posts/index.js</code> 代表 <code>/posts</code> route</li>
</ul>
<h3>Nested (巢狀) routes</h3>
<p>每一層資料夾每一層目錄會是 route 的一部分，所以</p>
<ul>
<li>
<code>pages/posts/index.js</code> 代表 <code>/posts</code> route</li>
<li>
<code>pages/posts/first.js</code> 代表 <code>/posts/first</code> route</li>
<li>
<code>pages/categories/lifestyle/fashion.js</code> 代表 <code>/categories/lifestyle/fashion</code> route</li>
</ul>
<h3>Dynamic (動態) routes</h3>
<p>如果上面的 routes 都要我們自己定義每一個 file name 當 path name，那當我們有一系列的頁面怎麼辦？或是如果我們想要把資料庫裡的每一條資料寫個頁面怎麼辦？或是像iT邦幫忙的網址 <a href="https://ithelp.ithome.com.tw/users/20141378"><code>https://ithelp.ithome.com.tw/users/20141378</code></a> 應該不會是我們要新增 20141378 個頁面檔案吧？這時候我們需要 dynamic routes 來幫助我們！</p>
<ul>
<li>
<code>pages/posts/[pid]/index.js</code> 代表 <code>/posts/1</code>，<code>/posts/2</code>，···</li>
<li>
<code>pages/posts/[pid]/comments/index.js</code> 代表 <code>/posts/1/comments</code>，<code>/posts/2/comments</code>，···</li>
<li>
<code>pages/posts/[pid]/comments/[cid].js</code> 代表 <code>/posts/1/comments/1-1</code>，<code>/posts/2/comments/2-1</code>，···</li>
</ul>
<p>或是iT邦幫忙的網址 <code>https://ithelp.ithome.com.tw/users/20141378</code> 需要一個檔案 <code>pages/users/[uid].js</code>。這些動態的資訊可以在 <code>route.query</code> 物件裡面看到，<code>/posts/a/comments/a-1?utm_source=ithome</code> 的 <code>query</code> 物件會長這樣：</p>
<pre><code class="language-javascript=">{ &quot;pid&quot;: &quot;a&quot;, &quot;cid&quot;: &quot;a-1&quot;, &quot;utm_source&quot;: &quot;ithome&quot; }
</code></pre>
<h3>Catch all routes</h3>
<p>屬於 dynamic routes 的一種，不過 catch all 的意思是不需要一個一個定義<strong>動態</strong>的部分，把所有動態的資訊抓起來，讓 route 比較彈性，寫法跟<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/rest_parameters">其餘參數</a>（rest parameter）一樣。</p>
<ul>
<li>
<code>pages/posts/[...slug].js</code> 可以代表 <code>/posts/a</code> 也可以是 <code>/posts/a/b</code>，<code>/posts/a/b/c</code> 等</li>
</ul>
<p><code>slug</code> 可以是 <code>param</code> 或是其他東西都可以，這些動態資訊也會出現在 <code>query</code> 物件裡面，例如 <code>/posts/a/b/c</code> 的 <code>query</code> 會是：</p>
<pre><code class="language-javascript=">{ &quot;slug&quot;: [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;] }
</code></pre>
<h3>Optional catch all routes</h3>
<p>知道了 catch all routes 之後，還有另一種更有彈性的 dynamic routes，只要把 catch all 的 <code>[...slug]</code> 改成 <code>[[...slug]]</code> 就會變成 <strong>optional</strong> catch all。意思是 <code>slug</code> 這個 array (陣列) 可以是不存在的，</p>
<ul>
<li>
<code>pages/posts/[[...slug]].js</code> 可以代表 <code>/posts/a</code> 也可以是 <code>/posts/a/b</code>，<code>/posts/a/b/c</code> 等，不過也可以代表 <code>/posts</code>
</li>
</ul>
<p>所以 <code>query</code> 物件會是空物件 <code>{}</code>。</p>
<blockquote>
<p>注意：<code>query</code> 在 static (靜態) 頁面在第一次渲染的時候不會有東西，就是一個空物件 <code>{}</code>，等到 <a href="https://en.wikipedia.org/wiki/Hydration_(web_development)">hydration</a> 完成之後，<code>query</code> 才會被更新</p>
</blockquote>
<p>繼續到下一個章節之前，我們複習一下～<br><img src="https://i.imgur.com/BTC5GgD.png" alt="Next.js Pages &amp;amp; Routing" /></p>
<h2>Client-side Routing</h2>
<p>雖然 routing 方式不太一樣，不過 Next.js 還是跟 SPA (Single-page Application) 一樣可以做 client-side routing，意思是換頁的時候瀏覽器不用重新 reload，使得整個體驗非常順。Next.js 提供兩種方法：</p>
<ul>
<li>
<code>&lt;Link&gt;</code> (<code>next/link</code>)</li>
<li>
<code>useRouter</code> (<code>next/router</code>)</li>
</ul>
<h3></h3>
<p><code>next/link</code> 提供 <code>Link</code> component 可以直接用在我們的 react components 裡面，跟 <code>react-router-dom</code> 裡的 <code>Link</code> 差不多的用法。當我們想要在畫面上顯示一個<strong>連結</strong>的時候，可以用 <code>Link</code>，他底層用 HTML 的 <code>a</code> 實作出來的。比較特別的是，當使用者<strong>畫面上</strong>有顯示 <code>&lt;Link /&gt;</code> components， Next.js 會把所有採用 SSG / ISR 的頁面先做 prefetch (事先抓取) 這些頁面的檔案與資料，所以當使用者點下其中一個連結，瀏覽器可以馬上顯示新的畫面不需要等待，提升使用者換頁的體驗。想要用 <code>Link</code> 有幾種方法：</p>
<h4>連去 Static Paths</h4>
<pre><code class="language-javascript=">import Link from &quot;next/link&quot;

function Home() {
  return (
    &lt;div&gt;
      &lt;Link href=&quot;/&quot;&gt;
        &lt;a&gt;Home&lt;/a&gt;
      &lt;/Link&gt;
      &lt;Link href=&quot;/about&quot;&gt;
        &lt;a&gt;About&lt;/a&gt;
      &lt;/Link&gt;
    &lt;/div&gt;
  )
}

export default Home
</code></pre>
<p>用 <code>string</code> (字串) 當 <code>href</code>，<code>&quot;/&quot;</code> 會連到 <code>pages/index.js</code> 的檔案，然後 <code>&quot;/about&quot;</code> 會連到 <code>&quot;pages/about.js&quot;</code> 檔案。</p>
<h4>連去 Dynamic Paths</h4>
<pre><code class="language-javascript=">import Link from &quot;next/link&quot;

function Posts({ posts }) {
  return (
    &lt;div&gt;
      {posts.map(post =&gt; (
        &lt;Link href={`/posts/${post.id}?utm_source=ithome`}&gt;
          &lt;a&gt;Post #{post.id}&lt;/a&gt;
        &lt;/Link&gt;
      ))}
    &lt;/div&gt;
  )
}

export default Posts
</code></pre>
<p>想要導頁去 dynamic routes 一樣可以把 path 組成 <code>string</code> 給 <code>href</code>，例如 <code>/posts/${post.id}</code> 然後 <code>post.id</code> 是動態的。或是可以把 path 拆成 object (物件) 給 <code>href</code>，像這樣～</p>
<pre><code class="language-javascript=">{
  pathname: &quot;/posts/[pid]&quot;, // 跟 file name 一樣
  query: { pid: post.id }, // path 中動態的部分，在這例子是 pid
}
</code></pre>
<p><code>query</code> 不只可以包含 path 中的動態部分，也可以包含 URL 中的 <a href="https://en.wikipedia.org/wiki/Query_string">query string</a>，像 <code>/posts/1?utm_source=ithome</code> 這個 path 可以寫成：</p>
<pre><code class="language-javascript=">{
  pathname: &quot;/posts/[pid]&quot;,
  query: { pid: post.id, utm_source: &quot;ithome&quot; },
}
</code></pre>
<h3>useRouter</h3>
<p>除了把連結顯示在畫面上讓使用者點下去以外，我們也可以用程式碼做導頁，就是用 <code>useRouter</code>。<code>useRouter</code> 回傳 <code>router</code> 物件，裡面包含各式各樣與 <a href="https://nextjs.org/docs/api-reference/next/router">routing 有關的資訊</a>，例如 <code>pathname</code> (當下的路徑), <code>query</code> (該路徑的 query string), <code>isFallback</code> (伺服器是否正在顯示備份版本的頁面), <code>isReady</code> (瀏覽器是否已經拿到 route 相關資訊) 等資訊。不過 <code>router</code> 還包含一些 methods，有幾個跟導頁有關的：</p>
<ul>
<li>
<strong>push</strong>：導去某個頁面</li>
<li>
<strong>replace</strong>：導去某個頁面可是把目前所在的記錄去換掉</li>
<li>
<strong>back</strong>：回到上一頁</li>
</ul>
<h3>Shallow (淺) Routing</h3>
<p>什麼是 shallow routing 或是淺層換頁 (淺層路由)？換頁的過程中伺服器不會重跑 <a href="https://ithelp.ithome.com.tw/articles/10267894">data fetching</a> 的 functions，也不會 re-render (重新渲染) 整個頁面保持該頁的狀態。雖然頁面不會被換掉，可是 <code>router</code> 中的 <code>pathname</code> 和 <code>query</code> 會拿到最新值。</p>
<pre><code class="language-javascript=">router.push(&quot;/?id=1&quot;, undefined, { shallow: true })
</code></pre>
<p>不過要注意，shallow routing 只能用在同一個頁面，<code>/?id=1</code> 換去 <code>/about?id=1</code> 是不同的頁面，所以 Next.js 會跟平常一樣去下載新的頁面。</p>
<p><img src="https://i.imgur.com/8amI9dl.png" alt="Next.js Client-side Routing" /></p>
<h2>小結</h2>
<p>File-based routing 是不是看起來很棒呢？～ 不過還是要注意小細節喔，避免遇到 routing 相關問題。明天跟大家分享讓 Next.js 變成一個全端框架的原因，就是 API routes！<br>祝大家中秋節快樂！</p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://nextjs.org/docs/basic-features/pages">Next.js Pages</a>
</li>
<li>Next.js Routing
<ul>
<li>
<a href="https://nextjs.org/docs/routing/introduction">Introduction</a>
</li>
<li>
<a href="https://nextjs.org/docs/routing/dynamic-routes">Dynamic Routes</a>
</li>
<li>
<a href="https://nextjs.org/docs/routing/imperatively">Imperatively</a>
</li>
<li>
<a href="https://nextjs.org/docs/routing/shallow-routing">Shallow Routing</a>
</li>
</ul>
</li>
<li>
<a href="https://nextjs.org/docs/api-reference/next/link">next/link</a>
</li>
<li>
<a href="https://nextjs.org/docs/api-reference/next/router">next/router</a>
</li>
</ul>


嗨嗨嗨！昨天看完怎麼抓取資料的方式會影響到網頁的渲染模式之後，今天的主題是 Next.js 的 Pages 與 Routing。Next.js 的 routing 方式跟一般 React 使用的 react-router 不一樣，它採用 file-based routing。

File-based Routing
File-based routing 的意思是每個檔案代表一個 route，而檔案名稱 (file name) 會變成 route 的 path name (路徑名稱)。Next.js 會把 pages 資料夾 / 目錄裡面的所有檔案看成 route (路徑) 的一部分，還不是很懂嗎？我們看看下面的例子～
pages/index.js 代表 / route
pages/about.js 代表 /about route
Index routes
每個 index 檔案代表根目錄，所以
pages/index.js 代表 / route
pages/posts/index.js 代表 /posts route
Nested (巢狀) routes
每一層資料夾每一層目錄會是 route 的一部分，所以
pages/posts/index.js 代表 /posts route
pages/posts/first.js 代表 /posts/first route
pages/categories/lifestyle/fashion.js 代表 /categories/lifestyle/fashion route
Dynamic (動態) routes
如果上面的 routes 都要我們自己定義每一個 file name 當 path name，那當我們有一系列的頁面怎麼辦？或是如果我們想要把資料庫裡的每一條資料寫個頁面怎麼辦？或是像iT邦幫忙的網址 https://ithelp.ithome.com.tw/users/20141378 應該不會是我們要新增 20141378 個頁面檔案吧？這時候我們需要 dynamic routes 來幫助我們！
pages/posts/[pid]/index.js 代表 /posts/1，/posts/2，···
pages/posts/[pid]/comments/index.js 代表 /posts/1/comments，/posts/2/comments，···
pages/posts/[pid]/comments/[cid].js 代表 /posts/1/comments/1-1，/posts/2/comments/2-1，···
或是iT邦幫忙的網址 https://ithelp.ithome.com.tw/users/20141378 需要一個檔案 pages/users/[uid].js。這些動態的資訊可以在 route.query 物件裡面看到，/posts/a/comments/a-1?utm_source=ithome 的 query 物件會長這樣：
{ "pid": "a", "cid": "a-1", "utm_source": "ithome" }

Catch all routes
屬於 dynamic routes 的一種，不過 catch all 的意思是不需要一個一個定義動態的部分，把所有動態的資訊抓起來，讓 route 比較彈性，寫法跟其餘參數（rest parameter）一樣。
pages/posts/[...slug].js 可以代表 /posts/a 也可以是 /posts/a/b，/posts/a/b/c 等
slug 可以是 param 或是其他東西都可以，這些動態資訊也會出現在 query 物件裡面，例如 /posts/a/b/c 的 query 會是：
{ "slug": ["a", "b", "c"] }

Optional catch all routes
知道了 catch all routes 之後，還有另一種更有彈性的 dynamic routes，只要把 catch all 的 [...slug] 改成 [[...slug]] 就會變成 optional catch all。意思是 slug 這個 array (陣列) 可以是不存在的，
pages/posts/[[...slug]].js 可以代表 /posts/a 也可以是 /posts/a/b，/posts/a/b/c 等，不過也可以代表 /posts


所以 query 物件會是空物件 {}。
注意：query 在 static (靜態) 頁面在第一次渲染的時候不會有東西，就是一個空物件 {}，等到 hydration 完成之後，query 才會被更新
繼續到下一個章節之前，我們複習一下～

Client-side Routing
雖然 routing 方式不太一樣，不過 Next.js 還是跟 SPA (Single-page Application) 一樣可以做 client-side routing，意思是換頁的時候瀏覽器不用重新 reload，使得整個體驗非常順。Next.js 提供兩種方法：
<Link> (next/link)
useRouter (next/router)

next/link 提供 Link component 可以直接用在我們的 react components 裡面，跟 react-router-dom 裡的 Link 差不多的用法。當我們想要在畫面上顯示一個連結的時候，可以用 Link，他底層用 HTML 的 a 實作出來的。比較特別的是，當使用者畫面上有顯示 <Link /> components， Next.js 會把所有採用 SSG / ISR 的頁面先做 prefetch (事先抓取) 這些頁面的檔案與資料，所以當使用者點下其中一個連結，瀏覽器可以馬上顯示新的畫面不需要等待，提升使用者換頁的體驗。想要用 Link 有幾種方法：
連去 Static Paths
import Link from "next/link"

function Home() {
  return (
    <div>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  )
}

export default Home

用 string (字串) 當 href，"/" 會連到 pages/index.js 的檔案，然後 "/about" 會連到 "pages/about.js" 檔案。
連去 Dynamic Paths
import Link from "next/link"

function Posts({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <Link href={`/posts/${post.id}?utm_source=ithome`}>
          <a>Post #{post.id}</a>
        </Link>
      ))}
    </div>
  )
}

export default Posts

想要導頁去 dynamic routes 一樣可以把 path 組成 string 給 href，例如 /posts/${post.id} 然後 post.id 是動態的。或是可以把 path 拆成 object (物件) 給 href，像這樣～
{
  pathname: "/posts/[pid]", // 跟 file name 一樣
  query: { pid: post.id }, // path 中動態的部分，在這例子是 pid
}

query 不只可以包含 path 中的動態部分，也可以包含 URL 中的 query string，像 /posts/1?utm_source=ithome 這個 path 可以寫成：
{
  pathname: "/posts/[pid]",
  query: { pid: post.id, utm_source: "ithome" },
}

useRouter
除了把連結顯示在畫面上讓使用者點下去以外，我們也可以用程式碼做導頁，就是用 useRouter。useRouter 回傳 router 物件，裡面包含各式各樣與 routing 有關的資訊，例如 pathname (當下的路徑), query (該路徑的 query string), isFallback (伺服器是否正在顯示備份版本的頁面), isReady (瀏覽器是否已經拿到 route 相關資訊) 等資訊。不過 router 還包含一些 methods，有幾個跟導頁有關的：
push：導去某個頁面
replace：導去某個頁面可是把目前所在的記錄去換掉
back：回到上一頁
Shallow (淺) Routing
什麼是 shallow routing 或是淺層換頁 (淺層路由)？換頁的過程中伺服器不會重跑 data fetching 的 functions，也不會 re-render (重新渲染) 整個頁面保持該頁的狀態。雖然頁面不會被換掉，可是 router 中的 pathname 和 query 會拿到最新值。
router.push("/?id=1", undefined, { shallow: true })

不過要注意，shallow routing 只能用在同一個頁面，/?id=1 換去 /about?id=1 是不同的頁面，所以 Next.js 會跟平常一樣去下載新的頁面。

小結
File-based routing 是不是看起來很棒呢？～ 不過還是要注意小細節喔，避免遇到 routing 相關問題。明天跟大家分享讓 Next.js 變成一個全端框架的原因，就是 API routes！
祝大家中秋節快樂！
晚安 <3
看更多
Next.js Pages

Next.js Routing


Introduction


Dynamic Routes


Imperatively


Shallow Routing




next/link


next/router

嗨嗨嗨！昨天看完怎麼抓取資料的方式會影響到網頁的渲染模式之後，今天的主題是 Next.js 的 Pages 與 Routing。Next.js 的 routing 方式跟一般 React 使用的...

#05 No-code 之旅 — Next.js 的 Pages 與 Routing

<p>嗨大家！昨天跟大家分享了四種網頁渲染方式，那今天來講講該怎麼用 Next.js 實作～ 在 Next.js 裡，抓取資料的方式會影響到渲染方式。上一篇提到 Next.js 提供的三個 funct...

<p>嗨大家！昨天跟大家分享了四種網頁渲染方式，那今天來講講該怎麼用 Next.js 實作～ 在 Next.js 裡，抓取資料的方式會影響到渲染方式。上一篇提到 Next.js 提供的三個 functions 就是用來抓取資料做預渲染 (產生包含內容資料的 HTML 檔案) 的，我們一起看下去～</p>
<blockquote>
<p>注意：想要用這三個 functions 的話，一定要在 Next.js 的 page (頁面) 檔案裡面做 export 喔。</p>
</blockquote>
<blockquote>
<p>注意：這三個 functions 會在 server (伺服器) 端跑完，因此我們可以在裡面寫後端程式碼，甚至操作資料庫。</p>
</blockquote>
<p><img src="https://i.imgur.com/NsHllk7.png" alt="Next.js Pre-rendering" /></p>
<h2><a href="https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation"><code>getStaticProps</code></a> (Static Generation)</h2>
<p>這 function 會在 build time 的時候跑而抓取所需要的資料，就是當我們執行 <code>npm run build</code> 的時候跑的。這 function 可以回傳 <code>props</code> object (物件) 當該 page 的 props，這 page 需要的資料就透過 props 傳進去的。伺服器跑完這 function 之後，除了產生了 HTML 檔案之外，還會產生了 JSON 檔案。為什麼呢？因為在 client-side (客戶端) 切換頁面的時候，瀏覽器會讀這 JSON 檔案裡面的資料用來顯示 page 內容。</p>
<pre><code class="language-javascript=">// 在 build time 的時候跑在伺服器端
export async function getStaticProps() {
  // 可以直接抓取資料或是操作資料庫
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    // 傳給該 page 的 props
    props: {
      posts,
    },
    // 過了 10 秒之後，可以重新驗證／重新產生
    revalidate: 10,
  }
}
</code></pre>
<p><code>getStaticProps</code> 接收 <code>context</code> 當 parameter，而 <code>context</code> 包含渲染該 page 的相關資訊，可以在<a href="https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation">這裡</a>看官方的 <a href="https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation">docs</a>。<code>getStaticProps</code> 回傳一個物件而裡面包含：</p>
<ul>
<li>
<code>props</code> (<strong>optional</strong>)：傳給 page 當該 page 的 <strong>props</strong>
</li>
<li>
<code>revalidate</code> (<strong>optional</strong>)：實作 <a href="https://ithelp.ithome.com.tw/articles/10267249">ISR</a> 用的，如果設定 <strong>false</strong> 代表只會 build 一次，就是整個專案跑 <code>npm run build</code> 的時候。如果設定<strong>秒數</strong>，代表過幾秒之後可以重新 generate (產生) 這 page 做 revalidation (重新驗證) 更新 page 的資料。不過伺服器會先回傳 cache 裡的<strong>舊 page</strong> 給瀏覽器然後在背後 revalidate 完才回傳最新的 page 給瀏覽器，讓瀏覽器去做更新</li>
<li>
<code>notFound</code> (<strong>optional</strong>)：找不到資料的時候，決定是否回傳 <strong>404</strong> 的 status code 與 error page</li>
<li>
<code>redirect</code> (<strong>optional</strong>)：設定是否要<strong>導頁</strong>而且導去哪裡，用物件的形式 <code>{ destination: string, permanent: boolean }</code> 或是 <code>{ destination: string, statusCode: number }</code>
</li>
</ul>
<h3>與 SSG 或 ISR 的關係</h3>
<p><code>getStaticProps</code> 會在 build time 的時候跑在伺服器端，把抓取到的資料塞進該 page 對應到的 HTML 檔案，讓 HTML 檔案包含了資料內容，而可以直接丟給瀏覽器去顯示，這就是 SSG。如果設定了 <code>revalidation</code> 的<strong>秒數</strong>，該 page 會進行重新驗證／重新產生的過程，這是 ISR。</p>
<p>不過，如果在 dynamic (動態) routes 的 page 裡有用到 <code>getStaticProps</code>，那需要搭配 <code>getStaticPaths</code> 才能正確運作，可以去下一段看看為什麼～</p>
<h6>關於 dynamic routes 會在之後解釋喔。</h6>
<p><img src="https://i.imgur.com/KoNKBmR.png" alt="getStaticProps" /></p>
<h2><a href="https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation"><code>getStaticPaths</code></a> (Static Generation)</h2>
<p>一樣會在伺服器端 build time 的時候跑的，名字跟上一個 function 也有點像，雖然用途不一樣，可是這兩個 function 常常用在一起。這 function 抓取資料的目的並不是變成網頁的內容，而是用這些資料決定需要產生哪些 dynamic (動態) routes 的 HTML 檔案。</p>
<pre><code class="language-javascript=">export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } }
    ],
    fallback: true, false, or 'blocking'
  };
}
</code></pre>
<p><code>getStaticPaths</code> 回傳一個物件而裡面包含：</p>
<ul>
<li>
<code>paths</code> (<strong>required</strong>)：決定要產生哪些 paths 的 HTML 檔案，每個 path 是一個物件包含 <code>params</code> 物件。如果你的 path 是 <code>posts/[id]</code> 而 <code>id</code> 是動態的，那 <code>params</code> 裡面要定義 <code>id</code> 的值。所以上面那段 code 只會去產生兩個 HTML 檔案，<code>pages/posts/1.html</code> 和 <code>pages/posts/2.html</code>
</li>
<li>
<code>fallback</code> (<strong>required</strong>)：決定找不到 page 的時候的行為，總共有三種方法
<ul>
<li>
<code>true</code>：當 page 不在 <code>paths</code> 裡面，伺服器會回傳一個備份版本的 page，而該 page 可能是空的或是 loading 狀態 (由我們決定)，然後伺服器在背後去產生該 page 的 JSON 檔案，等到完成之後再傳給瀏覽器去做顯示，也會把這新產生的 page 放在 CDN 的 cache 裡</li>
<li>
<code>false</code>：如果該 page 不在 <code>paths</code> 裡面，而找不到該 page 的 HTML 檔案，會拿到 404 error code 而顯示 404 error page</li>
<li>
<code>'blocking'</code>：當 page 不在 <code>paths</code> 裡面，伺服器會產生該 page 的 HTML 檔案而這段期間瀏覽器是等待的狀態 (白畫面)，等到 HTML 檔案產生完才回傳給瀏覽器做顯示。這一次伺服器是採用 SSR 的方式，不過產生完之後，HTML 檔案一樣會被放到 CDN 的 cache 裡</li>
</ul>
</li>
</ul>
<h3>與 SSG 或 ISR 的關係</h3>
<p><code>getStaticPaths</code> 會在 build time 的時候跑在伺服器端，把抓取到的資料決定該產生 dynamic routes 的哪些 paths。這些 paths 再往裡面跑每個 page 的 <code>getStaticProps</code> 產生 HTML 和 JSON 檔案。沒有 <code>getStaticPaths</code> 就不會有 dynamic routes 相關的 page 了！</p>
<p><img src="https://i.imgur.com/jIYwcIh.png" alt="getStaticPaths" /></p>
<h2><a href="https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering"><code>getServerSideProps</code></a> (Server-side Rendering)</h2>
<p>最後一個！這 function 很像 <code>getStaticProps</code>，回傳的值差不多，一樣在伺服器端跑。不一樣的點是它不是 build 的時候跑的，而是每次有 request (請求) 的時候才會跑。跟 <code>getStaticProps</code> 也一樣除了會產生 HTML 檔案之外，還會產生了 JSON 檔案。</p>
<pre><code class="language-javascript=">export async function getServerSideProps(context) {
  return {
    props: {}, // 傳給該 page 的 props
  }
}
</code></pre>
<p><code>getServerSideProps</code> 接收 <code>context</code> 當 parameter，而 <code>context</code> 包含渲染該 page 的相關資訊，可以在<a href="https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering">這裡</a>看官方的 <a href="https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering">docs</a>。<code>getServerSideProps</code> 回傳一個物件而裡面包含：</p>
<ul>
<li>
<code>props</code> (<strong>optional</strong>)：傳給 page 當該 page 的 <strong>props</strong>
</li>
<li>
<code>notFound</code> (<strong>optional</strong>)：找不到資料的時候，決定是否回傳 <strong>404</strong> 的 status code 與 error page</li>
<li>
<code>redirect</code> (<strong>optional</strong>)：設定是否要<strong>導頁</strong>而且導去哪裡，用物件的形式 <code>{ destination: string, permanent: boolean }</code> 或是 <code>{ destination: string, statusCode: number }</code>
</li>
</ul>
<h3>與 SSR 的關係</h3>
<p><code>getServerSideProps</code> 會在每一次的 request time 的時候跑在伺服器端，把抓取到的資料塞進該 page 對應到的 HTML 檔案，讓 HTML 檔案包含了資料內容，而可以直接丟給瀏覽器去顯示，這就是 SSR。產生檔案的過程中，瀏覽器會顯示白畫面，所以使用者可能會覺得顯示很慢，而且 SSR 產生的 HTML 檔案不會自動被 CDN 做 cache (需要特別設定喔～)。</p>
<p><img src="https://i.imgur.com/ZQezQYC.png" alt="getServerSideProps" /></p>
<h2>Client-side 抓取資料</h2>
<p>以上三個 function 都是跑在伺服器端抓取資料，可是如果需要一直更新資料或是不需要 SEO，那其實可以採用 CSR，在 client-side (客戶端) 去抓取資料～ 這部分跟一般在寫 React 需要拿資料的時候一模一樣，可能就是在 <code>useEffect</code> 去抓取資料然後畫面顯示 loading 狀態！</p>
<h2>小結</h2>
<p>今天講的好像有點多ＸＤ<br />
明天跟大家分享 Next.js 中的 pages 與 routing！也就是會講到 dynamic routes 的部分喔 :)<br>祝大家中秋節快樂！</p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://nextjs.org/docs/basic-features/data-fetching">Next.js Data Fetching</a>
</li>
<li>
<a href="https://vercel.com/docs/next.js/incremental-static-regeneration">Incremental Static Regeneration</a>
</li>
</ul>


嗨大家！昨天跟大家分享了四種網頁渲染方式，那今天來講講該怎麼用 Next.js 實作～ 在 Next.js 裡，抓取資料的方式會影響到渲染方式。上一篇提到 Next.js 提供的三個 functions 就是用來抓取資料做預渲染 (產生包含內容資料的 HTML 檔案) 的，我們一起看下去～
注意：想要用這三個 functions 的話，一定要在 Next.js 的 page (頁面) 檔案裡面做 export 喔。
注意：這三個 functions 會在 server (伺服器) 端跑完，因此我們可以在裡面寫後端程式碼，甚至操作資料庫。

getStaticProps (Static Generation)
這 function 會在 build time 的時候跑而抓取所需要的資料，就是當我們執行 npm run build 的時候跑的。這 function 可以回傳 props object (物件) 當該 page 的 props，這 page 需要的資料就透過 props 傳進去的。伺服器跑完這 function 之後，除了產生了 HTML 檔案之外，還會產生了 JSON 檔案。為什麼呢？因為在 client-side (客戶端) 切換頁面的時候，瀏覽器會讀這 JSON 檔案裡面的資料用來顯示 page 內容。
// 在 build time 的時候跑在伺服器端
export async function getStaticProps() {
  // 可以直接抓取資料或是操作資料庫
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    // 傳給該 page 的 props
    props: {
      posts,
    },
    // 過了 10 秒之後，可以重新驗證／重新產生
    revalidate: 10,
  }
}

getStaticProps 接收 context 當 parameter，而 context 包含渲染該 page 的相關資訊，可以在這裡看官方的 docs。getStaticProps 回傳一個物件而裡面包含：
props (optional)：傳給 page 當該 page 的 props


revalidate (optional)：實作 ISR 用的，如果設定 false 代表只會 build 一次，就是整個專案跑 npm run build 的時候。如果設定秒數，代表過幾秒之後可以重新 generate (產生) 這 page 做 revalidation (重新驗證) 更新 page 的資料。不過伺服器會先回傳 cache 裡的舊 page 給瀏覽器然後在背後 revalidate 完才回傳最新的 page 給瀏覽器，讓瀏覽器去做更新
notFound (optional)：找不到資料的時候，決定是否回傳 404 的 status code 與 error page
redirect (optional)：設定是否要導頁而且導去哪裡，用物件的形式 { destination: string, permanent: boolean } 或是 { destination: string, statusCode: number }


與 SSG 或 ISR 的關係
getStaticProps 會在 build time 的時候跑在伺服器端，把抓取到的資料塞進該 page 對應到的 HTML 檔案，讓 HTML 檔案包含了資料內容，而可以直接丟給瀏覽器去顯示，這就是 SSG。如果設定了 revalidation 的秒數，該 page 會進行重新驗證／重新產生的過程，這是 ISR。
不過，如果在 dynamic (動態) routes 的 page 裡有用到 getStaticProps，那需要搭配 getStaticPaths 才能正確運作，可以去下一段看看為什麼～
關於 dynamic routes 會在之後解釋喔。

getStaticPaths (Static Generation)
一樣會在伺服器端 build time 的時候跑的，名字跟上一個 function 也有點像，雖然用途不一樣，可是這兩個 function 常常用在一起。這 function 抓取資料的目的並不是變成網頁的內容，而是用這些資料決定需要產生哪些 dynamic (動態) routes 的 HTML 檔案。
export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } }
    ],
    fallback: true, false, or 'blocking'
  };
}

getStaticPaths 回傳一個物件而裡面包含：
paths (required)：決定要產生哪些 paths 的 HTML 檔案，每個 path 是一個物件包含 params 物件。如果你的 path 是 posts/[id] 而 id 是動態的，那 params 裡面要定義 id 的值。所以上面那段 code 只會去產生兩個 HTML 檔案，pages/posts/1.html 和 pages/posts/2.html


fallback (required)：決定找不到 page 的時候的行為，總共有三種方法


true：當 page 不在 paths 裡面，伺服器會回傳一個備份版本的 page，而該 page 可能是空的或是 loading 狀態 (由我們決定)，然後伺服器在背後去產生該 page 的 JSON 檔案，等到完成之後再傳給瀏覽器去做顯示，也會把這新產生的 page 放在 CDN 的 cache 裡
false：如果該 page 不在 paths 裡面，而找不到該 page 的 HTML 檔案，會拿到 404 error code 而顯示 404 error page
'blocking'：當 page 不在 paths 裡面，伺服器會產生該 page 的 HTML 檔案而這段期間瀏覽器是等待的狀態 (白畫面)，等到 HTML 檔案產生完才回傳給瀏覽器做顯示。這一次伺服器是採用 SSR 的方式，不過產生完之後，HTML 檔案一樣會被放到 CDN 的 cache 裡
與 SSG 或 ISR 的關係
getStaticPaths 會在 build time 的時候跑在伺服器端，把抓取到的資料決定該產生 dynamic routes 的哪些 paths。這些 paths 再往裡面跑每個 page 的 getStaticProps 產生 HTML 和 JSON 檔案。沒有 getStaticPaths 就不會有 dynamic routes 相關的 page 了！

getServerSideProps (Server-side Rendering)
最後一個！這 function 很像 getStaticProps，回傳的值差不多，一樣在伺服器端跑。不一樣的點是它不是 build 的時候跑的，而是每次有 request (請求) 的時候才會跑。跟 getStaticProps 也一樣除了會產生 HTML 檔案之外，還會產生了 JSON 檔案。
export async function getServerSideProps(context) {
  return {
    props: {}, // 傳給該 page 的 props
  }
}

getServerSideProps 接收 context 當 parameter，而 context 包含渲染該 page 的相關資訊，可以在這裡看官方的 docs。getServerSideProps 回傳一個物件而裡面包含：
props (optional)：傳給 page 當該 page 的 props


notFound (optional)：找不到資料的時候，決定是否回傳 404 的 status code 與 error page
redirect (optional)：設定是否要導頁而且導去哪裡，用物件的形式 { destination: string, permanent: boolean } 或是 { destination: string, statusCode: number }


與 SSR 的關係
getServerSideProps 會在每一次的 request time 的時候跑在伺服器端，把抓取到的資料塞進該 page 對應到的 HTML 檔案，讓 HTML 檔案包含了資料內容，而可以直接丟給瀏覽器去顯示，這就是 SSR。產生檔案的過程中，瀏覽器會顯示白畫面，所以使用者可能會覺得顯示很慢，而且 SSR 產生的 HTML 檔案不會自動被 CDN 做 cache (需要特別設定喔～)。

Client-side 抓取資料
以上三個 function 都是跑在伺服器端抓取資料，可是如果需要一直更新資料或是不需要 SEO，那其實可以採用 CSR，在 client-side (客戶端) 去抓取資料～ 這部分跟一般在寫 React 需要拿資料的時候一模一樣，可能就是在 useEffect 去抓取資料然後畫面顯示 loading 狀態！
小結
今天講的好像有點多ＸＤ
祝大家中秋節快樂！
晚安 <3
看更多
Next.js Data Fetching


Incremental Static Regeneration

嗨大家！昨天跟大家分享了四種網頁渲染方式，那今天來講講該怎麼用 Next.js 實作～ 在 Next.js 裡，抓取資料的方式會影響到渲染方式。上一篇提到 Next.js 提供的三個 funct...

#04 No-code 之旅 — Next.js 中的 Pre-render 與 Data Fetching

<p>嗨大家！連假第一天過得如何？～ 今天想跟大家分享的主題是各種網頁渲染模式，就是 SSG、SSR、CSR、ISR。長得都差不多，可是細節都不太一樣，在決定要用哪一種之前，我們先看看下面的介紹吧！<...

<p>嗨大家！連假第一天過得如何？～ 今天想跟大家分享的主題是各種網頁渲染模式，就是 SSG、SSR、CSR、ISR。長得都差不多，可是細節都不太一樣，在決定要用哪一種之前，我們先看看下面的介紹吧！</p>
<h2>Static Site Generation (SSG)</h2>
<p><strong>SSG</strong> 或是<strong>靜態生成</strong>就是 build 整個專案的時候產生 HTML 檔案，這些 HTML 檔案已經包含所需要顯示的資料。這渲染模式是<strong>預渲染</strong> (<a href="https://nextjs.org/docs/basic-features/pages#pre-rendering">pre-rendering</a>) 的一種。SSG 很適合做內容不會有變化的靜態網站，因為所有資料是 build 時得到的。這些 HTML 檔案可以放在 CDN 上然後被 cache 而提升網站效能，除了這點之外，採用 SSG 渲染模式也利於 SEO。</p>
<h2>Server-side Rendering (SSR)</h2>
<p><strong>SSR</strong> 或是<strong>伺服器端渲染</strong>意思是每次瀏覽器 (客戶端 / client-side) 發送請求 (request) 時，伺服器才會產生 HTML 檔案然後丟回瀏覽器顯示。這渲染模式很適合變化頻率高的資料。不過因為伺服器需要時間產生 HTML 檔案，所以網站回應時間會比較久，使用者等待時會看到白畫面。SSR 也算是<strong>預渲染</strong>的一種，所以對 SEO 也蠻友善的～ 可是該注意，這方式需要伺服器一直處理使用者的請求。</p>
<h2>Client-side Rendering (CSR)</h2>
<p><strong>CSR</strong> 或是<strong>客戶端渲染</strong>跟名字差不多的意思，伺服器傳給瀏覽器的 HTML 檔案可以算是無內容的。瀏覽器跟伺服器拿完資料才能渲染在畫面上。SPA (Single Page Application 像 React 或 Vue) 使用的渲染模式就是 CSR。這模式的最大優點是切換頁面的時候不需要再跟伺服器拿檔案，使用者不會看到白畫面了，算是很好的使用者體驗。不過渲染時間會依賴客戶端的環境，也因為這樣，伺服器的負擔降低不少。</p>
<h2>Incremental Static Regeneration (ISR)</h2>
<p><strong>ISR</strong> 或是<strong>增量靜態生成</strong>比較少聽到的渲染模式，也算是<strong>預渲染</strong>的一種。ISR 在 build 專案時產生所有 (或部份) HTML 檔案，等到有新的 request 而且已經過了預定的時間，伺服器會先給瀏覽器舊檔案而在背後重新產生最新檔案，產生完之後再丟給瀏覽器做顯示。如果使用者到了一個還沒被 generate (產生) 的頁面，伺服器將當下產生該檔案也會做 cache，所以下一個到這頁面的使用者可以直接拿到 cache 裡的檔案。 ISR 很像 SSG 不過它解決了 SSG 不能更新資料內容的問題，而且 HTML 檔案也會被 cache 在 CDN 上，所以也減輕 SSR 對伺服器的負擔。</p>
<h2>該用哪一種呢？</h2>
<p>每一種渲染模式各有優缺點，該選哪一種也要看我們的專案，無法說出贏者。</p>
<ul>
<li>資料不斷地變化而且不需要 SEO 的內部系統 dashboard 很適合用 CSR，</li>
<li>資料變化率不低可是需要 SEO，可以考慮用 SSR，</li>
<li>資料幾乎不用更新像活動或行銷網站，SEO 也很重要，用 SSG 很適合，</li>
<li>資料不太需要更新或是有太多頁面而且需要 SEO 例如商品頁，那 ISR 就是個好選擇。</li>
</ul>
<p>我也有畫一個表，不過用英文的ＸＤ 大家可以看看～<br><img src="https://ithelp.ithome.com.tw/upload/images/20210918/201413780sydZT7e8D.png" alt="https://ithelp.ithome.com.tw/upload/images/20210918/201413780sydZT7e8D.png" /></p>
<h2>Next.js 中的 Pre-render</h2>
<p>Next.js 內建支援上面所寫的渲染模式，而且還預設用 SSG 渲染不需要抓取 (fetch) 資料的網頁，如果需要跟伺服器拿資料，那會跟 CSR 混用 (hybrid)。想要使用其他的渲染模式可以用以下 Next.js 提供的 functions：</p>
<ul>
<li>
<code>getStaticProps</code> (Static Generation): build 專案時抓取所需要的資料而放進 HTML 檔案裡</li>
<li>
<code>getStaticPaths</code> (Static Generation): 在 build 時間決定哪些動態 (dynamic) routes 需要被產生 HTML 檔案</li>
<li>
<code>getServerSideProps</code> (Server-side Rendering): 每次瀏覽器發請求的時候會跑的 function 拿所需要的資料</li>
</ul>
<h2>小結</h2>
<p>今天先到這裡，我們明天再繼續喔～<br />
明天跟大家分享怎麼使用以上那三個 functions 實作不同渲染模式的網站！<br>大家對於今天學到的渲染模式有什麼想法呢？</p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://nextjs.org/docs/basic-features/data-fetching">Next.js Data Fetching</a>
</li>
<li>
<a href="https://vercel.com/docs/next.js/incremental-static-regeneration">Incremental Static Regeneration</a>
</li>
</ul>


嗨大家！連假第一天過得如何？～ 今天想跟大家分享的主題是各種網頁渲染模式，就是 SSG、SSR、CSR、ISR。長得都差不多，可是細節都不太一樣，在決定要用哪一種之前，我們先看看下面的介紹吧！
Static Site Generation (SSG)
SSG 或是靜態生成就是 build 整個專案的時候產生 HTML 檔案，這些 HTML 檔案已經包含所需要顯示的資料。這渲染模式是預渲染 (pre-rendering) 的一種。SSG 很適合做內容不會有變化的靜態網站，因為所有資料是 build 時得到的。這些 HTML 檔案可以放在 CDN 上然後被 cache 而提升網站效能，除了這點之外，採用 SSG 渲染模式也利於 SEO。
Server-side Rendering (SSR)
SSR 或是伺服器端渲染意思是每次瀏覽器 (客戶端 / client-side) 發送請求 (request) 時，伺服器才會產生 HTML 檔案然後丟回瀏覽器顯示。這渲染模式很適合變化頻率高的資料。不過因為伺服器需要時間產生 HTML 檔案，所以網站回應時間會比較久，使用者等待時會看到白畫面。SSR 也算是預渲染的一種，所以對 SEO 也蠻友善的～ 可是該注意，這方式需要伺服器一直處理使用者的請求。
Client-side Rendering (CSR)
CSR 或是客戶端渲染跟名字差不多的意思，伺服器傳給瀏覽器的 HTML 檔案可以算是無內容的。瀏覽器跟伺服器拿完資料才能渲染在畫面上。SPA (Single Page Application 像 React 或 Vue) 使用的渲染模式就是 CSR。這模式的最大優點是切換頁面的時候不需要再跟伺服器拿檔案，使用者不會看到白畫面了，算是很好的使用者體驗。不過渲染時間會依賴客戶端的環境，也因為這樣，伺服器的負擔降低不少。
Incremental Static Regeneration (ISR)
ISR 或是增量靜態生成比較少聽到的渲染模式，也算是預渲染的一種。ISR 在 build 專案時產生所有 (或部份) HTML 檔案，等到有新的 request 而且已經過了預定的時間，伺服器會先給瀏覽器舊檔案而在背後重新產生最新檔案，產生完之後再丟給瀏覽器做顯示。如果使用者到了一個還沒被 generate (產生) 的頁面，伺服器將當下產生該檔案也會做 cache，所以下一個到這頁面的使用者可以直接拿到 cache 裡的檔案。 ISR 很像 SSG 不過它解決了 SSG 不能更新資料內容的問題，而且 HTML 檔案也會被 cache 在 CDN 上，所以也減輕 SSR 對伺服器的負擔。
該用哪一種呢？
每一種渲染模式各有優缺點，該選哪一種也要看我們的專案，無法說出贏者。
資料不斷地變化而且不需要 SEO 的內部系統 dashboard 很適合用 CSR，
資料變化率不低可是需要 SEO，可以考慮用 SSR，
資料幾乎不用更新像活動或行銷網站，SEO 也很重要，用 SSG 很適合，
資料不太需要更新或是有太多頁面而且需要 SEO 例如商品頁，那 ISR 就是個好選擇。
我也有畫一個表，不過用英文的ＸＤ 大家可以看看～

Next.js 中的 Pre-render
Next.js 內建支援上面所寫的渲染模式，而且還預設用 SSG 渲染不需要抓取 (fetch) 資料的網頁，如果需要跟伺服器拿資料，那會跟 CSR 混用 (hybrid)。想要使用其他的渲染模式可以用以下 Next.js 提供的 functions：
getStaticProps (Static Generation): build 專案時抓取所需要的資料而放進 HTML 檔案裡
getStaticPaths (Static Generation): 在 build 時間決定哪些動態 (dynamic) routes 需要被產生 HTML 檔案
getServerSideProps (Server-side Rendering): 每次瀏覽器發請求的時候會跑的 function 拿所需要的資料
小結
今天先到這裡，我們明天再繼續喔～
大家對於今天學到的渲染模式有什麼想法呢？
晚安 <3
看更多
Next.js Data Fetching


Incremental Static Regeneration

嗨大家！連假第一天過得如何？～ 今天想跟大家分享的主題是各種網頁渲染模式，就是 SSG、SSR、CSR、ISR。長得都差不多，可是細節都不太一樣，在決定要用哪一種之前，我們先看看下面的介紹吧！<...

#03 No-code 之旅 — 什麼是 SSG、SSR、CSR、ISR？

<p>大家星期五快樂！TGIF～ 今天想跟大家分享 Next.js 這個 React 框架 (官網寫 &quot;The React Framework for Production&quot;)。講...

<p>大家星期五快樂！TGIF～ 今天想跟大家分享 Next.js 這個 React 框架 (官網寫 &quot;The React Framework for Production&quot;)。講到 Next.js 就會想到 SSR 或是 SSG，所以今天也會一起分享。有什麼問題或不清楚的歡迎留言問我喔！</p>
<h2>用 Next.js 的原因</h2>
<p>Next.js 其實不算是新的框架，不過我這一個月才開始碰它，覺得蠻可惜的 (因為很好用啊！)。基於 React 且擁有良好的 DX (開發者經驗)，讓我們不需多設定也可以快速上手。最近幾年 Next.js 也吸引了不少人，尤其是熟悉 React 的大家，更不用多煩惱，可以直接換來換去的ＸＤ。</p>
<p>對我來說，會想要用 Next.js 的主要兩個原因就是：</p>
<ul>
<li>他對 Server-side Rendering (SSR) 或 Static Site Generation (SSG) 的支援，</li>
<li>他提供 API Routes，讓我們可以在同一個專案寫前端網頁和後端的 API！</li>
</ul>
<p>還有更多優點可以在<a href="https://nextjs.org/">官網</a>看喔～</p>
<p>咦？有這麼好嗎？應該也是有缺點吧！</p>
<h2>不用 Next.js 的原因呢？</h2>
<p>雖然我個人覺得他都很好，沒什麼不好的（誤ＸＤ</p>
<p>Next.js 的 <a href="https://nextjs.org/docs/routing/introduction">routing</a> 方式跟一般 React 看到的 (<a href="https://reactrouter.com/web/guides/quick-start">react-router</a>) 不一樣。它採用 <a href="https://nextjs.org/docs/basic-features/pages">file-based routing</a>，意思是每個檔案就是一個 page (頁面)。這點對我來說不是什麼大缺點，可是對一些 routing 比較複雜或是需要更多的控制的專案就不太適合。</p>
<p>那你決定要用 Next.js 了嗎？要的話，我們可以往下一步，來 setup 我們的 project 吧！</p>
<h2>Setup</h2>
<p>如果 React 有 CRA (<code>create-react-app</code>)，那 Next.js 有 <code>create-next-app</code> 讓整個 setup 的過程非常簡單也不需多設定。在終端機輸入以下指令建立專案：</p>
<pre><code class="language-bash=">npx create-next-app
# or
yarn create next-app
</code></pre>
<p>我個人喜歡用 TypeScript 所以會用不一樣的指令：</p>
<pre><code class="language-bash=">npx create-next-app --typescript
# or
yarn create next-app --typescript
</code></pre>
<p>東西安裝完之後可以跑跑看我們的 development (開發) server：</p>
<pre><code class="language-bash=">npm run dev
# or
yarn dev
</code></pre>
<p>在瀏覽器輸入 <a href="http://localhost:3000"><code>http://localhost:3000</code></a>，你會看到以下這個畫面～<br><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1629035862682/eA4zFxRis.png?auto=compress,format&amp;format=webp" alt="Welcome to Next.js" /></p>
<p>就這樣！什麼都不需要設定，只輸入一行指令就能得到：</p>
<ul>
<li>fast refresh (編輯檔案之後，不需要手動重整，即時看到最新狀態)</li>
<li>SSG 或 SSR</li>
<li>static file serving (提供靜態檔案)</li>
</ul>
<h2>小結</h2>
<p>今天先到這裡～<br />
明天跟大家詳細介紹 SSR, SSG, CSR, ISR，還有該怎麼在 Next.js 使用這些不同的 rendering 方式！</p>
<p>晚安 &lt;3</p>
<h2>看更多</h2>
<ul>
<li>
<a href="https://nextjs.org/docs/getting-started">Next.js Getting Started</a>
</li>
</ul>


大家星期五快樂！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 (提供靜態檔案)
小結
今天先到這裡～
晚安 <3
看更多
Next.js Getting Started

大家星期五快樂！TGIF～ 今天想跟大家分享 Next.js 這個 React 框架 (官網寫 "The React Framework for Production")。講...

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

<h2>前言</h2>
<p>嗨，大家好！我是 Jade，這是我第一次參加 iTHome 鐵人賽～ 好緊張ＸＤ<br />
猶豫了很久之後，決定挑戰自己在這 30 天製作最近很紅的 no-code (...

<h2>前言</h2>
<p>嗨，大家好！我是 Jade，這是我第一次參加 iTHome 鐵人賽～ 好緊張ＸＤ<br />
猶豫了很久之後，決定挑戰自己在這 30 天製作最近很紅的 no-code (無程式碼) 網頁！</p>
<h2>主題</h2>
<p>這次想挑戰的並不是使用 no-code 平台實作一個網頁出來，而是自己手刻製作無程式碼的個人網頁。什麼意思呢？意思是我會用 Next.js 實作一個網頁，在這過程中也會跟大家分享 Next.js 的一些相關知識。網頁做完之後，可以開始串接 API 而目前想到的是可以串 Github 和 Notion API，希望也能順利接 Instagram 和 Youtube 的 API～ 最後就把整個網頁部署推到 production 喔！給全世界的人看（？</p>
<p>那 no-code 的點在哪呢？這網頁不需要更新或編輯，都會自動拿到最新資料 (自動化的概念？)，而且做完之後大家都可以拿來用做自己的個人網頁！所以 no-code 是未來(開發完)的事，也是對其他人來說應該是 no-code 沒錯 ＸＤ</p>
<h2>目標</h2>
<p>講一下我對自己的目標，也是這系列文的目標。我希望在第 30 天：</p>
<ul>
<li>我能看到一個好看的個人網頁而且是完全自動化的，
<ul>
<li>也可以給別人拿來用做出自己喜歡的網頁！</li>
<li>代表這網頁也要有一定程度的客製化功能ＸＤ</li>
</ul>
</li>
<li>真的有 30 篇文章哈哈哈
<ul>
<li>而且都有寫到一開始預定的主題，</li>
<li>也希望看到文章的大家都能有所收穫～</li>
</ul>
</li>
</ul>
<p>當然也希望自己對所用到的技術有更深的了解與掌握。不過，本人也沒串過 Github, Notion, Instagram, Youtube API，所以我也希望都可以順利接起來。如果有其他個人網頁相關的 API 也可以跟我說，我可以串串看！</p>
<h2>規劃</h2>
<p>來吧！跟大家分享這系列文的主題規劃：</p>
<ul>
<li>Next.js
<ul>
<li>介紹</li>
<li>Setup</li>
<li>SSR - CSR - ISR - SSG</li>
<li>Data Fetching</li>
<li>Static File Serving</li>
<li>Image, Font, Script Optimization</li>
<li>Fast Refresh</li>
<li>ESLint</li>
<li>Environment Variables (.env)</li>
<li>TypeScript &amp; Path Aliases</li>
<li>Polyfills</li>
<li>Routing</li>
<li>API Routes</li>
<li>Dynamic Import</li>
</ul>
</li>
<li>部署 Deployment
<ul>
<li>Vercel</li>
<li>Node.js Server &amp; Static HTML Export</li>
<li>Netlify</li>
</ul>
</li>
<li>SWR</li>
<li>第三方 (3rd Party) API
<ul>
<li>Github</li>
<li>Notion</li>
<li>Instagram</li>
<li>Youtube</li>
<li>考慮中：Twitter, RSS</li>
</ul>
</li>
<li>Open Graph 與連結封面縮圖</li>
<li>Chakra UI: React UI Component Library
<ul>
<li>介紹 &amp; Setup</li>
<li>客製化 Theme &amp; Component Style</li>
<li>Hooks</li>
</ul>
</li>
<li>Google Analytics</li>
</ul>
<p>這不是文章的順序而是預計涵蓋的範圍～</p>
<h2>小結</h2>
<p>寫完系列文的文章規劃之後才發現超多的ＸＤ<br>看起來連假會很忙啊哈哈<br />
希望沒有跟著開發的人可以用我(之後)做出來的網頁，做自己的個人網頁～</p>
<p>歡迎看看我的無程式碼之旅！ &lt;3</p>


前言
嗨，大家好！我是 Jade，這是我第一次參加 iTHome 鐵人賽～ 好緊張ＸＤ
主題
這次想挑戰的並不是使用 no-code 平台實作一個網頁出來，而是自己手刻製作無程式碼的個人網頁。什麼意思呢？意思是我會用 Next.js 實作一個網頁，在這過程中也會跟大家分享 Next.js 的一些相關知識。網頁做完之後，可以開始串接 API 而目前想到的是可以串 Github 和 Notion API，希望也能順利接 Instagram 和 Youtube 的 API～ 最後就把整個網頁部署推到 production 喔！給全世界的人看（？
那 no-code 的點在哪呢？這網頁不需要更新或編輯，都會自動拿到最新資料 (自動化的概念？)，而且做完之後大家都可以拿來用做自己的個人網頁！所以 no-code 是未來(開發完)的事，也是對其他人來說應該是 no-code 沒錯 ＸＤ
目標
講一下我對自己的目標，也是這系列文的目標。我希望在第 30 天：
我能看到一個好看的個人網頁而且是完全自動化的，

也可以給別人拿來用做出自己喜歡的網頁！
代表這網頁也要有一定程度的客製化功能ＸＤ
真的有 30 篇文章哈哈哈

而且都有寫到一開始預定的主題，
也希望看到文章的大家都能有所收穫～
當然也希望自己對所用到的技術有更深的了解與掌握。不過，本人也沒串過 Github, Notion, Instagram, Youtube API，所以我也希望都可以順利接起來。如果有其他個人網頁相關的 API 也可以跟我說，我可以串串看！
規劃
來吧！跟大家分享這系列文的主題規劃：
Next.js

介紹
Setup
SSR - CSR - ISR - SSG
Data Fetching
Static File Serving
Image, Font, Script Optimization
Fast Refresh
ESLint
Environment Variables (.env)
TypeScript & Path Aliases
Polyfills
Routing
API Routes
Dynamic Import
部署 Deployment

Vercel
Node.js Server & Static HTML Export
Netlify
SWR
第三方 (3rd Party) API

Github
Notion
Instagram
Youtube
考慮中：Twitter, RSS
Open Graph 與連結封面縮圖
Chakra UI: React UI Component Library

介紹 & Setup
客製化 Theme & Component Style
Hooks
Google Analytics
這不是文章的順序而是預計涵蓋的範圍～
小結
寫完系列文的文章規劃之後才發現超多的ＸＤ
看起來連假會很忙啊哈哈
歡迎看看我的無程式碼之旅！ <3

前言
嗨，大家好！我是 Jade，這是我第一次參加 iTHome 鐵人賽～ 好緊張ＸＤ
猶豫了很久之後，決定挑戰自己在這 30 天製作最近很紅的 no-code (...