Static Assets ใน Next.js

NextJs
Created At :
Views 👀 :

Next.js รองรับ Static Assets อยู่แล้ว ซึ่งหมายความว่าคุณสามารถเก็บไฟล์ต่างๆ เช่น รูปภาพ ไฟล์ CSS และ JavaScript ไว้ในโฟลเดอร์ public ของโครงการของคุณ

ไฟล์ Static Assets จะถูก served โดย Next.js โดยตรง ซึ่งหมายความว่าไฟล์เหล่านั้นจะไม่ถูกสร้างขึ้นใหม่เมื่อคุณสร้างหน้าใหม่

สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับการปรับปรุงประสิทธิภาพของหน้าเว็บของคุณ เนื่องจากไฟล์ Static Assets จะถูกโหลดจากแคชของเบราว์เซอร์แทนที่จะต้องดาวน์โหลดใหม่ทุกครั้งที่ผู้ใช้ร้องขอหน้านั้น

คุณสามารถเพิ่มไฟล์ Static Assets ลงในโครงการ Next.js ของคุณโดยวางไฟล์เหล่านั้นในโฟลเดอร์ public

ตัวอย่างเช่น:

1
2
3
4
public/
    my-image.jpg
    style.css
    script.js

ไฟล์ Static Assets ทั้งหมดในโฟลเดอร์ public จะถูก served โดย Next.js

คุณสามารถอ้างอิงไฟล์ Static Assets ในไฟล์ JavaScript ของคุณโดยใช้เส้นทางแบบสัมพัทธ์จากโฟลเดอร์ public

ตัวอย่างเช่น:

1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import Image from 'next/image';

const App = () => {
  return (
    <div>
      <Image src="/my-image.jpg" />
    </div>
  );
};

export default App;

ในตัวอย่างนี้ Image Component จะอ้างอิงไฟล์ my-image.jpg ซึ่งอยู่ในโฟลเดอร์ public

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Static Assets ใน Next.js ได้จากเอกสารประกอบของ Next.js:

Here are some of the benefits of using Static Assets in Next.js:

  • Improves page load speed: Static Assets can be served directly from the browser’s cache, which can improve the load speed of your pages.
  • Reduces bandwidth usage: Static Assets are only downloaded once by the browser, which can reduce the amount of bandwidth that is used to load your pages.
  • Improves SEO: Static Assets can help to improve your pages’ SEO ranking, as search engines prefer pages that load quickly and use less bandwidth.

If you’re looking to improve the performance of your Next.js pages, I recommend using Static Assets. It’s a simple and effective way to improve the load speed, bandwidth usage, and SEO of your pages.

©2023 Love Computer