tiktok นับยอดวิวยังไง

Static exports ใน Next.js คือวิธีการสร้างไฟล์ HTML และเนื้อหาสถิต (static content) ให้กับเราเมื่อทำการรวบรวมโปรเจ็กต์ Next.js โดยทั่วไปแล้ว Next.js จะเป็นแอพพลิเคชันแบบสแตติก (server-rendered) แต่ static exports จะช่วยให้คุณสามารถสร้างเว็บไซต์สเตติกที่ไม่ต้องการเซิร์ฟเวอร์สร้างเนื้อหาในแต่ละครั้งที่มีการเรียกใช้ ซึ่งเป็นประโยชน์สำหรับเว็บไซต์ที่มีเนื้อหาไม่เปลี่ยนแปลงบ่อยครั้งหรือความเร็วในการโหลดเว็บไซต์ที่สำคัญ.

นี่คือขั้นตอนที่คุณสามารถทำเพื่อใช้ static exports ใน Next.js:

1. สร้างไฟล์ next.config.js (หากยังไม่มี):
   ถ้ายังไม่มีไฟล์ next.config.js ในรากของโปรเจ็กต์ Next.js ของคุณ ให้สร้างไฟล์ดังกล่าวและกำหนดการตั้งค่าดังนี้:

   // next.config.js
   module.exports = {
     // ตั้งค่า exportPathMap สำหรับการสร้าง static exports
     exportPathMap: async function () {
       return {
         '/': { page: '/' },
         // เพิ่มเส้นทางเพิ่มเติมตามความต้องการ
       };
     },
   };

   คุณสามารถกำหนดเส้นทางอื่น ๆ ที่คุณต้องการสร้าง static exports ในอ็อบเจ็กต์ที่ถูกส่งกลับโดย exportPathMap ตามความต้องการของคุณ.

2. สร้างไฟล์หน้าเว็บที่คุณต้องการสร้างเป็นไฟล์ HTML และสร้างไฟล์เนื้อหาสถิต (static content):
   ในโฟลเดอร์ pages ของโปรเจ็กต์ Next.js ของคุณ สร้างไฟล์ .js หรือ .tsx ตามที่คุณต้องการสร้างเว็บไซต์สเตติก และนำเนื้อหาของไฟล์ HTML และเนื้อหาสถิตที่คุณต้องการนำเข้ามาใส่ในไฟล์นั้น ตัวอย่าง:

   // pages/index.js
   import React from 'react';
   
   function HomePage() {
     return (
       <div>
         <h1>Static Export Example</h1>
         <p>This is a static page generated by Next.js.</p>
       </div>
     );
   }
   
   export default HomePage;

3. สร้างสคริปต์สำหรับการรวม static exports:
   เพื่อสร้าง static exports ของโปรเจ็กต์ Next.js ของคุณ ให้เพิ่มสคริปต์ในไฟล์ package.json ของคุณ เพื่อใช้งาน next export:

   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "export": "next export", // เพิ่มสคริปต์สำหรับการ export
     "start": "next start"
   }

4. รวบรวม static exports:
   รันคำสั่ง next export เพื่อรวบรวม static exports ของโปรเจ็กต์ Next.js ของคุณ:

   npm run build
   npm run export

   หรือหากคุณใช้ yarn:

   yarn build
   yarn export

5. ไฟล์สำหรับ static exports จะถูกสร้างขึ้นในโฟลเดอร์ out ในรากโปรเจ็กต์ Next.js ของคุณ คุณสามารถตรวจสอบไฟล์และโครงสร้างโฟลเดอร์ที่สร้างขึ้นตามการกำหนดเส้นทางใน exportPathMap ในขั้นตอนที่ 1.

6. นำไฟล์สำหรับ static exports ไปอัปโหลดหรือใช้ในเว็บไซต์ของคุณตามที่คุณต้องการ.

ข้อสังเกต: หลังจากที่ใช้ next export