Hướng dẫn next js import html file - js tiếp theo nhập tệp html

Thêm văn bản in đậm TextAdd, thêm văn bản in nghiêng,

Thêm báo giá, thêm mã,

Chèn đường dẫn

Thêm một danh sách viên đạn, thêm một danh sách được đánh số, thêm một danh sách nhiệm vụ,

Đề cập trực tiếp đến người dùng hoặc TeamReference một vấn đề hoặc yêu cầu kéo

Thêm tiêu đề TextAdd Bold văn bản, thêm văn bản in nghiêng, thêm một danh sách viên đạn, thêm danh sách được đánh số, thêm một danh sách nhiệm vụ,

Khi ai đó truy cập thư mục gốc của tôi "https://example.com/" Tôi muốn hiển thị một tệp .html bình thường. (index.html) Làm thế nào tôi có thể làm điều đó với Next.js?

Tôi đã thực hiện một nghiên cứu và chỉnh sửa tệp cấu hình của mình như thế này,

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  rewrites: async () => {
    return [
      {
        source: "/public/myfile.html",
        destination: "/pages/api/myfile.js",
      },
    ];
  },
};

/pages/api/myFile.js

import fs from "fs";
const filename = "/index.html";

export default async function api(req, res) {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.write(await fs.readFileSync(filename, "utf-8"));
  res.end();
}

module.exports = nextConfig;

Nhưng tệp cấu hình này hiển thị trang .html của tôi ngay khi tôi nhấn URL này: https://example.com/index.html

hỏi ngày 6 tháng 4 lúc 15:45Apr 6 at 15:45

2

  rewrites: async () => [
    {
      source: "/",
      destination: "/index.html",
    },
  ],

Đã thêm cái này trên tệp.config.js tiếp theo của tôi (trong đối tượng NextConfig)

Tôi có một tệp index.html trên thư mục /công khai của tôi.

Đã trả lời ngày 6 tháng 4 lúc 16:38Apr 6 at 16:38

1

Ví dụ

• Xuất khẩu tĩnh

next export cho phép bạn xuất ứng dụng.JS tiếp theo của mình sang HTML tĩnh, có thể chạy độc lập mà không cần máy chủ Node.js. Nên chỉ sử dụng next export nếu bạn không cần bất kỳ tính năng nào không được hỗ trợ yêu cầu máy chủ.

Nếu bạn đang tìm cách xây dựng một trang web lai trong đó chỉ có một số trang được đặt trước HTML tĩnh, thì Next.js đã tự động thực hiện điều đó. Tìm hiểu thêm về tối ưu hóa tĩnh tự động và tái tạo tĩnh gia tăng.

next export

Cập nhật tập lệnh xây dựng của bạn trong package.json để sử dụng next export:

"scripts": {
  "build": "next build && next export"
}

Chạy npm run build sẽ tạo thư mục

import fs from "fs";
const filename = "/index.html";

export default async function api(req, res) {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.write(await fs.readFileSync(filename, "utf-8"));
  res.end();
}

module.exports = nextConfig;

next export xây dựng phiên bản HTML của ứng dụng của bạn. Trong thời gian

import fs from "fs";
const filename = "/index.html";

export default async function api(req, res) {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.write(await fs.readFileSync(filename, "utf-8"));
  res.end();
}

module.exports = nextConfig;

import fs from "fs";
const filename = "/index.html";

export default async function api(req, res) {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.write(await fs.readFileSync(filename, "utf-8"));
  res.end();
}

module.exports = nextConfig;

import fs from "fs";
const filename = "/index.html";

export default async function api(req, res) {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.write(await fs.readFileSync(filename, "utf-8"));
  res.end();
}

module.exports = nextConfig;

import fs from "fs";
const filename = "/index.html";

export default async function api(req, res) {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.write(await fs.readFileSync(filename, "utf-8"));
  res.end();
}

module.exports = nextConfig;

import fs from "fs";
const filename = "/index.html";

export default async function api(req, res) {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.write(await fs.readFileSync(filename, "utf-8"));
  res.end();
}

module.exports = nextConfig;

import fs from "fs";
const filename = "/index.html";

export default async function api(req, res) {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.write(await fs.readFileSync(filename, "utf-8"));
  res.end();
}

module.exports = nextConfig;

Đối với các kịch bản nâng cao hơn, bạn có thể xác định một tham số gọi là

  rewrites: async () => [
    {
      source: "/",
      destination: "/index.html",
    },
  ],

  rewrites: async () => [
    {
      source: "/",
      destination: "/index.html",
    },
  ],

CẢNH BÁO: Sử dụng

  rewrites: async () => [
    {
      source: "/",
      destination: "/index.html",
    },
  ],

0 để xác định các tuyến đường với bất kỳ trang nào được hỗ trợ

import fs from "fs";
const filename = "/index.html";

export default async function api(req, res) {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.write(await fs.readFileSync(filename, "utf-8"));
  res.end();
}

module.exports = nextConfig;

4 hiện đã bị bỏ qua và bị ghi đè. Chúng tôi khuyên bạn nên không sử dụng chúng cùng nhau.: Using

  rewrites: async () => [
    {
      source: "/",
      destination: "/index.html",
    },
  ],

0 for defining routes with any

import fs from "fs";
const filename = "/index.html";

export default async function api(req, res) {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.write(await fs.readFileSync(filename, "utf-8"));
  res.end();
}

module.exports = nextConfig;

4 powered page is now ignored and gets overridden. We recommend not to use them together.

Các tính năng được hỗ trợ

Phần lớn các tính năng cốt lõi tiếp theo cần thiết để xây dựng một trang web tĩnh được hỗ trợ, bao gồm:

• Các tuyến đường động khi sử dụng

  import fs from "fs";
  const filename = "/index.html";
  
  export default async function api(req, res) {
    res.setHeader("Content-Type", "text/html; charset=utf-8");
    res.write(await fs.readFileSync(filename, "utf-8"));
    res.end();
  }
  
  module.exports = nextConfig;
  

  4
• Mở trước với

    rewrites: async () => [
      {
        source: "/",
        destination: "/index.html",
      },
    ],
  

  5
• Tải trước JavaScript
• Nhập khẩu động
• Bất kỳ tùy chọn kiểu dáng nào (ví dụ: các mô-đun CSS, STEPED-JSX)
• Dữ liệu phía máy khách tìm nạp

• import fs from "fs";
  const filename = "/index.html";
  
  export default async function api(req, res) {
    res.setHeader("Content-Type", "text/html; charset=utf-8");
    res.write(await fs.readFileSync(filename, "utf-8"));
    res.end();
  }
  
  module.exports = nextConfig;
  

  3

• import fs from "fs";
  const filename = "/index.html";
  
  export default async function api(req, res) {
    res.setHeader("Content-Type", "text/html; charset=utf-8");
    res.write(await fs.readFileSync(filename, "utf-8"));
    res.end();
  }
  
  module.exports = nextConfig;
  

  4
• Tối ưu hóa hình ảnh bằng trình tải tùy chỉnh

Các tính năng không được hỗ trợ

Các tính năng yêu cầu máy chủ Node.js hoặc logic động không thể được tính toán trong quá trình xây dựng, không được hỗ trợ:

• Tối ưu hóa hình ảnh (Trình tải mặc định)
• Định tuyến quốc tế hóa
• Tuyến API
• Viết lại
• Chuyển hướng
• Tiêu đề
• Phần mềm trung gian
• Tái tạo tĩnh gia tăng

•   rewrites: async () => [
      {
        source: "/",
        destination: "/index.html",
      },
    ],
  

  8

•   rewrites: async () => [
      {
        source: "/",
        destination: "/index.html",
      },
    ],
  

  9

import fs from "fs"; const filename = "/index.html"; export default async function api(req, res) { res.setHeader("Content-Type", "text/html; charset=utf-8"); res.write(await fs.readFileSync(filename, "utf-8")); res.end(); } module.exports = nextConfig; 7

Có thể sử dụng API

import fs from "fs";
const filename = "/index.html";

export default async function api(req, res) {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.write(await fs.readFileSync(filename, "utf-8"));
  res.end();
}

module.exports = nextConfig;

import fs from "fs";
const filename = "/index.html";

export default async function api(req, res) {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.write(await fs.readFileSync(filename, "utf-8"));
  res.end();
}

module.exports = nextConfig;

• import fs from "fs";
  const filename = "/index.html";
  
  export default async function api(req, res) {
    res.setHeader("Content-Type", "text/html; charset=utf-8");
    res.write(await fs.readFileSync(filename, "utf-8"));
    res.end();
  }
  
  module.exports = nextConfig;
  

  7 không thể được sử dụng cùng với

  import fs from "fs";
  const filename = "/index.html";
  
  export default async function api(req, res) {
    res.setHeader("Content-Type", "text/html; charset=utf-8");
    res.write(await fs.readFileSync(filename, "utf-8"));
    res.end();
  }
  
  module.exports = nextConfig;
  

  3 hoặc

  import fs from "fs";
  const filename = "/index.html";
  
  export default async function api(req, res) {
    res.setHeader("Content-Type", "text/html; charset=utf-8");
    res.write(await fs.readFileSync(filename, "utf-8"));
    res.end();
  }
  
  module.exports = nextConfig;
  

  4 trên bất kỳ trang nào. Nếu bạn có các tuyến đường động, thay vì sử dụng

  import fs from "fs";
  const filename = "/index.html";
  
  export default async function api(req, res) {
    res.setHeader("Content-Type", "text/html; charset=utf-8");
    res.write(await fs.readFileSync(filename, "utf-8"));
    res.end();
  }
  
  module.exports = nextConfig;
  

  4, bạn sẽ cần định cấu hình tham số

    rewrites: async () => [
      {
        source: "/",
        destination: "/index.html",
      },
    ],
  

  0 trong tệp

    rewrites: async () => [
      {
        source: "/",
        destination: "/index.html",
      },
    ],
  

  1 của mình để cho nhà xuất khẩu biết các tệp HTML nào sẽ xuất ra.
• Khi

  import fs from "fs";
  const filename = "/index.html";
  
  export default async function api(req, res) {
    res.setHeader("Content-Type", "text/html; charset=utf-8");
    res.write(await fs.readFileSync(filename, "utf-8"));
    res.end();
  }
  
  module.exports = nextConfig;
  

  7 được gọi trong quá trình xuất, các trường next export0 và next export1 của tham số next export2 của nó sẽ là các đối tượng trống, vì trong quá trình xuất, không có máy chủ nào chạy.

• import fs from "fs";
  const filename = "/index.html";
  
  export default async function api(req, res) {
    res.setHeader("Content-Type", "text/html; charset=utf-8");
    res.write(await fs.readFileSync(filename, "utf-8"));
    res.end();
  }
  
  module.exports = nextConfig;
  

  7 sẽ được gọi trên mọi điều hướng phía khách hàng, nếu bạn chỉ muốn tìm nạp dữ liệu theo thời gian xây dựng, hãy chuyển sang

  import fs from "fs";
  const filename = "/index.html";
  
  export default async function api(req, res) {
    res.setHeader("Content-Type", "text/html; charset=utf-8");
    res.write(await fs.readFileSync(filename, "utf-8"));
    res.end();
  }
  
  module.exports = nextConfig;
  

  3.will be called on every client-side navigation, if you'd like to only fetch data at build-time, switch to

  import fs from "fs";
  const filename = "/index.html";
  
  export default async function api(req, res) {
    res.setHeader("Content-Type", "text/html; charset=utf-8");
    res.write(await fs.readFileSync(filename, "utf-8"));
    res.end();
  }
  
  module.exports = nextConfig;
  

  3.

• import fs from "fs";
  const filename = "/index.html";
  
  export default async function api(req, res) {
    res.setHeader("Content-Type", "text/html; charset=utf-8");
    res.write(await fs.readFileSync(filename, "utf-8"));
    res.end();
  }
  
  module.exports = nextConfig;
  

  7 nên tìm nạp từ API và không thể sử dụng các thư viện cụ thể của Node.js hoặc hệ thống tệp như

  import fs from "fs";
  const filename = "/index.html";
  
  export default async function api(req, res) {
    res.setHeader("Content-Type", "text/html; charset=utf-8");
    res.write(await fs.readFileSync(filename, "utf-8"));
    res.end();
  }
  
  module.exports = nextConfig;
  

  3 có thể.

Chúng tôi khuyên bạn nên di chuyển đến

import fs from "fs";
const filename = "/index.html";

export default async function api(req, res) {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.write(await fs.readFileSync(filename, "utf-8"));
  res.end();
}

module.exports = nextConfig;

import fs from "fs";
const filename = "/index.html";

export default async function api(req, res) {
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.write(await fs.readFileSync(filename, "utf-8"));
  res.end();
}

module.exports = nextConfig;

Nhập JS HTML tiếp theo như thế nào?

JS tiếp theo có sử dụng HTML không?

Tại sao JS tiếp theo không có chỉ mục HTML?

JS tiếp theo không tốt cho?