設定

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

• 環境設定 (吳濟聰老師進階web程式設計教材)
  • Basic explanation about the next.config.js file

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

<aside> 📢

通常小組會使用同一個專案，所以，只要組長建立新專案並且同步到github上，大家可以clone專案下來，不需要每位同學都產生一個新專案

</aside>

產生新專案

• How to set up a new Next.js project

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

npx create-next-app

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

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

npx create-next-app .

執行之後會問一些問題:

<aside> 💡

如果忘了「.」才會問專案名稱，如果有「.」就不會問第一個問題

</aside>

底線的部分是老師推薦的選項

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

選後就會產生一個專案。

如果npm版本比較舊，會看到上面的提示，請更新npm。