Nghiệp

Viết tường mình ra từng tý nó như vầy thôi:

 # Original
 const model = require(path.join(__dirname, file))(sequelize, Sequelize.DataTypes);

# Explain
const filePath = path.join(__dirname, file);
const modelFn = require(filePath);
const model = modelFn(sequelize, Sequelize.DataTypes);

Palenight Theme + color Mild Contrast khá đẹp và trực quan.

Bạn phải pass CarouselRef vào useRef để biến slider nhận type, ngoài ra slider.current có thể null nên cần check null trước khi .next().

Cách 1: Dùng non-null assertion để nói dối slider.current là luôn luôn non-null. Ngắn gọn nhưng cẩn thận khi dùng, bởi có thể 1 lý do nào đó slider bị destroy, unmount,...

import { CarouselRef } from "antd/lib/carousel";
const slider = useRef<CarouselRef>(null!);

Cách 2: Cần check null trước khi dùng

import { CarouselRef } from "antd/lib/carousel";
const slider = useRef<CarouselRef>(null);
...
 onClick={() => {
     if (slider.current) {
         slider.current.next();
     }
 }}
...

Phân vẫn giữa ReactJs và ASP.NET thì quá khập khiễng, 1 cái chỉ là Frontend và 1 cái là Web Framework.
Như bạn đã có kinh nghiệm React và kết hợp với xu hướng hiện tại cũng như tương lai việc dùng cả 2 trong 1 dự án không vấn đề gì cả. Trong đó ASP.NET đóng vai trò làm Backend API thôi còn Frontend vẫn là React là tốt nhất. Backend API có thể là Restful hoặc GraphQL.
Nếu thực sự team bạn đã có người kinh nghiệm ASP.NET thì nên chọn nó không thì vẫn có nhiều lựa chọn thay thế đáng quan tâm như Go, Nodejs, PHP,...

nextConfig đặt sai chỗ, hiện tại nó nằm trong withPlugins như là 1 plugin, sửa lại như:

module.exports = withPlugins(
  [
   // Plugins
  ],
  {
    async redirects() {
      return [
        {
          source: '/product/:slug*',
          destination: '/:slug*',
          permanent: true,
        },
      ];
    },
  },
);

Ngoài ra khuyên bạn nên tách ra biến nextConfig và ngắn typing suggest tốt hơn như:

/**
 * @type {import('next').NextConfig}
 **/
const nextConfig = {
  poweredByHeader: false,
  // async redirect()
};

module.exports = withPlugins(
  [
   // Plugins
  ],
  nextConfig
);

Mặc định VSCode có IntelliSense để hỗ trợ nhưng chưa đủ, chỉ một vài ngôn ngữ phổ biến.
Gợi ý lệnh tốt nhất là dùng Typescript, nhưng đối với newbie thì TS có lẽ hơi khó chưa cần dùng ngay từ đầu.
Có một số Extension VSCode tạm ổn để suggest, bạn có thể search từ khóa IntelliSense và cài đặt theo ngôn ngữ, thư viện,... đang dùng. https://marketplace.visualstudio.com/search?term=IntelliSense&target=VSCode&category=All categories&sortBy=Relevance.
Ngoài ra có https://www.tabnine.com/install/vscode là tiện ích mạnh nhất, nhưng hơi tốn CPU bạn có thể cân nhắc.

Các ứng dụng SPA bây giờ hầu như mỗi lần build đều đã tạo unique id rồi, nhưng vẫn bị vấn đề cache.
Bởi vì trình duyệt nó cache html source nên dù có unique file build vẫn bị cache như thường thôi. Cách giải quyết là nói cho trình duyệt biết rằng riêng cái html source thì mày không được cache bằng cách thêm:

• Meta html <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>, cách dễ làm nhất, bỏ qua cách 2 bên dưới.
• Hoặc từ webserver như nginx, apache,... trả về Header Cache-Control: no-cache, no-store, must-revalidate

p/s: Thật ra cũng chỉ cần no-cache hoặc no-store thôi là đủ rồi

Google map cũng cấp API để lấy location (lat/long) theo một địa chỉ.
Ví dụ:

   const geocoder = new google.maps.Geocoder();
   geocoder.geocode(
        {
          address: "Đây là địa chỉ bằng string của bạn",
        },
        (results, status) => {
          if (status == google.maps.GeocoderStatus.OK) {
            const {location} = results[0].geometry;

            // location chính là thứ bạn cần, đem gán vào react-google-maps
          }
        },
   );

Bỏ attribute name của input/select thì submit form sẽ không gửi lên.

Có thể lib bạn đang dùng đã hỗ trợ pure ESM nên mới bị lỗi như thế.