ดาวน์โหลด nlp assemblyai frontend - ดาวน์โหลด nlp assemblyai frontend ซอร์สโค้ด

แอปพลิเคชั่นแปลงเสียงเป็นข้อความ

โปรเจ็กต์นี้เป็นเว็บแอปพลิเคชัน Next-based ที่ให้ผู้ใช้สามารถอัปโหลดไฟล์เสียง MP3 และแปลงเป็นข้อความโดยใช้ AssemblyAI API

คุณสมบัติ

อัปโหลดไฟล์เสียง MP3
แปลงเสียงที่อัปโหลดเป็นข้อความโดยใช้ AssemblyAI API
แสดงข้อความที่ถอดเสียงบนเว็บเพจ

เริ่มต้นใช้งาน

ทำตามคำแนะนำเหล่านี้เพื่อตั้งค่าและรันโปรเจ็กต์บนเครื่องของคุณ

ข้อกำหนดเบื้องต้น

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งสิ่งต่อไปนี้:

Node.js (เวอร์ชัน 14 หรือสูงกว่า)
npm (มาพร้อมกับ Node.js)

การติดตั้ง

โคลนที่เก็บ:

git clone https://github.com/Manishyadav514/nlp-assemblyai-frontend.git
cd nlp-assemblyai-frontend
npm install

จุดสิ้นสุด API

ตรวจสอบ repo แบ็กเอนด์ nlp-assemblyai-backend สำหรับจุดสิ้นสุด API

ตัวอย่างการตอบกลับ

 {
  s"transcript": "This is the transcribed text from the audio file."
}

การปรับใช้

ฉันได้ปรับใช้แอป Next.js บน GitHub Pages ซึ่งเกี่ยวข้องกับไม่กี่ขั้นตอน เนื่องจาก GitHub Pages มีไว้สำหรับไซต์แบบคงที่เป็นหลัก ในขณะที่แอป Next.js มักต้องใช้เซิร์ฟเวอร์ อย่างไรก็ตาม คุณสามารถปรับใช้การส่งออกแอป Next.js แบบคงที่ไปยัง GitHub Pages ได้ ต่อไปนี้คือวิธีที่คุณสามารถทำได้:

ขั้นตอนที่ 1: กำหนดค่า Next.js สำหรับการส่งออกแบบคงที่

เปิดไฟล์ next.config.js ของคุณ (สร้างไฟล์ใหม่หากไม่มีอยู่) และเพิ่มการกำหนดค่าต่อไปนี้เพื่อส่งออกแอป Next.js ของคุณเป็น HTML แบบคงที่:
```
 /** @type {import('next').NextConfig} */
const nextConfig = {
  output : "export" ,
  images : {
    unoptimized : true , // Disable Image Optimization if needed
  } ,
  trailingSlash : true , // Adds trailing slash to all routes
  basePath : "/your-repo-name" , // Replace with your GitHub repository name
} ;

module . exports = nextConfig ;
```
- output: 'export' บอกให้ Next.js สร้างไซต์แบบคงที่
- images: { unoptimized: true } เป็นสิ่งจำเป็นหากคุณใช้คุณลักษณะการเพิ่มประสิทธิภาพรูปภาพของ Next.js ที่ไม่เข้ากันกับการโฮสต์แบบคงที่
- basePath มีความสำคัญหากไซต์ GitHub Pages ของคุณจะไม่ให้บริการจากรากของโดเมน (เช่น username.github.io/your-repo-name )

ขั้นตอนที่ 2: สร้างและส่งออกไซต์แบบคงที่

อัปเดตสคริปต์ package.json ของคุณเพื่อรวมคำสั่ง build สำหรับการส่งออกแบบคงที่:
```
{
  "scripts" : {
    "build" : " next build " ,
    "export" : " next export " ,
    "deploy" : " npm run build && npm run export && gh-pages -d out "
  }
}
```
- คำสั่ง export จะสร้างไฟล์คงที่ในไดเร็กทอรี out
- สคริปต์ deploy จะสร้าง ส่งออก และปรับใช้ไซต์ของคุณไปยังเพจ GitHub

ขั้นตอนที่ 3: ติดตั้งแพ็คเกจ `gh-pages`

ติดตั้งแพ็คเกจ gh-pages เพื่อจัดการการปรับใช้กับ GitHub Pages:
```
npm install gh-pages --save-dev
```
เพิ่มฟิลด์ homepage ใน package.json ของคุณเพื่อชี้ไปที่ URL เพจ GitHub ของคุณ:
```
{
  "homepage" : " https://username.github.io/your-repo-name "
}
```

ขั้นตอนที่ 4: ปรับใช้กับหน้า GitHub

รันคำสั่งต่อไปนี้เพื่อสร้าง ส่งออก และปรับใช้แอป Next.js ของคุณกับ GitHub Pages:
```
npm run deploy
```
คำสั่งนี้จะสร้างสาขาใหม่ชื่อ gh-pages ในพื้นที่เก็บข้อมูล GitHub ของคุณและพุชเนื้อหาของไดเร็กทอรี out ที่นั่น GitHub Pages จะให้บริการไฟล์จากสาขานี้โดยอัตโนมัติ

ขั้นตอนที่ 5: กำหนดค่าพื้นที่เก็บข้อมูล GitHub

ไปที่ที่เก็บ GitHub ของคุณ
ไปที่ การตั้งค่า > หน้า
ภายใต้ Source ให้เลือกสาขา gh-pages

ตอนนี้แอป Next.js ของคุณควรได้รับการปรับใช้และเข้าถึงได้ผ่าน https://username.github.io/your-repo-name

ข้อควรพิจารณาที่สำคัญ

เส้นทางแบบไดนามิก : เนื่องจาก GitHub Pages เป็นโซลูชันโฮสติ้งแบบคงที่ เส้นทางแบบไดนามิกที่ต้องอาศัยฟังก์ชันฝั่งเซิร์ฟเวอร์จึงไม่ทำงาน ตรวจสอบให้แน่ใจว่าแอปของคุณสามารถแสดงผลล่วงหน้าได้อย่างสมบูรณ์หรือใช้การแสดงผลฝั่งไคลเอ็นต์สำหรับเนื้อหาแบบไดนามิก
โดเมนที่กำหนดเอง : หากคุณใช้โดเมนที่กำหนดเอง ตรวจสอบให้แน่ใจว่า DNS ของคุณได้รับการกำหนดค่าอย่างถูกต้อง และอัปเดตฟิลด์ homepage ใน package.json ตามนั้น

การแปลงเว็บไซต์นี้เป็น PWA

เมื่อใช้ next-pwa คุณสามารถใช้ประโยชน์จากข้อได้เปรียบที่สำคัญของ Progressive Web Applications (PWA) ได้ เช่น การค้นพบที่ดีขึ้น ลดการใช้หน่วยความจำ การพัฒนาที่คุ้มค่า และประสิทธิภาพออฟไลน์ที่รวดเร็วอย่างเห็นได้ชัด เว็บแอปพลิเคชันใดๆ ก็ตาม โดยไม่คำนึงถึงประเภทหรือความซับซ้อน สามารถแปลงเป็น PWA ได้อย่างง่ายดาย การเปลี่ยนเว็บไซต์ให้เป็น Progressive Web App เกี่ยวข้องกับการเพิ่มคุณสมบัติบางอย่างและการแก้ไขโค้ดบางส่วนเพื่อให้เว็บไซต์ทำงานเหมือนกับแอปเนทีฟบนอุปกรณ์เคลื่อนที่ ต่อไปนี้เป็นขั้นตอนทั่วไปเพื่อให้บรรลุเป้าหมายนี้

ขั้นตอนที่ 1: สร้างเว็บไซต์พื้นฐาน

การเชื่อมต่อ PWA อย่างปลอดภัยผ่าน HTTPS จะช่วยให้ผู้ใช้รู้สึกได้รับการปกป้องมากขึ้น
เว็บไซต์จะต้องตอบสนอง

ขั้นตอนที่ 2: ติดตั้ง

เรามีสถาปัตยกรรม App Router ของ Next.js ดังนั้นจะปฏิบัติตามวิธีการเฉพาะนั้น จะใช้แพ็คเกจ next-pwa เพื่อสร้าง PWA

 yarn add next-pwa && yarn add -D webpack

ขั้นตอนที่ 3: สร้างไฟล์ Manifest ของ Web App

โดยจะอธิบาย PWA ของคุณ รวมถึงชื่อ ไอคอน และรายละเอียดอื่นๆ หากต้องการสร้างรายการเว็บแอป คุณสามารถใช้เครื่องมือ เช่น PWA Builder หรือสร้างด้วยตนเองก็ได้ เมื่อคุณมีไฟล์ Manifest แล้ว ให้เพิ่มลงในไดเร็กทอรีรากของเว็บไซต์ของคุณ หากคุณไม่มีระบบที่มีโครงสร้างสำหรับเทมเพลตของคุณ ให้เพิ่มบรรทัดเหล่านี้เพื่อเริ่มต้น:

อัปเดต app/manifest.json (App Router) หรือ public/manifest.json (Pages Router) ด้วยเนื้อหาต่อไปนี้:

แอป/manifest.json

 {
  "name": "nlp_pwa",
  "short_name": "nlp_pwa",
  "description": "Your App Description",
  "start_url": "/",
  "icons": [
    {
      "src": "./196.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffee00",
  "background_color": "#ffee00",
  "display": "standalone"
}

ขั้นตอนที่ 4: เพิ่มข้อมูลเมตาไปที่ `<head />`

เพิ่มสิ่งต่อไปนี้ลงในของคุณ:

แอพ/layout.tsx

 import type { Metadata, Viewport } from "next";

const APP_NAME = "PWA App";
const APP_DEFAULT_TITLE = "My Awesome PWA App";
const APP_TITLE_TEMPLATE = "%s - PWA App";
const APP_DESCRIPTION = "Best PWA app in the world!";

export const metadata: Metadata = {
  applicationName: APP_NAME,
  title: {
    default: APP_DEFAULT_TITLE,
    template: APP_TITLE_TEMPLATE,
  },
  description: APP_DESCRIPTION,
  manifest: "/manifest.json",
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
    title: APP_DEFAULT_TITLE,
    // startUpImage: [],
  },
  formatDetection: {
    telephone: false,
  },
  openGraph: {
    type: "website",
    siteName: APP_NAME,
    title: {
      default: APP_DEFAULT_TITLE,
      template: APP_TITLE_TEMPLATE,
    },
    description: APP_DESCRIPTION,
  },
  twitter: {
    card: "summary",
    title: {
      default: APP_DEFAULT_TITLE,
      template: APP_TITLE_TEMPLATE,
    },
    description: APP_DESCRIPTION,
  },
};

export const viewport: Viewport = {
  themeColor: "#FFFFFF",
};

หน้า/_app.tsx

 import type { AppProps } from "next/app";
import Head from "next/head";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>My awesome PWA app</title>
        <meta name="description" content="Best PWA app in the world!" />
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="mask-icon" href="/icons/mask-icon.svg" color="#FFFFFF" />
        <meta name="theme-color" content="#ffffff" />
        <link rel="apple-touch-icon" href="/icons/touch-icon-iphone.png" />
        <link
          rel="apple-touch-icon"
          sizes="152x152"
          href="/icons/touch-icon-ipad.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href="/icons/touch-icon-iphone-retina.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="167x167"
          href="/icons/touch-icon-ipad-retina.png"
        />
        <link rel="manifest" href="/manifest.json" />
        <meta name="twitter:card" content="summary" />
        <meta name="twitter:url" content="https://yourdomain.com" />
        <meta name="twitter:title" content="My awesome PWA app" />
        <meta name="twitter:description" content="Best PWA app in the world!" />
        <meta name="twitter:image" content="/icons/twitter.png" />
        <meta name="twitter:creator" content="@DavidWShadow" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="My awesome PWA app" />
        <meta property="og:description" content="Best PWA app in the world!" />
        <meta property="og:site_name" content="My awesome PWA app" />
        <meta property="og:url" content="https://yourdomain.com" />
        <meta property="og:image" content="/icons/og.png" />
        {/* add the following only if you want to add a startup image for Apple devices. */}
        <link
          rel="apple-touch-startup-image"
          href="/images/apple_splash_2048.png"
          sizes="2048x2732"
        />
        <link
          rel="apple-touch-startup-image"
          href="/images/apple_splash_1668.png"
          sizes="1668x2224"
        />
        <link
          rel="apple-touch-startup-image"
          href="/images/apple_splash_1536.png"
          sizes="1536x2048"
        />
        <link
          rel="apple-touch-startup-image"
          href="/images/apple_splash_1125.png"
          sizes="1125x2436"
        />
        <link
          rel="apple-touch-startup-image"
          href="/images/apple_splash_1242.png"
          sizes="1242x2208"
        />
        <link
          rel="apple-touch-startup-image"
          href="/images/apple_splash_750.png"
          sizes="750x1334"
        />
        <link
          rel="apple-touch-startup-image"
          href="/images/apple_splash_640.png"
          sizes="640x1136"
        />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

หากใช้โปรแกรมทำงานของบริการที่กำหนดเอง ให้เพิ่มโค้ดด้านล่างในส่วนหัวของ app/layout.tsx (App Router) หรือ app.js (Page Router)

      <head>
        <link rel="manifest" href="/manifest.json" />
        <meta name="theme-color" content="#000000" />
        <link rel="apple-touch-icon" href="/196.png" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta
          name="apple-mobile-web-app-status-bar-style"
          content="black-translucent"
        />

        {/* <!-- iOS Splash Screens --> */}
        <link
          href="/splashscreens/iphone5_splash.png"
          media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
          rel="apple-touch-startup-image"
        />
      </head>

ขั้นตอนที่ 5: เพิ่มพนักงานบริการ

imp: ใช้สิ่งนี้หากแพ็คเกจ next-pwa ไม่ทำงาน (มันไม่ได้ผลสำหรับฉันในขณะที่ปรับใช้เป็นไซต์ statis บนหน้า Github)

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

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

คุณสามารถเพิ่มพนักงานบริการลงในเว็บไซต์ของคุณได้โดยการเขียนโค้ดด้วยตนเองหรือใช้เครื่องมือเช่น Workbox คุณสามารถคัดลอกรหัสด้านล่าง หากต้องการใช้โค้ดนี้ ให้สร้างไฟล์ใหม่และตั้งชื่อเป็น sw.js ก่อนที่จะบันทึกการเปลี่ยนแปลง next-pwa จัดการการตั้งค่าโปรแกรมทำงานของบริการ ดังนั้นคุณไม่จำเป็นต้องสร้างการตั้งค่าด้วยตนเอง เพียงตรวจสอบให้แน่ใจว่าพนักงานบริการลงทะเบียนอย่างถูกต้องในแอปของคุณ

update public/service-worker.js

 const CACHE_NAME = "my-pwa-cache-v1";
const urlsToCache = ["/"]; // add other urls that needs to be cached

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(urlsToCache);
    })
  );
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

self.addEventListener("activate", (event) => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then((keyList) =>
      Promise.all(
        keyList.map((key) => {
          if (!cacheWhitelist.includes(key)) {
            return caches.delete(key);
          }
        })
      )
    )
  );
});

ขั้นตอนที่ 6 รวมการกำหนดค่าถัดไปของคุณด้วย `withPWA` *

อัปเดตหรือสร้าง next.config.js ของคุณด้วย

 /** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  compiler: {
    removeConsole: process.env.NODE_ENV !== "development",
  },
};

const withPWA = require("next-pwa")({
  dest: "public",
  disable: process.env.NODE_ENV === "development",
  register: true,
});

module.exports = withPWA(nextConfig);


const nextConfig = {};

const withPWA = require("@ducanh2912/next-pwa").default({
  dest: "public",
  disable: process.env.NODE_ENV === "development",
  runtimeCaching: [
    {
      urlPattern: /^https://fonts.(googleapis|gstatic).com/.*/i,
      handler: "CacheFirst",
      options: {
        cacheName: "google-fonts",
        expiration: {
          maxEntries: 4,
          maxAgeSeconds: 365 * 24 * 60 * 60, // 1 year
        },
      },
    },
    {
      urlPattern: /^https://cdnjs.cloudflare.com/.*/i,
      handler: "CacheFirst",
      options: {
        cacheName: "static-resources",
        expiration: {
          maxEntries: 20,
          maxAgeSeconds: 365 * 24 * 60 * 60, // 1 year
        },
      },
    },
    {
      urlPattern: /.(?:png|jpg|jpeg|svg|gif|ico)$/i,
      handler: "CacheFirst",
      options: {
        cacheName: "images",
        expiration: {
          maxEntries: 60,
          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
        },
      },
    },
    {
      urlPattern: /^/(?!api/).*/i,
      handler: "NetworkFirst",
      options: {
        cacheName: "pages",
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 24 * 60 * 60, // 1 day
        },
      },
    },
  ],
});

module.exports = withPWA({
  ...nextConfig,
});

ไปด้วยโค้ดด้านล่างหากใช้โปรแกรมทำงานของบริการที่กำหนดเองแทน next-pwa

 const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  output: "export", //remove this line if not expoerting as a static site
  compiler: {
    removeConsole: process.env.NODE_ENV !== "development",
  },
};

module.exports = nextConfig;

หลังจากรันบิลด์ถัดไป สิ่งนี้จะสร้างไฟล์สองไฟล์ในสาธารณะของคุณ: workbox-*.js และ sw.js ซึ่งจะให้บริการแบบคงที่โดยอัตโนมัติ

ปัญหาและความท้าทาย

การปรับใช้แอป `Next.js` เป็นไซต์คงที่บน `Github Pages` และสร้าง PWA

โดยทั่วไปแล้ว next-pwa จะต้องมีการตั้งค่า output: 'export' ใน next.config.js เมื่อปรับใช้กับไซต์แบบคงที่ เช่น GitHub Pages
ไฟล์ YAML ของ GitHub Actions ใช้สำหรับปรับใช้ไซต์ Next.js กับ GitHub Pages หากต้องการรันโค้ดแบบคงที่ในเครื่อง npx serve@latest out
ลบสคริปต์การส่งออกออกจาก package.json เนื่องจาก next export ถูกลบออกเพื่อสนับสนุน 'output: Export' ใน next.config.js

ขยาย

nlp assemblyai frontend

แอปพลิเคชั่นแปลงเสียงเป็นข้อความ

คุณสมบัติ

เริ่มต้นใช้งาน

ข้อกำหนดเบื้องต้น

การติดตั้ง

จุดสิ้นสุด API

การปรับใช้

ขั้นตอนที่ 1: กำหนดค่า Next.js สำหรับการส่งออกแบบคงที่

ขั้นตอนที่ 2: สร้างและส่งออกไซต์แบบคงที่

ขั้นตอนที่ 3: ติดตั้งแพ็คเกจ `gh-pages`

ขั้นตอนที่ 4: ปรับใช้กับหน้า GitHub

ขั้นตอนที่ 5: กำหนดค่าพื้นที่เก็บข้อมูล GitHub

ข้อควรพิจารณาที่สำคัญ

การแปลงเว็บไซต์นี้เป็น PWA

ขั้นตอนที่ 1: สร้างเว็บไซต์พื้นฐาน

ขั้นตอนที่ 2: ติดตั้ง

ขั้นตอนที่ 3: สร้างไฟล์ Manifest ของ Web App

ขั้นตอนที่ 4: เพิ่มข้อมูลเมตาไปที่ `<head />`

ขั้นตอนที่ 5: เพิ่มพนักงานบริการ

ขั้นตอนที่ 6 รวมการกำหนดค่าถัดไปของคุณด้วย `withPWA` *

ปัญหาและความท้าทาย

การปรับใช้แอป `Next.js` เป็นไซต์คงที่บน `Github Pages` และสร้าง PWA

GitHub sgrebnov/cordova plugin background download

Wa ch ull navra maza navsacha 2 2024 ull ovie Fr e Online On Strea ings

Wa ch navra maza navsacha 2 2024 ull ovie Online For Fr e Strea ings At Home

Wa ch the greatest of all time 2024 ull ovie Online For Fr e Strea ings At Home

wolfs 2024 f llmo ie f lmyz lla dow load ree 7 0p 4 0p a d 10 0p

GitHub actions/download artifact

chat.petals.dev

GPT Prompt Templates

GPTyped

node telegram bot api

typebot.io

python wechaty getting started

waymo open dataset

termwind

wp functions

nlp assemblyai frontend

แอปพลิเคชั่นแปลงเสียงเป็นข้อความ

คุณสมบัติ

เริ่มต้นใช้งาน

ข้อกำหนดเบื้องต้น

การติดตั้ง

จุดสิ้นสุด API

การปรับใช้

ขั้นตอนที่ 1: กำหนดค่า Next.js สำหรับการส่งออกแบบคงที่

ขั้นตอนที่ 2: สร้างและส่งออกไซต์แบบคงที่

ขั้นตอนที่ 3: ติดตั้งแพ็คเกจ gh-pages

ขั้นตอนที่ 4: ปรับใช้กับหน้า GitHub

ขั้นตอนที่ 5: กำหนดค่าพื้นที่เก็บข้อมูล GitHub

ข้อควรพิจารณาที่สำคัญ

การแปลงเว็บไซต์นี้เป็น PWA

ขั้นตอนที่ 1: สร้างเว็บไซต์พื้นฐาน

ขั้นตอนที่ 2: ติดตั้ง

ขั้นตอนที่ 3: สร้างไฟล์ Manifest ของ Web App

ขั้นตอนที่ 4: เพิ่มข้อมูลเมตาไปที่ <head />

ขั้นตอนที่ 5: เพิ่มพนักงานบริการ

ขั้นตอนที่ 6 รวมการกำหนดค่าถัดไปของคุณด้วย withPWA *

ปัญหาและความท้าทาย

การปรับใช้แอป Next.js เป็นไซต์คงที่บน Github Pages และสร้าง PWA

ขั้นตอนที่ 3: ติดตั้งแพ็คเกจ `gh-pages`

ขั้นตอนที่ 4: เพิ่มข้อมูลเมตาไปที่ `<head />`

ขั้นตอนที่ 6 รวมการกำหนดค่าถัดไปของคุณด้วย `withPWA` *

การปรับใช้แอป `Next.js` เป็นไซต์คงที่บน `Github Pages` และสร้าง PWA