🥰Sử dụng next.config chuyển localhost:3000 sang http://localhost:3000/en cách hay nhất (ok)

next.config.js

/** @type {import('next').NextConfig} */
module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        destination: '/en', // hoặc '/vi' tùy ngôn ngữ mặc định
        permanent: true, // permanent: false: Dùng redirect tạm thời (status code 307). Nếu bạn muốn redirect vĩnh viễn (301), đặt thành true.
      },
    ];
  },
};

Để tự động chuyển hướng từ http://localhost:3000 sang http://localhost:3000/en hoặc http://localhost:3000/vi trong Next.js, bạn có thể sử dụng tính năng redirects() trong file next.config.js.

Dưới đây là cách cấu hình để làm điều đó:

✅ Cách làm với module.exports trong next.config.js

jsCopyEdit/** @type {import('next').NextConfig} */
module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        destination: '/en', // hoặc '/vi' tùy ngôn ngữ mặc định
        permanent: false,
      },
    ];
  },
};

👉 Giải thích:

  • source: '/': Trang gốc (http://localhost:3000)

  • destination: '/en': Ngôn ngữ mặc định (có thể thay bằng /vi nếu bạn muốn tiếng Việt làm mặc định)

  • permanent: false: Dùng redirect tạm thời (status code 307). Nếu bạn muốn redirect vĩnh viễn (301), đặt thành true.


🔄 Nếu bạn muốn chuyển hướng theo ngôn ngữ trình duyệt?

Bạn sẽ cần xử lý điều này bằng middleware (middleware.ts) trong Next.js 13+ hoặc thủ công trong _middleware.ts nếu dùng Next.js 12.

Bạn muốn mình hướng dẫn thêm phần tự động detect ngôn ngữ trình duyệt không, hay bạn chỉ cần redirect tĩnh //en hoặc /vi?

Last updated

Was this helpful?