在前面我們建構了很多 API 的功能與 SaaS 服務供應商的整合，現在終於來到 Web 的部分了。

在這邊我選用的是 React 陣營的 Next.js ，在經過幾次試用之後，感覺 React 的環境更適合快速開發與建構幾個常見情境的應用。

因為技術選擇不只是只有比較技術導向的細節，還要將社群能量納入其中，才不會有可能遇到核心開發很快速，但是社群的能量不足以把整個生態系帶著走，遺留了許多需要有志之士認領加速推進的套件。

所以我們先初始化了專案環境，並且使用 create-next-app 快速建制出一個設定好的初始架構。

gh repo create BillWilson/ReadCast-Web --add-readme --license mit --private

npx create-next-app@latest nextjs-blog --use-npm
npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

這邊為了可以快速建構出基本且統一風格的 UI ，我選擇了使用 chakra-ui ，他們提供了開箱即用的元件庫，以及 CSS-IN-JS 解決方案。

伴隨著詳細且明確的文件，就算是半路出家來學習開發 React 的人也可以有著很明確的指示去學習。

依照著官方的教學很快就可以設定完成。

// _app.js
import '@/styles/globals.css'
import {ChakraProvider} from '@chakra-ui/react'

export default function App({Component, pageProps}) {
  return (
      <ChakraProvider>
        <Component {...pageProps} />
      </ChakraProvider>
  )
}

環境設定完之後，就可以開始開發了！