【Next.js】Day 1 – 新增專案

原本一開始使用 create react app（CRA）開發，結果才過沒多久就因為 Tailwind 無法使用而轉到 Next.js

原本 React 就不慎熟悉，可以想見 Next.js 之路大概會一路跌跌撞撞，就愈神殺神、見鬼殺鬼囉!!

Terminal 輸入指令就可以新增 Next.js project 囉~

create-next-app@latest

輸入指令後會逐步出現一些選項

What is your project named?
- 填寫專案名稱
Would you like to use TypeScript? No / Yes
- 即使選了 Yes 也不用擔心只能用 TypeScript，在專案裡面還是可以使用 .js，可以看到設定只有當副檔名為 .ts 或是 .tsx 時才會進行型別檢查。

Would you like to use ESLint? No / Yes
- 是常見的 Linter，用來檢查程式碼是否符合規則，例如最後需不需要加分號；使否強制使用單引號等。
Would you like to use Tailwind CSS? No / Yes
- 非常靈活彈性的 CSS 框架
Would you like to use src/ directory? No / Yes
- 選 Yes 的資料夾結構會是
  root → src → app
  root → src → components
  root → src → utils
  root → src → styles
  選 No 的話則是少了 src 資料夾。
  我自己是選 Yes，覺得將所有 application 的程式碼都擺在都擺在 src 目錄下比較乾淨。

Would you like to use App Router? (recommended) No / Yes
- Next.js 有分 App Router 跟 Pages Router，新的都建議使用 App Router 了
Would you like to customize the default import alias (@/*)? No / Yes
- import 的路徑設置別名，這樣 import 路徑就不用帶這麼長

安裝完 Terminal 下指令就可以開啟網站囉~

npm run dev

除了互動式安裝，還可以選擇手動安裝