跳至主要内容

Next.js - 專案建置

此筆記為 Next 13 experimental app directory 專案建置,關於 app directory 功能可參考 Next 13 Beta Docs 官方說明文件。

環境建置目標

  • Next.js 13 ( app directory )
  • TypeScript
  • Tailwind CSS
  • Prettier
  • ESLint

Next.js 13 安裝 ( app directory )

npx create-next-app@latest my-project --typescript --eslint

執行後會詢問一些設定 :

# 是否使用 TypeScript ? 選 Yes
Would you like to use TypeScript with this project? ... No / Yes

# 使否使用 ESLint 管理程式碼規則 ? 選 Yes
Would you like to use ESLint with this project? ... No / Yes

# 是否要使用 src 資料夾管理專案 ? 選 No
Would you like to use `src/` directory with this project? ... No / Yes

# 是否使用實驗性功能 : app direction ? 選 Yes
Would you like to use experimental `app/` directory with this project? ... No / Yes

# 註冊 import alias,輸入 @/*
What import alias would you like configured? ... @/*

Next.js 專案建立好後的檔案結構會是這樣 :

設定 next.config.js

next.config.js
const nextConfig = {
reactStrictMode: true,
experimental: {
appDir: true,
},
}

若在 create next app 時有選擇 use experimental app/ directory,next.config.js 會出現 experimental: { appDir: true }

此為 Next 13 實驗性功能,相關功能說明請參考 Next 13 Beta Docs

設定 tsconfig.json

tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"baseUrl": ".",
"paths": {
"@": ["."],
"@/*": ["./*"]
},
"typeRoots": ["node_modules/@types"]
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}

新增 baseUrlpathstypeRoots 的設定。

安裝 Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

設定 tailwind.config.js

next.config.js
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
}

設定 @tailwind 指令

app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

安裝 prettier-plugin-tailwindcss

說明 : 自動排序 Tailwind CSS class name 插件

npm install -D prettier prettier-plugin-tailwindcss

設定 prettier.config.js

prettier.config.js
module.exports = {
singleQuote: true,
semi: false,
singleAttributePerLine: true,
arrowParens: 'avoid',
tailwindConfig: './tailwind.config.js',
plugins: ['prettier-plugin-tailwindcss'],
}

可以依照自己格式化程式碼的喜好修改 Prettier 設定。


警告

初學 Next.js 若筆記有不足之處請見諒,後續在專案環境上有碰到任何問題會再更新此筆記。