Tìm kiếm trang web

typescript - tuyến đường động Next.js

sau khi tìm kiếm nửa ngày và thử nghiệm, tôi thực sự cần phải hỏi.

Tôi tải nội dung động từ API, không bao giờ biết có bao nhiêu hoặc ID nào.

Tôi muốn tạo một cấu trúc động cho các trang

'www.domain.com' sẽ tải trang chỉ mục

'www.domain.com/eth' nơi eth là một tham số truy vấn 'chain' và tải trang [chain].tsx.

'www.domain.com/eth/uni' thêm tham số truy vấn 'dex' và tải trang [chain][dex].tsx.

'www.domain.com/eth/0xr83urt36sdt45t' hoặc có một tham số truy vấn tokenAddress và tải trang [chain][tokenAddress].tsx.

Tôi biết ví dụ rằng dexscreener.com đang làm điều này, nhưng tôi không thể hiểu cách nó hoạt động. Tôi đang sử dụng nextjs với typescript và tôi còn khá mới với cả hai.

bất kỳ ai có thể chỉ cho tôi hướng đi/ cấu trúc thư mục đúng v.v. Thật tuyệt vời.

Câu trả lời #1

Câu hỏi này có một vài lớp:

  1. đang định tuyến đến trang [chain]
  2. chuyển hướng đến trang [chain][dex]
  3. cũng phù hợp với trang [chain][token]

Điều này được thực hiện thông qua Các Tuyến Động như được nêu trong đây

Các tuyến được xác định trước có ưu tiên hơn các tuyến động, và các tuyến động có ưu tiên hơn các tuyến bắt tất cả. Hãy xem các ví dụ sau:

pages/post/create.js - Sẽ khớp với /post/create

pages/post/[pid].js - Sẽ khớp với /post/1, /post/abc, v.v. Nhưng không khớp với /post/create

pages/post/[...slug].js - Sẽ khớp với /post/1/2, /post/a/b/c, v.v. Nhưng không khớp với /post/create, /post/abc

Tương tự, bạn có thể định nghĩa tĩnh các tuyến [chain] trước. Ví dụ, nếu bạn muốn hỗ trợ một vài chuỗi, bạn có thể tạo một trang cho tuyến chuỗi đó (eth, sol, v.v.). Điều này cũng có thể là động với một mẫu [chain] (như được thể hiện trong ví dụ 2).

Sau đó, để khớp [chain][dex/token] với cùng một tuyến: điều này có thể thực hiện được bằng cách sử dụng phương pháp [...slug] để lấy toàn bộ tuyến và phân tích ra chain/dex/token liên quan hoặc thông qua các tuyến động lồng nhau (thêm thông tin trong câu trả lời SO này). Cả hai cách đều cho phép bạn sử dụng mẫu trên để khớp bất kỳ tuyến nào có mẫu [chain][dex/token]. Bằng cách này, cả mẫu dex và token đều được định tuyến tương tự (như dexscreener thực hiện).

Khi đã ở trên tuyến đường đó, bạn có thể sử dụng getStaticProps hoặc getServerSideProps để kiểm tra xem đó là dex hay token (thông qua từ điển của bạn) và tải nội dung phù hợp trên trang.