การติดตั้ง Next.js ร่วมกับ TypeScript

วิธีการการติดตั้ง Next.js โดยติดตั้งร่วมกับ TypeScript รวมถึง Libraries อื่นๆ เพื่อเริ่มต้นพัฒนา Project อาทิเช่น Tailwind, MaterialUI เป็นต้น ตามรายละเอียดด้านล่างนี้

สร้าง Project (ใช้ Typescript)

npx create-next-app@latest --typescript
# หรือ
yarn create next-app --typescript
# หรือ
pnpm create next-app --typescript

ติดตั้ง Material UI และ Material Icons

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

ติดตั้ง React-icons

npm install react-icons

ติดตั้ง Emotion

ไว้เขียน CSS ร่วมกับ JavaScript

npm install @emotion/react @emotion/styled @emotion/server @emotion/cache

ติดตั้ง Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

สร้างไฟล์ tailwind.config.js และ postcss.config.js

npx tailwindcss init -p

ตั้งค่า Tailwind CSS

เพิ่มเส้นทางไปยังไฟล์เทมเพลตทั้งหมดในไฟล์ tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,css}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

เพิ่มคำสั่ง Tailwind ไปยัง CSS หลัก

โดยจะเพิ่มที่ไฟล์ globals.css

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