Setting a new Next.js Apps

How to deploy your Next.js apps on Vercel.

建立一個新的 NEXT.JS 專案

本教學使用 pnpm 作為套件管理工具，如果你使用 npm 或 yarn 也可以參考此教學。

開始建立

如果已經有資料夾，並且處在資料夾中


pnpm create next-app .

如果尚未有資料夾


pnpm create next-app project-name

填入環境設定

按照自身需求選擇

開始環境設定

使用 volta 管理 npm 版本 (非必要)

假設本次專案 node 版本需求為 v20，我想要讓每一位執行此專案的人員都能夠使用相同的 node 版本。

如果電腦尚未有 volta，請先安裝！


curl https://get.volta.sh | bash

利用 volta 安裝 node@20


volta install node@20

將此專案固定為 node@20


volta pin node@20

如果在 package.json 中看到這段，就表示完成！之後每次打開此專案都固定將 node 版本調整至 v20

package.json


"volta": {
  "node": "20.11.0"
}

檢查 Next.js 是否成功運行

先下載 package


pnpm install

運行


pnpm dev

點開 http://localhost:3000 看看是否有成功運行，如果有，恭喜你！你已經成功建立一個 Next.js 專案。

設置 Eslint & Prettier (非必要)

這裡皆可以按照個人需求設定

安裝 Eslint & Prettier


pnpm i prettier eslint

下載相關套件


pnpm i eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier prettier-plugin-tailwindcss

專案中應該會有 .eslintrc.json 將他改名成 .eslintrc.js 貼上這設定

.eslintrc.js


module.exports = {
  root: true,
  plugins: ["prettier", "@typescript-eslint"],
  extends: [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
  ],
  parser: "@typescript-eslint/parser",
  rules: {
    "no-var": "off",
    "no-unused-vars": "off",
    "no-console": "warn",
    "react/react-in-jsx-scope": "off",
    "react/display-name": 1,
    "react/jsx-filename-extension": [1, { extensions: [".ts", ".tsx"] }],
    "prettier/prettier": "warn",
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/no-unused-vars": "warn",
  },
};

添加 .eslintignore 把 .gitignores 內容複製貼上
新增 .prettierrc.js

.prettierrc.js


module.exports = {
  tabWidth: 2,
  printWidth: 80,
  endOfLine: "auto",
  arrowParens: "avoid",
  trailingComma: "es5",
  proseWrap: "preserve",
  quoteProps: "as-needed",
  semi: true,
  useTabs: false,
  singleQuote: true,
  jsxSingleQuote: true,
  bracketSpacing: true,
  bracketSameLine: false,
  plugins: ["prettier-plugin-tailwindcss"],
};

添加 .prettierignore 把 .gitignores 內容複製貼上
在 package.json 中 "scripts" 裡添加

package.json


"scripts": {
  // 本來的內容
  "lint": "./node_modules/.bin/eslint --ext ./src && ./node_modules/.bin/prettier --check ./src",
  "lint:fix": "./node_modules/.bin/eslint --fix --ext ./src && ./node_modules/.bin/prettier --write ./src"
},

設置 husky & lint-staged

下載 husky


pnpm i husky

設置 husky 預設檔


pnpm dlx husky-init

點進 .husky/pre-commit 更改最後一行為


pnpm dlx lint-staged

下載 lint-staged


pnpm i lint-staged

在 package.json 中 "scripts" 裡添加

package.json


{
  // 本來的內容
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": "eslint --fix",
    "src/**/*.{js,jsx,,ts,tsx,css,md}": "prettier --write"
  },
  "husky": {
    "hooks": {
      "pre-commit": "pnpm lint-staged"
    }
  }
}

補充

如果 global.css 中 @tailwind 的部分會出現 Unknown at rule @tailwind 的 Warning 的話，將這段更改寫法如下：

global.css


@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";