設定

首先,先安裝開發環境與開發工具,建議安裝VS Code(也可使用自己習慣的開發環境),另外,因為是基於React,所以,也需要安裝Node.js,因為是多人開發的環境,會需要安裝git

Next.js可以使用javascript開發,也可以使用typescript開發,我們先以javascript為例,等大家熟悉之後,再介紹如何使用typescript開發。

產生新專案

安裝好之後,可以新增一個新的資料夾,並在terminal產生一個新的Next.js專案

npx create-next-app

create-next-app會詢問專案名稱,並且新增一個專案的檔案夾,將檔案放在檔案夾下,如果利用vscode,就要重新打開檔案夾,才能正確的執行專案。

如果要把檔案產生在現在的檔案夾下:

npx create-next-app .

執行專案

npm run dev

使用既有專案

如果在github/gitlab上已經有專案可以使用,就不必產生一個新的專案。首先,新增一個目錄(檔案夾),例如: project,在project目錄下,利用git clone下載既有的專案

git clone <https://github.com/fju-benwu/agile2022.git>

下載既有專案後,因為一般而言都不會把已安裝的套件上傳到github/gitlab,所以,執行前必須要進行安裝

npm install

安裝後,再執行專案

npm run dev

檔案結構