今天我們要來講如何做 Next 的環境建置,以及為 Next 的專案做技術選型,未來的程式範例以及專案實作都會以這個技術選型基礎為準喔!
Node.js: 首先需要 Node.js ,Next 官方文件要求 Node.js 需要有 16.14 以上,這邊可以直接裝最新的穩定版 18.17.1。
Next.js: 接著可以安裝我們最重要的 Next.js,因為我們要學習使用最新的 13.4 版本,因此直接裝 latest 版。
這裡建議直接用官方提供的 create-next-app
cli,省掉許多設定其他東西的步驟:
npx:
npx create-next-app@latest
yarn:
yarn create next-app
我個人比較習慣用 yarn
,會選下面的建立方式。
接著會跳出一堆選項,像是否啟用 TypeScript
、是否啟用 eslint、用什麼 router 方式建立程式等等,可以照自己習慣的選,下面會介紹我常使用的技術選型,供各位參考。
這邊介紹一下 next 的 route 結構。
next 的 route 是 file-system base,在特定資料夾下的檔案們就是一個個的 route,因此要建立 route 非常簡單,只要新增檔案就好。
但仍然有幾個檔案是必備的,這次我們要學習的是 app route ,根據官方文件,我們需要 /app folder (安裝時應該就有了),裡面至少需要:
現在還不需要知道這兩個頁面的意義,之後會介紹。
接著會需要建立幾個必要的資料夾:
做好這樣的準備,差不多就可以開始用 next 開發網站了! 其實還有許多東西,不過後面慢慢加就好。
明天會介紹 app route 的概念,正式進入 next 的開發!