Setup Next.js Project With Typescript + ESLint + Prettier + Ant Design

February 27, 2021 · 5 min read

Author

Intro
ติดตั้ง Next.js
ติดตั้ง ESLint และ Prettier
ติดตั้ง TypeScript
ติดตั้ง Ant Design
ทดสอบการทำงาน
Project ตัวอย่างบน GitHub

Intro

บทความนี้จะเป็นการติดตั้ง Next.js ที่เป็น TypeScript รวมกับ ESLint Prettier และ Ant Design โดย ESLint จะเป็น Linter ที่จะแนะนำให้เราเขียนโค้ดตามมาตรฐาน ส่วน Prettier คือตัวช่วยที่ในการเขียนโค้ดเราดูสวยมากขึ้น อ่านง่ายมากขึ้น และยังช่วยในการจัดฟอร์แมตอัตโนมัติ และสุดท้าย Ant Design คือ Frontend Framework ที่ช่วยให้นักพัฒนาออกแบบ UI ได้ สวยงาม ง่ายและรวดเร็ว โดยมี Component ต่าง ๆ มากมายให้เลือกใช้เยอะมาก

ติดตั้ง Next.js

CLI

yarn create next-app next.js-with-typescript-eslint-prettier-ant-design

ติดตั้ง ESLint และ Prettier

CLI
yarn add --dev eslint prettier eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier eslint-plugin-jsx-a11y

สร้าง Cofig Files สำหรับ ESLint
CLI
```
touch .eslintrc.js .prettierrc
```

กำหนด .prettierrc ดังนี้

.prettierrc
{
  "semi": false,
  "tabWidth": 2,
  "printWidth": 140,
  "singleQuote": true,
  "trailingComma": "none",
  "jsxBracketSameLine": true
}

กำหนด .eslintrc.js ดังนี้

.eslintrc.js
module.exports = {
    root: true, // Make sure eslint picks up the config at the root of the directory
    parserOptions: {
        ecmaVersion: 2020, // Use the latest ecmascript standard
        sourceType: 'module', // Allows using import/export statements
        project: './tsconfig.json',
        createDefaultProgram: true,
        ecmaFeatures: {
            jsx: true // Enable JSX since we're using React
        }
    },
    settings: {
        react: {
            version: 'detect' // Automatically detect the react version
        }
    },
    env: {
        browser: true, // Enables browser globals like window and document
        amd: true, // Enables require() and define() as global variables as per the amd spec.
        node: true // Enables Node.js global variables and Node.js scoping.
    },
    extends: [
        'eslint:recommended',
        'plugin:react/recommended',
        'plugin:jsx-a11y/recommended',
        'plugin:prettier/recommended' // Make this the last element so prettier config overrides other formatting rules
    ],
    rules: {
        'prettier/prettier': ['error', {}, { usePrettierrc: true }]
    }
};

สร้าง Ignore Files ของ ESLint
1. คำสั่งสำหรับสร้างไฟล์
  CLI
```
touch .eslintignore .prettierignore
```
2. เพิ่ม Folders หรือ Files ไว้ใน .eslintrc.js และ .prettierrc ตามต้องการเพื่อไม่ให้ ESLint และ Prettier สนใจ
  .eslintrc.js และ .prettierrc
```
# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build
```
  Tips
  กรณีต้องการใช้ .gitignore แทนให้เพิ่มคำสั่งนี้ตอนรัน eslint --fix . --ignore-path ./.gitignore

กำหนดคำสั่งสำหรับการสั่งรัน
1. ที่ไฟล์ package.json เพิ่มส่วนของ lint และ format ดังนี้
  package.json
```
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint --fix .",
    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
}
```
2. ทดสอบรันคำสั่ง yarn lint หรือ yarn format

สำหรับ Next.js ให้เพิ่ม Rules ที่ไฟล์ .eslintrc.js ดังนี้

.eslintrc.js
rules: {
     'jsx-a11y/anchor-is-valid': [
         'error',
         {
             components: ['Link'],
             specialLink: ['hrefLeft', 'hrefRight'],
             aspects: ['invalidHref', 'preferButton']
         }
     ],
     '@typescript-eslint/explicit-function-return-type': 0,
     'react-hooks/rules-of-hooks': 0,
     'react/react-in-jsx-scope': 0,
     'react/prop-types': 0,
     'react/jsx-filename-extension': 0,
     'react/destructuring-assignment': 0,
     'no-nested-ternary': 0,
     'array-callback-return': 0,
     'consistent-return': 0,
     'no-param-reassign': 0,
     'lines-between-class-members': 0
}

ติดตั้ง TypeScript

CLI
yarn add --dev typescript @types/react @types/node @typescript-eslint/eslint-plugin @typescript-eslint/parser

สร้างไฟล์ Config ของ TypeScript
CLI
```
touch tsconfig.json
```

กำหนดค่าของ tsconfig.json ดังนี้

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

แก้ไขไฟล์ .eslintrc.js เพิ่ม

.eslintrc.js
module.exports = {
   plugins: ['react', '@typescript-eslint'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ...,
     project: './tsconfig.json',
     ...
   }
};

จากนั้นเพิ่มในส่วนของ Extends

.eslintrc.js
// ...
{
    extends: [
       'plugin:@typescript-eslint/eslint-recommended',
       'plugin:@typescript-eslint/recommended',
       'next',
       'next/core-web-vitals'
    ]
}

ติดตั้ง Ant Design

CLI
yarn add --dev antd @ant-design/icons babel-plugin-import less next-plugin-antd-less

สร้างไฟล์สำหรับการตั้งค่า
CLI
```
touch .babelrc.js next.config.js styles/antd-custom.less
```

ไฟล์ styles/antd-custom.less กำหนด Custom style ของ Ant Design ดังนี้

styles/antd-custom.less
@import '~antd/lib/style/themes/default.less';

@primary-color: #910079; // primary color for all components
@link-color: #1890ff; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 16px; // major text font size
@font-family: Prompt, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 8px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers

// LINK
@link-color: #405887;
@link-hover-color: #1c2539;
@link-active-color: #848484;
@link-decoration: none;
@link-hover-decoration: underline;
@link-focus-decoration: underline;
@link-focus-outline: 0;

// Layout
@layout-body-background: #f0f2f5;
@layout-header-background: #b80b6b;

ไฟล์ .babelrc.js กำหนดค่าดังนี้

.babelrc.js
module.exports = {
   presets: [['next/babel']],
   plugins: [['import', { libraryName: 'antd', style: true }]]
}

ไฟล์ next.config.js กำหนดค่าดังนี้

next.config.js
/* eslint-disable */
const withAntdLess = require('next-plugin-antd-less');

module.exports = withAntdLess({
  lessVarsFilePath: './styles/antd-custom.less',
  cssLoaderOptions: {
    //   https://github.com/webpack-contrib/css-loader#object
    //
    //   sourceMap: true, // default false
    //   esModule: false, // default false
    //   modules: {
    //     exportLocalsConvention: 'asIs',
    //     exportOnlyLocals: true,
    //     mode: 'pure',
    //     getLocalIdent: [Function: getCssModuleLocalIdent]
    //   }
  },
  // Other Config Here...

  webpack(config) {
    return config;
  }
});

note

อย่าลืมเปลี่ยนนามสกุลไฟล์ในโฟลเดอร์ pages เป็น ts และ tsx

ทดสอบการทำงาน

ทดสอบสำหรับโหมด Development

CLI

next dev

ทดสอบเข้าผ่าน URL http://localhost:3000

Project ตัวอย่างบน GitHub

https://github.com/kongvut/example-next-js-with-typescript-eslint-prettier-ant-design

Hey 👋.
You can now buy me a coffee!
ช่วยบริจาคสำหรับค่า `กาแฟ` คลิก! ☕️

Table of contents

Intro​

ติดตั้ง Next.js​

ติดตั้ง ESLint และ Prettier​

ติดตั้ง TypeScript​

ติดตั้ง Ant Design​

ทดสอบการทำงาน​

Project ตัวอย่างบน GitHub​