Next.js - Cung cấp tệp tĩnh

Trong Next.js, chúng tôi có thể phục vụ các trang tĩnh như hình ảnh rất dễ dàng bằng cách đưa chúng vào public, một thư mục cấp cao nhất. Chúng tôi có thể tham khảo các tệp này theo cách tương tự như các trang trongpages danh mục.

Trong Next.js, một trang là một Thành phần React và được xuất từ ​​thư mục trang. Mỗi trang được liên kết với một tuyến dựa trên tên tệp của nó.

Hãy cập nhật dự án nextjs được sử dụng trong chương Pages .

Tạo thư mục công khai và đặt bất kỳ hình ảnh nào trong đó. Chúng tôi đã lấy logo.png, hình ảnh Biểu trưng TutorialsPoint.

Cập nhật first.js như sau:

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
         <br/">
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	  
   )
}

Ở đây, chúng tôi đã thêm một tham chiếu đến logo.png trong tệp index.js.

Khởi động Máy chủ Next.js

Chạy lệnh sau để khởi động máy chủ -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Xác minh đầu ra

Mở localhost: 3000 trong trình duyệt và bạn sẽ thấy kết quả sau.

thư mục công cộng cũng hữu ích trong trường hợp mục đích SEO. Nó có thể được sử dụng cho robot.txt, xác minh Trang web của Google hoặc bất kỳ nội dung tĩnh nào khác trong ứng dụng web.