使用 React + Next.js 製作一個產品 Landing page
Landing page 又稱到達頁面、著陸頁面，是客戶第一個接觸到產品的頁面，這個頁面唯一的目標就是促成客戶的行動，通常即是「購買、下載、使用或分享你的產品」
Landing page 有什麼技術需求
在商業上，要做一個 Landing Page ，我們會希望他最好能出現在相關搜尋結果的第一筆，有最好的曝光度。
希望即使是在手機上，網頁也能夠飛速開啟，順暢的使用。
希望當我轉貼網站連結到臉書的時候，能夠顯示美美的插圖跟預覽，最好讓人不用點就大概看到網站的內容。
希望有一個後台可以看見有多少人看過了這個網站，作為行銷的參考數據。
綜合以上，我們這些需求可以整理成這些關鍵字：
- 快速開啟頁面
- 兼容行動裝置操作
- 搜尋引擎優化
- 記錄網站瀏覽人次
- 轉貼到社群網站時能顯示預覽縮圖與敘述
可以對應到以下的解決方案：
- static site host
- 響應式網頁設計 (RWD)
- 提供 Meta 標籤協助搜尋引擎了解網站內容
- 植入網頁分析工具
- 提供 open graph 標籤
本文將會介紹如何實作一個滿足這些需求的 Landing Page，並在最後附上模板的程式碼
為什麼要使用 React + Next.js ?
使用 React 搭配 Next.js 開發能夠有許多好處，其中採用 Next.js 是取其 static site export 的功能，讓我們能夠在使用 React 的 component 跟豐富的生態系時，還能透過 Next.js 將程式碼輸出成靜態網站。
當我們的 Landing page 是一個靜態網站時，因為去除了 database、server 的中介層，同時已經預先完成部分的 render，會加速網站的載入，也更加的安全，更加的容易部署。
透過 create-next-app 的指令，可以很快速的建立一個 next.js 的專案，然後下 yarn dev 指令，便可以打開 local development server。
npx create-next-app
yarn devnext.js 預設提供 的 routing 是在 page/ 資料夾中，每個 .js（.ts) 檔案都會 render 在相同 component 名稱的路徑底下，例如 page/About.js 會渲染在 localhost/about，不過 page/Index.js 則會渲染在 localhost/ 。
如果 Landing page 只有一頁，我們只需要編輯 page/Index.js 這個檔案就可以了。
搜尋引擎優化
最基本的搜尋引擎優化方式，是在網頁的 HTML 標頭（Head）加上適當的 Meta 標籤：
<head>
<title>這是網站的標題</title>
<meta name="description" content="這是網站的敘述" />
...
</head>其中，title 與 description 會是在搜尋結果中所顯示的標題與敘述。
在 Next.js 中，可以使用 Head 這個 component 設定每一頁的標頭
// https://nextjs.org/docs#populating-head
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hello world!</p>
</div>
)
}
export default IndexPage在 Head 中還有許多可以放的標籤，去描述自己的網站，幫助其他網站、服務了解自己的網站，例如下文會提到的，社群網站常用的 The Open Graph protocol。
此外，搜尋引擎的優化除了放這些標籤，還可以包含內容與行銷方面，我會推薦閱讀 Google 官方的指南，以及使用 Chrome 內建的自動化工具 Lighthouse 去檢查網站 SEO 的設定。
提供 Open Graph 標籤
要告訴其他網站（例如：Facebook、Twitter、Line、medium），去顯示一個連結的縮圖、標題和敘述（如下圖），需要提供 Open Graph 標籤。
在 Head 中加入 og:url, og:title, og:description, og:image ，對應到上方顯示的網址、標題、敘述和縮圖。
<Head>
<title>這是網站的標題</title>
...
<meta property="og:url" content="網站的網址" />
<meta property="og:title" content="網站的標題" />
<meta property="og:description" content="網站的敘述" />
<meta property="og:image" content="網站的縮圖路徑" />
...
</Head>如果有興趣，在 Open Graph protocol 官網中可以看到其他更多標籤
響應式網頁設計 (RWD)
RWD 在網頁上的實作有許多方法，在這邊介紹筆者搭配 React 常用的兩種：
使用 styled-component 搭配 React 可以使用原生 css 的語法打造出可以重複使用，有拓展性的 component，再加上 styled media query，可以簡化 media query 語法，並且確保 breakpoint 一致，相比於使用 framework 是更輕量化、更具有彈性的解決方案。
若是需要一些常見的 component ，像是 Grid system，在 styled-component 的生態中也有許多解決方案可以搭配使用，不必全部 component 都從頭開始造輪子。
如果你有想做的網頁與資料，但沒有資源、時間請設計師做界面的設計、你沒有需要客製化樣式的需求或者framework 提供的 component/ 樣式，剛好大致符合你想做的網頁，如果這些說的是你，那麼使用 UI framework 會是還不錯的選擇。
Ant design (AntD) 是一個功能強大的 UI library，提供了許多豐富、美觀也實用的 component ，大部分的 component 都提供了許多的客製化選項，但最大的缺點就在於，如果你想要的客製化無法透過這些選項達成，修改這些 component 會相當複雜。另外在引入 Ant design 時，也需要注意網站的大小問題，因為這樣一個強大的 library，同樣的也會使用較大的空間。
Bulma 是一個只包含 CSS 的 Framework，如果你只需要一點美觀、現成的樣式、排版，Bulma 是很好的選擇，並且因為是完全使用 CSS 的 Framework，可以與 React 很好的整合，只要使用 class name 就可以了。
植入網頁分析工具
想要取得網頁的使用者瀏覽人次資料，需要在網頁中植入分析工具，最常見的是 Google Analytics。
只要先在 Google Analytics 的介面中註冊並取得 tracking ID，然後照著 Next.js 官方提供的整合 Google Analytics 的範例 實作，便可以成功整合了。
部署網站
完成網站之後，必須部署網站，讓全世界都可以透過特定的網站瀏覽網站，我們可以透過 next.js 產出靜態網站的檔案，然後放上主機，或者是使用現成的服務託管，例如：github 提供的 gh-pages , now, netlify。
如果你的程式碼使用 github 做 git 版本控制的託管，那麼使用 gh-pages 是免費且最簡單的方案。安裝 npm 套件 gh-pages，在 package.json 的 npm scripts 中加入 deploy:github 指令。
{
...
"scripts": {
...
"deploy:github": "yarn export && touch out/.nojekyll && gh-pages -t -d out"
}
...
}在這個指令中會輸出靜態網站檔案到 /out 資料夾，然後創造一個檔案 out/.nojekyll 讓 github 可以成功部署這個檔案，最後下部署的指令。
如果你在網站中使用連結和託管圖片，必須額外設定 next.js 的設定檔。
設定完成之後，可以打開 gh-pages 的網站瀏覽網站，通常會是：
https://{github 帳號}.github.io/{repository 名稱}/然後可以把網址貼到 facebook 提供的 debugger ，可以預覽網誌分享的樣式，檢查先前設置的 open graph 有沒有正常，這樣就大功告成摟！
Source code
在這篇文章中提到的大部分的實作程式碼可以在這份 repository 中找到
