Next.js 14 環境設置、建立、專案結構
建立專案
🔗環境需先安裝 Node.js，之後開啟終端就能藉由
npx create-next-app@latest
建立 Next.js 專案。(此方式能快速建立與設置 Next 專案所需與預設的檔案。)
專案初始過程會出現以下提示:
TerminalWhat 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 to use `src/` directory? No / Yes Would you like to use App Router? (recommended) No / Yes Would you like to customize the default import alias (@/*)? No / Yes
-
TypeScript 的選擇取決於語言熟悉度，對於從後端轉為全端的我基本上不太熟悉JavaScript，而 TypeScript 提供靜態類型檢查，可以在開發過程中捕捉潛在的錯誤，提高代碼的穩定性和可讀性，建議選擇。
-
ESLint 是一個用於檢查和修復 JavaScript 代碼風格和錯誤的開源工具。非常好用，建議選擇。
-
Tailwind CSS 可依據需求使否需要。
-
選擇
src/directory 會在原本程式的資料夾上方增加一個src/，也就是多一層資料夾的意思，可以將程式碼與設定檔分開，對於專案分類比較清晰，建議使用。 -
customize the default import alias (@/*) 為了方便引用特定的目錄或模塊，可以透過設置自定義的導入別名（import alias）來簡化導入語句，也就是藉由 "@" 或自定義符號代替過長的絕對路徑，可依據需求選擇。
建立完成後，專案結構如下:
package.json
🔗打開配置文件，可以看到生產環境與開發環境所需要的庫都已包含在專案內。
dependencies & devDependencies
🔗JSON "dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.1.0"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.1.0"
}
scripts
🔗JSON "scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
next dev:啟動 Next.js 專案開發模式，支援熱模塊替換（Hot Module Replacement，HMR），自動刷新頁面。
next build:在部署到生產環境之前，運行以生成優化過的代碼。
next start:在應用程序已經構建完成並準備好佈署時，運行專案。
next lint:在專案中設定 ESLint。
src/app
🔗app 為主要放置代碼區域包含css與tsx檔案，因初始專案時選擇使用src/ 目錄，所以上方會多一層src/，後續若要增加API，可以在src/底下建立api目錄，個人是認為這樣的分類方式比較有條理。
啟動專案
🔗使用
npm run dev
開啟瀏覽器就能看到專案畫面。
結論
🔗此篇記錄了 Next 專案結構與如何啟動專案，後續會分享文件系統路由機制，包括如何創建和導航頁面。
Alvin
軟體工程師，喜歡金融知識、健康觀念、心理哲學、自助旅遊與系統設計。
相關文章
留言區 (0)
尚無留言