Setup dự án Nextjs với Typescript, ESLint, Prettier, TailwindCSS

Setup dự án Nextjs với Typescript, ESLint, Prettier, TailwindCSS

react

javascript

Hiện nay Nextjs cũng khá là phổ biến đối với anh em đang làm React vì rất dễ tiếp cận giường như là giống hoàn toàn như anh em đang làm với React chỉ cần hiểu thêm về một số khái niệm như là: static + server rendering, router... là được (trang web này mình cũng sử dụng nextjs để build mục đích hỗ trợ tốt cho SEO).

Zero config là một trong những ưu điểm của NextJS, bạn không cần phải config quá nhiều thứ vì nó đã tích hợp sẵn như không cần cài đặt typescript, không cần cài eslint, webpack, router... tất cả đã có sẵn và ở bài viết này mình sẽ hướng dẫn toàn bộ quá trình setup một dự án Nextjs với Typescript, ESLint, Prettier, TailwindCSS những nhằm để lưu lại kiến thức cho bản thân đồng thời chia sẽ cho anh em nào cần.

Mục lục

  1. Khởi tạo dự án Nextjs với Typescript
  2. Cài đặt Eslint
  3. Cài đặt Prettier
  4. Cài đặt TailwindCSS

Khởi tạo dự án Nextjs với Typescript

Mặc định cú pháp cài đặt Nexjts sẽ không cài sẵn Typescript vì vậy anh em phải thêm cài flag là --typescript:

npx create-next-app@latest --typescript

Sau khi cài đặt xong là coi như anh em đã có thể run lên xem thử bằng lệnh npm run dev được rồi.

Cài đặt Eslint

Lúc này Nextjs (từ phiên bản 11.0.0) cũng tích hợp sẵn eslint, anh em có thể chạy lệnh npm run lint để kiểm tra các lỗi khi code với plugin eslint-config-next, tuy nhiên thường mọi người sẽ cài đặt thêm cái plugin khác nữa để nghiêm ngặt và hỗ trợ tốt hơn, mọi người cài thêm các plugin sau:

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-next eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-unused-imports

Xem thêm các plugin khác tại đây Cài xong mọi người chỉnh file .eslintrc.json tại thư mục gốc thành nội dung như sau:

{ "env": { "browser": true, "es2021": true, "jest": true, "node": true }, "settings": { "react": { "version": "detect" } }, "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "next/core-web-vitals" ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 12, "sourceType": "module" }, "plugins": [ "@typescript-eslint", "prettier", "react", "react-hooks" ], "rules": { "react-hooks/rules-of-hooks": "error", "react-hooks/exhaustive-deps": "error", "react/prop-types": "off", "react/react-in-jsx-scope": "off", "@typescript-eslint/explicit-module-boundary-types": "off", "@typescript-eslint/no-empty-function": "off" } }

Cài đặt Prettier

Mặc định Nextjs chưa cài sẵn Prettier vì vậy anh em cài thêm package này vào nhé, ở bước cài eslint trên mình đã cài luôn các package cần thiết để eslint và prettier có thể hoạt động với nhau, bây giờ mọi người chỉ chạy mỗi lệnh sau:

npm i prettier -D

Sau đó bạn tạo file .prettierrc tại thư mục gốc và thêm vào nội dung sau để mỗi lần bấm lưu code nó sẽ tự format cú pháp cho bạn:

{ "semi": true, "trailingComma": "all", "singleQuote": true, "printWidth": 120, "tabWidth": 2, "endOfLine":"auto" }

Cài đặt TailwindCSS

Tích hợp TailwindCSS vào dự án Nextjs cũng rất là đơn giản, anh em có thể chạy lệnh sau:

npm install -D tailwindcss postcss autoprefixer

Tiếp theo anh em chạy tiếp lệnh sau:

npx tailwindcss init -p

Lệnh này sau khi chạy xong sẽ tạo ra thêm 2 file config có tên là postcss.config.jstailwind.config.js.Đây là file chúng ta sẽ config hoặc custommize tailwind theo ý của mình, do mỗi người có mỗi sở thích khác nhau nên dưới đây là file configtailwind.config.js sau khi code được 50% một dự án nhỏ, anh em có thể tham khảo hoặc tự mình config:

// eslint-disable-next-line @typescript-eslint/no-var-requires const plugin = require('tailwindcss/plugin'); // eslint-disable-next-line @typescript-eslint/no-var-requires const colors = require('tailwindcss/colors'); // console.log(colors); /* eslint-disable prettier/prettier */ module.exports = { //Configure Tailwind to remove unused styles in production purge: ['./pages/**/*.{js,ts,jsx,tsx}', './src/**/*.{js,ts,jsx,tsx}'], darkMode: 'class', mode: 'jit', theme: { colors: { ...colors, transparent: 'transparent', primary: { 50: '#e5eeff', 100: '#b3ccff', 200: '#80aaff', 300: '#4d88ff', 400: '#448aff', 500: '#0B66FF', 600: '#003cb3', 700: '#002b80', 800: '#001a4d', 900: '#001a4d', }, secondary: colors.yellow, neutral: colors.gray, }, extend: { borderColor: ['hover'], keyframes: { toastIn: { from: { opacity: 0, transform: 'translateX(calc(100% + 32px))' }, to: { opacity: 1, transform: 'translateX(0)' }, }, toastOut: { // from: { opacity: 1, transform: 'translateX(0)' }, to: { transform: 'translateX(calc(100% + 32px))', opacity: 0, }, }, }, animation: { // 0.5 delay 4s duration toast: 'toastIn ease 0.3s, toastOut linear 0.5s 4s forwards', }, }, minHeight: { 0: '0', '1/4': '25%', '1/2': '50%', 1: '200px', }, }, variants: { extend: {}, }, plugins: [ plugin(function ({ addBase, theme }) { addBase({ h1: { fontSize: theme('fontSize.3xl'), fontWeight: theme('fontWeight.bold') }, h2: { fontSize: theme('fontSize.2xl'), fontWeight: theme('fontWeight.bold') }, h3: { fontSize: theme('fontSize.xl'), fontWeight: theme('fontWeight.bold') }, }); }), //require('@tailwindcss/forms'), ], };

Tới đây là chưa xong việc config tailwind đâu nha anh em, bước tiếp theo anh em vào thư mục dự án Nextjs là styles sửa lại file globals.css, thường mình sẽ xoá hết code và chèn vào nội dung sau:

@tailwind base; @tailwind components; @tailwind utilities;

Bạn có thể ghi đè code tailwind bằng cách viết ở file này dưới các file trên là được, sau khi config xong nhứ chạy lại dự án Nextjs nhé. Tiếp theo công việc không thể thiếu khi code với TailwindCSS là phải cài thêm extension để hỗ trợ nhắc các tên class, anh em bấm vào link sau để tải nhé: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Vậy là xong, trong quá trình cài đặt anh em gặp lỗi hay có thắc mắc gì có thể để lại bình luận bên dưới nhé.Chúc anh em thành công!

Bài viết liên quan

MyTopic - Một cộng đồng, nơi mà mọi người có thể tìm hiểu, chia sẻ, hỏi đáp bất cứ điều gì mà bạn quan tâm.

Khám phá

Theo dõi bản tin chúng tôi

Nhập địa chỉ email để nhận các thông tin mới nhất hoặc thú vị từ chúng tôi.

© 2022 MyTopic.vn