Tiếp theo JS kết xuất chuỗi HTML

Gọi tất cả Tiếp theo. nhà phát triển js. Bạn có ước mình có thể làm được nhiều hơn với phần mềm trung gian không? . js được tạo tĩnh ở cạnh dựa trên dữ liệu định vị địa lý?

Bây giờ bạn có thể. Với tiếp theo. js Phần mềm trung gian nâng cao. Nó được hỗ trợ bởi Netlify Edge Functions, hoàn toàn mới và chỉ có trên Netlify

Trong hướng dẫn này, tôi chỉ cho bạn cách sử dụng Next. js Advanced Middleware trên Netlify để chặn yêu cầu đối với trang được tạo trước tĩnh và viết lại phản hồi HTML để thay đổi một số văn bản và đạo cụ trang dựa trên dữ liệu vị trí địa lý

Triển khai mã hướng dẫn cho Netlify

Đây là trang web demo tôi đã tạo trước đó. Nếu bạn muốn tham gia ngay lập tức, bạn có thể rẽ nhánh kho lưu trữ mã của hướng dẫn trên GitHub và triển khai trang web vào tài khoản Netlify của riêng bạn sau vài giây. Nhấp vào nút Deploy to Netlify bên dưới và dùng thử

Tự xây dựng nó

Ngoài ra, nếu bạn muốn tạo mã từ đầu, bạn có thể làm theo hướng dẫn bên dưới để tạo một Tiếp theo mới. js, thêm một tuyến tĩnh mới và sử dụng phần mềm trung gian để viết lại HTML của phản hồi tại The Edge

điều kiện tiên quyết

Trước khi bắt đầu, hãy kiểm tra xem bạn đã có các công cụ cần thiết để hoàn thành hướng dẫn chưa

• Nút. js (LTS nên dùng)
• GitHub CLI
• Netlify CLI — phiên bản mới nhất

Thiết lập dự án

Hãy tạo một Tiếp theo mới. ứng dụng js. Đi đến thiết bị đầu cuối của bạn và chạy lệnh sau, thay thế

npm install @netlify/next

5 cho tên bạn chọn

npx create-next-app {YOUR_PROJECT_NAME}

Tiếp theo, để điều kỳ diệu xảy ra, chúng ta cần gói

npm install @netlify/next

6. Chạy lệnh sau trong thiết bị đầu cuối của bạn, lệnh này sẽ cài đặt gói dưới dạng phụ thuộc trong gói của dự án. tập tin json

npm install @netlify/next

Tiếp theo, mở dự án trong IDE bạn chọn

Thêm một tuyến đường tĩnh mới

Kế tiếp. js cung cấp định tuyến dựa trên tệp. Việc thêm tệp JavaScript hoặc TypeScript vào thư mục

npm install @netlify/next

7 sẽ tạo một tuyến trình duyệt mới, có cùng tên với tệp. Tạo một tệp mới trong thư mục pages có tên

npm install @netlify/next

8 và thêm đoạn mã sau

// pages/static.js

const Page = () => {
  return (
    <main>
      <h1 id="message">A static pageh1>
    main>
  );
};

export default Page;

Quay lại thiết bị đầu cuối của bạn, khởi động máy chủ phát triển bằng Netlify CLI bằng cách chạy lệnh sau

netlify dev

Một tab trình duyệt sẽ tự động mở ra trên localhost. 8888. Điều hướng đến http. //máy chủ cục bộ. 8888/static trong trình duyệt của bạn và có trang tĩnh mới của bạn

Chúng tôi sẽ tạo trước trang này khi xây dựng với một số dữ liệu cơ bản trước khi chúng tôi chuyển đổi nó bằng cách sử dụng Tiếp theo. js Phần mềm trung gian nâng cao. Bằng cách xuất một hàm có tên 

npm install @netlify/next

9 từ một tệp trang, Tiếp theo. js sẽ hiển thị trước trang này khi xây dựng bằng cách sử dụng dữ liệu được trả về bởi 

// pages/static.js

const Page = () => {
  return (
    <main>
      <h1 id="message">A static pageh1>
    main>
  );
};

export default Page;

0

Thêm đoạn mã sau vào

npm install @netlify/next

8 và chuyển giá trị

// pages/static.js

const Page = () => {
  return (
    <main>
      <h1 id="message">A static pageh1>
    main>
  );
};

export default Page;

2 vào hàm

// pages/static.js

const Page = () => {
  return (
    <main>
      <h1 id="message">A static pageh1>
    main>
  );
};

export default Page;

3

// pages/static.js

export async function getStaticProps() {
  return {
    props: {
      message: "This is a static page — and now this is a prop!",
    },
  };
}

const Page = ({ message }) => {
  return (
    <main>
      <h1 id="message">{message}h1>
    main>
  );
};

export default Page;

Và để xác nhận mọi thứ đã được kết nối, đây là trang tĩnh được cập nhật của chúng tôi, sử dụng thông báo chống đỡ

Tiếp theo, vào phần mềm trung gian

Viết lại HTML và chuyển đổi dữ liệu trang

Phần mềm trung gian trong Tiếp theo. js cho phép bạn chạy mã trước khi yêu cầu HTTP hoàn tất — và nằm ở giữa yêu cầu và phản hồi. Bạn có thể tạo tệp phần mềm trung gian trong Tiếp theo. js bằng JavaScript hoặc TypeScript và với mục đích của hướng dẫn này, chúng tôi sẽ viết phần mềm trung gian trong TypeScript

Tại thư mục gốc của dự án, hãy tạo một tệp mới và đặt tên là

// pages/static.js

const Page = () => {
  return (
    <main>
      <h1 id="message">A static pageh1>
    main>
  );
};

export default Page;

4. Tệp này sẽ chạy trên mọi yêu cầu khi ứng dụng của bạn đang chạy — bao gồm các trang, tệp tĩnh và nội dung. Trong

// pages/static.js

const Page = () => {
  return (
    <main>
      <h1 id="message">A static pageh1>
    main>
  );
};

export default Page;

4, thêm đoạn mã sau. Chúng tôi đang nhập loại

// pages/static.js

const Page = () => {
  return (
    <main>
      <h1 id="message">A static pageh1>
    main>
  );
};

export default Page;

6, đại diện cho yêu cầu HTTP đến, xuất một hàm không đồng bộ có tên

// pages/static.js

const Page = () => {
  return (
    <main>
      <h1 id="message">A static pageh1>
    main>
  );
};

export default Page;

7 và chuyển yêu cầu dưới dạng

// pages/static.js

const Page = () => {
  return (
    <main>
      <h1 id="message">A static pageh1>
    main>
  );
};

export default Page;

8 cho hàm, là một đối tượng

// pages/static.js

const Page = () => {
  return (
    <main>
      <h1 id="message">A static pageh1>
    main>
  );
};

export default Page;

6

// middleware.ts

import type { NextRequest } from "next/server";

export async function middleware(nextRequest: NextRequest) {

}

Trong bản demo này, chúng tôi muốn phần mềm trung gian chạy trên tuyến đường có tên

netlify dev

0. Hãy lấy tên đường dẫn từ yêu cầu và chuẩn bị hàm để thực hiện điều gì đó khi tên đường dẫn bắt đầu bằng

netlify dev

0

// middleware.ts

import type { NextRequest } from "next/server";

export async function middleware(nextRequest: NextRequest) {
  const pathname = nextRequest.nextUrl.pathname;

  if (pathname.startsWith("/static")) {
    // do something here
  }
}

Tiếp theo, đã đến lúc cho phép thuật Netlify. Hãy viết lại HTML của trang tĩnh mà chúng ta đã tạo trước đó. Gần đầu tệp, nhập

netlify dev

2 dưới dạng nhập có tên từ

npm install @netlify/next

6

// middleware.ts

import type { NextRequest } from "next/server";
import { MiddlewareRequest } from "@netlify/next";

export async function middleware(nextRequest: NextRequest) {
  const pathname = nextRequest.nextUrl.pathname;

  if (pathname.startsWith("/static")) {
    // do something here
  }
}

Bên trong chức năng phần mềm trung gian, hãy khởi tạo một Netlify

netlify dev

2 mới, chuyển vào bản gốc

// pages/static.js

const Page = () => {
  return (
    <main>
      <h1 id="message">A static pageh1>
    main>
  );
};

export default Page;

6 dưới dạng

// pages/static.js

const Page = () => {
  return (
    <main>
      <h1 id="message">A static pageh1>
    main>
  );
};

export default Page;

8

import type { NextRequest } from "next/server";
import { MiddlewareRequest } from "@netlify/next";

export async function middleware(nextRequest: NextRequest) {
  const pathname = nextRequest.nextUrl.pathname;

  const middlewareRequest = new MiddlewareRequest(nextRequest);

  if (pathname.startsWith("/static")) {
    // do something here
  }
}

Điều này nâng cao đối tượng yêu cầu ban đầu bằng cách thêm vào tất cả nội dung hay có sẵn trong Netlify Edge Functions. Các chức năng của Netlify Edge rất giống các chức năng không có máy chủ. Bạn có thể viết chúng bằng JavaScript hoặc TypeScript, nhưng thay vì sử dụng Node. js, chúng được cung cấp bởi Deno — một thời gian chạy mã nguồn mở được xây dựng dựa trên các tiêu chuẩn web — và chúng được thực thi tại vị trí máy chủ gần nhất với một yêu cầu. Điều này cho phép cá nhân hóa đầy đủ các trang tại The Edge in Next. js, không cần sử dụng

netlify dev

7 trong định tuyến trang của bạn. Nó cũng hoạt động với Tái tạo tĩnh tăng dần

Giờ đây, đối tượng

// pages/static.js

const Page = () => {
  return (
    <main>
      <h1 id="message">A static pageh1>
    main>
  );
};

export default Page;

6 của chúng tôi đã được nâng cấp bằng đối tượng

netlify dev

2 của Netlify, chúng tôi có quyền sửa đổi phản hồi HTTP trước khi nó được trả về — vì chúng tôi thực sự có thể gửi yêu cầu tới nguồn gốc để tìm nạp và làm việc với nó

Thêm đoạn mã sau vào trong câu lệnh

// pages/static.js

export async function getStaticProps() {
  return {
    props: {
      message: "This is a static page — and now this is a prop!",
    },
  };
}

const Page = ({ message }) => {
  return (
    <main>
      <h1 id="message">{message}h1>
    main>
  );
};

export default Page;

0 và hãy giải nén xem nó làm gì

// middleware.ts

import type { NextRequest } from "next/server";
import { MiddlewareRequest } from "@netlify/next";

export async function middleware(nextRequest: NextRequest) {
  const pathname = nextRequest.nextUrl.pathname;

  const middlewareRequest = new MiddlewareRequest(nextRequest);

  if (pathname.startsWith("/static")) {
    const response = await middlewareRequest.next();	

    const message = `This was a static page but has been transformed in 
                     ${nextRequest?.geo?.city}, 
                     ${nextRequest?.geo?.country} using 
                     @netlify/next in middleware.ts!`;

    response.replaceText("#message", message);
    response.setPageProp("message", message);

    return response;
  }
}

Nếu tên đường dẫn bắt đầu bằng

netlify dev

0, chúng tôi lấy phản hồi tiếp theo trong chuỗi HTTP bằng cách đợi

// pages/static.js

export async function getStaticProps() {
  return {
    props: {
      message: "This is a static page — and now this is a prop!",
    },
  };
}

const Page = ({ message }) => {
  return (
    <main>
      <h1 id="message">{message}h1>
    main>
  );
};

export default Page;

2 — đây là trang tĩnh của chúng tôi — và gán nó cho biến

// pages/static.js

export async function getStaticProps() {
  return {
    props: {
      message: "This is a static page — and now this is a prop!",
    },
  };
}

const Page = ({ message }) => {
  return (
    <main>
      <h1 id="message">{message}h1>
    main>
  );
};

export default Page;

3. Sau đó, sử dụng dữ liệu vị trí địa lý từ

// pages/static.js

const Page = () => {
  return (
    <main>
      <h1 id="message">A static pageh1>
    main>
  );
};

export default Page;

8, chúng tôi tạo một thông báo mới được cá nhân hóa để thay thế nội dung trang tĩnh

Kế tiếp. js Advanced Middleware từ Netlify bao gồm chức năng 

// pages/static.js

export async function getStaticProps() {
  return {
    props: {
      message: "This is a static page — and now this is a prop!",
    },
  };
}

const Page = ({ message }) => {
  return (
    <main>
      <h1 id="message">{message}h1>
    main>
  );
};

export default Page;

5 và cũng có hỗ trợ cho các chuyển đổi mạnh mẽ hơn bằng cách sử dụng trình chuyển đổi luồng HTML Rewriter . Để có quyền truy cập vào thông báo từ DOM trong chức năng phần mềm trung gian, chúng tôi thêm ID vào nút DOM chứa thông báo mà chúng tôi muốn chuyển đổi trên trang tĩnh

npm install @netlify/next

0

Sau đó, chúng tôi chạy

// pages/static.js

export async function getStaticProps() {
  return {
    props: {
      message: "This is a static page — and now this is a prop!",
    },
  };
}

const Page = ({ message }) => {
  return (
    <main>
      <h1 id="message">{message}h1>
    main>
  );
};

export default Page;

5 trên phản hồi, chuyển ID DOM mà chúng tôi đã thêm vào thông báo trong

npm install @netlify/next

8 và thông báo mới mà chúng tôi đã tạo. Để đảm bảo nội dung ngậm nước trên máy khách khớp với HTML được hiển thị phía máy chủ (và để tránh

// pages/static.js

export async function getStaticProps() {
  return {
    props: {
      message: "This is a static page — and now this is a prop!",
    },
  };
}

const Page = ({ message }) => {
  return (
    <main>
      <h1 id="message">{message}h1>
    main>
  );
};

export default Page;

8), chúng tôi cũng có thể cập nhật các đạo cụ trang bằng cách sử dụng

// pages/static.js

export async function getStaticProps() {
  return {
    props: {
      message: "This is a static page — and now this is a prop!",
    },
  };
}

const Page = ({ message }) => {
  return (
    <main>
      <h1 id="message">{message}h1>
    main>
  );
};

export default Page;

9 để cập nhật dữ liệu thông báo cơ bản trên trang.

Cuối cùng, trả lại

// pages/static.js

export async function getStaticProps() {
  return {
    props: {
      message: "This is a static page — and now this is a prop!",
    },
  };
}

const Page = ({ message }) => {
  return (
    <main>
      <h1 id="message">{message}h1>
    main>
  );
};

export default Page;

3. Quay lại trình duyệt của bạn và xem thông báo được cập nhật trên trang được tạo tĩnh trước đó

Thông báo đã được chuyển đổi trong tệp phần mềm trung gian và HTML của trang tĩnh đã được viết lại. Và hơn thế nữa — trang chống đỡ cũng đã được cập nhật. Kiểm tra nguồn trang, tìm kiếm

// middleware.ts

import type { NextRequest } from "next/server";

export async function middleware(nextRequest: NextRequest) {

}

1 trong DOM và xem chỗ dựa thông báo trang được cập nhật — tất cả được cung cấp bởi Next. js Advanced Middleware từ Netlify

Hãy triển khai lên Netlify để xem quá trình viết lại HTML diễn ra trong thời gian thực trên một URL trực tiếp

Kết nối repo Git của bạn

Chúng tôi có một số tùy chọn về cách triển khai Tiếp theo. js lên Netlify. Trong hướng dẫn này, chúng tôi sẽ kết nối với một repo Git mới để chúng tôi nhận được tất cả CI/CD được đưa vào và định cấu hình miễn phí

Kế tiếp. js đi kèm với repo Git đã được khởi tạo. Giai đoạn và cam kết các tệp của bạn bằng các lệnh sau

npm install @netlify/next

1

Các bước tiếp theo sẽ hướng dẫn bạn thêm kho lưu trữ của mình vào GitHub thông qua GitHub CLI — nhưng bạn có thể đẩy dự án của mình lên GitHub theo bất kỳ cách nào bạn cảm thấy thoải mái nhất

Chạy lệnh sau trong thiết bị đầu cuối của bạn để tạo kho lưu trữ mới được kết nối với tài khoản GitHub của bạn

npm install @netlify/next

2

Khi được nhắc về loại kho lưu trữ bạn muốn tạo, hãy chọn.

// middleware.ts

import type { NextRequest } from "next/server";

export async function middleware(nextRequest: NextRequest) {

}

2. Thực hiện theo các lời nhắc còn lại để điền vào các chi tiết dự án có liên quan. Bây giờ, bạn đã sẵn sàng triển khai lên Netlify

Triển khai vào Netlify bằng Netlify CLI

Nếu bạn chưa đăng nhập vào Netlify CLI, hãy chạy lệnh sau trong thiết bị đầu cuối của bạn và làm theo lời nhắc để ủy quyền với Netlify (một cửa sổ trình duyệt sẽ mở ra)

npm install @netlify/next

3

Tiếp theo, chạy lệnh sau để khởi tạo một dự án mới trên Netlify

npm install @netlify/next

4

Điền vào các lời nhắc sau để thiết lập dự án mới

• Bạn thích làm gì?
• Đội.

  // middleware.ts
  
  import type { NextRequest } from "next/server";
  
  export async function middleware(nextRequest: NextRequest) {
  
  }

  4
• Tên trang web (tùy chọn).

  // middleware.ts
  
  import type { NextRequest } from "next/server";
  
  export async function middleware(nextRequest: NextRequest) {
  
  }

  5

Netlify CLI sẽ tự động phát hiện bạn đang sử dụng Next. js, vì vậy các lời nhắc sau sẽ được điền sẵn. Nhấn enter để sử dụng giá trị mặc định

• Lệnh xây dựng của bạn (hugo build/yarn run build/etc).

  // middleware.ts
  
  import type { NextRequest } from "next/server";
  
  export async function middleware(nextRequest: NextRequest) {
  
  }

  6
• Thư mục để triển khai (trống cho thư mục hiện tại).

  // middleware.ts
  
  import type { NextRequest } from "next/server";
  
  export async function middleware(nextRequest: NextRequest) {
  
  }

  7
• Thư mục chức năng Netlify.

  // middleware.ts
  
  import type { NextRequest } from "next/server";
  
  export async function middleware(nextRequest: NextRequest) {
  
  }

  8

Đợi vài giây… và trang web mới của bạn được triển khai. 🎉 Giờ đây, bạn có thể thể hiện các kỹ năng cá nhân hóa mới của mình trong phần Tiếp theo. js bằng cách gửi URL trực tiếp cho bạn bè của bạn

Tìm hiểu thêm

Truy cập tài liệu chính thức của Netlify để tìm hiểu về những gì hiện có thể thực hiện được với Next. js Advanced Middleware — chỉ có trên Netlify

Làm cách nào để hiển thị HTML trong js tiếp theo?

Làm cách nào để hiển thị chuỗi HTML?

Bạn có thể sử dụng HTML trong JS tiếp theo không?

Làm cách nào để chuyển đổi HTML thành chuỗi trong React?