M

MLOG

ไทย

สำรวจ Next.js static exports สำหรับแอปพลิเคชันฝั่งไคลเอนต์ เรียนรู้ข้อดี ข้อจำกัด การตั้งค่า และเทคนิคขั้นสูงเพื่อสร้างเว็บที่รวดเร็ว ปลอดภัย และเข้าถึงได้ทั่วโลก

Next.js Static Exports: การสร้างแอปพลิเคชันฝั่งไคลเอนต์เท่านั้น

Next.js เป็น React framework ที่ทรงพลังซึ่งช่วยให้นักพัฒนาสามารถสร้างเว็บแอปพลิเคชันที่มีประสิทธิภาพ, ขยายขนาดได้ และเป็นมิตรกับ SEO ในขณะที่ Next.js มีชื่อเสียงในด้านความสามารถในการเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) และการสร้างเว็บไซต์แบบสถิต (SSG) มันยังมีความยืดหยุ่นในการสร้างแอปพลิเคชันฝั่งไคลเอนต์เท่านั้นโดยใช้ static exports แนวทางนี้ช่วยให้คุณสามารถใช้ประโยชน์จากเครื่องมือและโครงสร้างของ Next.js ในขณะที่ปรับใช้แอปพลิเคชันฝั่งไคลเอนต์ล้วนๆ โพสต์นี้จะแนะนำคุณเกี่ยวกับทุกสิ่งที่คุณต้องรู้เกี่ยวกับการสร้างแอปพลิเคชันฝั่งไคลเอนต์เท่านั้นด้วย Next.js static exports โดยครอบคลุมถึงข้อดี, ข้อจำกัด, กระบวนการตั้งค่า และเทคนิคขั้นสูง

Next.js Static Exports คืออะไร?

Static exports ใน Next.js หมายถึงกระบวนการสร้างแอปพลิเคชันเวอร์ชัน static อย่างสมบูรณ์ในระหว่างกระบวนการ build ซึ่งหมายความว่าไฟล์ HTML, CSS และ JavaScript ทั้งหมดจะถูก pre-render และพร้อมที่จะให้บริการโดยตรงจากเซิร์ฟเวอร์ไฟล์ static (เช่น Netlify, Vercel, AWS S3 หรือเว็บเซิร์ฟเวอร์แบบดั้งเดิม) ซึ่งแตกต่างจากแอปพลิเคชันที่เรนเดอร์ฝั่งเซิร์ฟเวอร์ ไม่จำเป็นต้องมีเซิร์ฟเวอร์ Node.js เพื่อจัดการกับคำขอที่เข้ามา แต่แอปพลิเคชันทั้งหมดจะถูกส่งมอบเป็นชุดของแอสเซท static

เมื่อตั้งเป้าหมายเป็นแอปพลิเคชันฝั่งไคลเอนต์เท่านั้น Next.js จะสร้างแอสเซท static เหล่านี้โดยตั้งสมมติฐานว่าพฤติกรรมไดนามิกทั้งหมดจะถูกจัดการโดย JavaScript ฝั่งไคลเอนต์ สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับ Single Page Applications (SPAs) ที่ส่วนใหญ่ต้องพึ่งพาการกำหนดเส้นทางฝั่งไคลเอนต์, การเรียก API และการโต้ตอบของผู้ใช้

ทำไมถึงเลือก Static Exports สำหรับแอปพลิเคชันฝั่งไคลเอนต์?

การสร้างแอปพลิเคชันฝั่งไคลเอนต์ด้วย Next.js static exports มีข้อดีที่น่าสนใจหลายประการ:

ข้อจำกัดของ Static Exports

แม้ว่า static exports จะมีประโยชน์มากมาย แต่สิ่งสำคัญคือต้องตระหนักถึงข้อจำกัดของมัน:

การตั้งค่า Next.js สำหรับ Static Exports

นี่คือคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการตั้งค่า Next.js สำหรับ static exports:

1. สร้างโปรเจกต์ Next.js ใหม่

หากคุณยังไม่มีโปรเจกต์ Next.js ให้สร้างขึ้นใหม่โดยใช้คำสั่งต่อไปนี้:

npx create-next-app my-client-app

เลือกระหว่างการตั้งค่าตามที่เหมาะสมกับความต้องการของคุณ (เช่น TypeScript, ESLint)

2. กำหนดค่า `next.config.js`

เปิดไฟล์ `next.config.js` ที่ root ของโปรเจกต์ของคุณและเพิ่มการกำหนดค่าต่อไปนี้:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  // see https://nextjs.org/docs/app/api-reference/next-config#trailing-slash
  // experimental:
  //  {appDir: false}
}

module.exports = nextConfig

ตัวเลือก `output: 'export'` จะบอกให้ Next.js สร้าง static export ของแอปพลิเคชันของคุณ การตั้งค่า `trailingSlash: true` โดยทั่วไปแนะนำเพื่อให้แน่ใจว่าโครงสร้าง URL สอดคล้องกันและหลีกเลี่ยงปัญหา SEO ที่อาจเกิดขึ้น

3. อัปเดต `package.json`

แก้ไขส่วน `scripts` ของไฟล์ `package.json` ของคุณเพื่อรวมสคริปต์ build สำหรับ static exports:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  }
}

สคริปต์นี้จะทำการ build แอปพลิเคชัน Next.js ของคุณก่อน แล้วจึง export ไปยังไดเรกทอรี static

4. การใช้งาน Client-Side Routing

เนื่องจากคุณกำลังสร้างแอปพลิเคชันฝั่งไคลเอนต์ คุณจะต้องใช้การกำหนดเส้นทางฝั่งไคลเอนต์โดยใช้โมดูล `next/router` หรือไลบรารีของบุคคลที่สามเช่น `react-router-dom` นี่คือตัวอย่างการใช้ `next/router`:

import { useRouter } from 'next/router';
import Link from 'next/link';

function HomePage() {
  const router = useRouter();

  const handleClick = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the home page!</p>
      <button onClick={handleClick}>Go to About Page</button>

      <Link href="/about">
         <a>Go to About Page (using Link)</a>
      </Link>
    </div>
  );
}

export default HomePage;

อย่าลืมใช้คอมโพเนนต์ `Link` จาก `next/link` สำหรับการนำทางภายในเพื่อให้แน่ใจว่าการเปลี่ยนหน้าฝั่งไคลเอนต์เป็นไปอย่างราบรื่น

5. การจัดการการดึงข้อมูลฝั่งไคลเอนต์

ในแอปพลิเคชันฝั่งไคลเอนต์ การดึงข้อมูลทั้งหมดจะต้องทำที่ฝั่งไคลเอนต์โดยใช้เทคนิคต่างๆ เช่น `useEffect` หรือ `useState` hooks ตัวอย่างเช่น:

import { useState, useEffect } from 'react';

function DataPage() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!data) return <p>No data to display</p>;

  return (
    <div>
      <h1>Data Page</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataPage;

6. Build และ Export แอปพลิเคชันของคุณ

รันสคริปต์ build เพื่อสร้าง static export:

npm run build

คำสั่งนี้จะสร้างไดเรกทอรี `out` (หรือ `public` ขึ้นอยู่กับเวอร์ชันของ Next.js) ซึ่งมีไฟล์ HTML, CSS และ JavaScript แบบ static สำหรับแอปพลิเคชันของคุณ

7. ปรับใช้เว็บไซต์ Static ของคุณ

ตอนนี้คุณสามารถปรับใช้เนื้อหาของไดเรกทอรี `out` ไปยังผู้ให้บริการโฮสติ้ง static เช่น Netlify, Vercel, AWS S3 หรือ GitHub Pages ผู้ให้บริการส่วนใหญ่มีการปรับใช้แบบลากและวางที่เรียบง่ายหรือเครื่องมือบรรทัดคำสั่งเพื่อทำให้กระบวนการเป็นไปโดยอัตโนมัติ

เทคนิคขั้นสูงสำหรับแอปพลิเคชัน Next.js ฝั่งไคลเอนต์

นี่คือเทคนิคขั้นสูงบางประการเพื่อเพิ่มประสิทธิภาพแอปพลิเคชัน Next.js ฝั่งไคลเอนต์ของคุณ:

1. Code Splitting และ Lazy Loading

ใช้ dynamic imports (`import()`) เพื่อแบ่งโค้ดของคุณออกเป็นส่วนเล็กๆ (chunks) ที่จะถูกโหลดตามความต้องการ สิ่งนี้สามารถปรับปรุงเวลาในการโหลดเริ่มต้นได้อย่างมาก โดยเฉพาะสำหรับแอปพลิเคชันขนาดใหญ่

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function MyPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

2. การปรับแต่งรูปภาพ

ใช้คอมโพเนนต์ `next/image` สำหรับการปรับแต่งรูปภาพ คอมโพเนนต์นี้จะปรับแต่งรูปภาพโดยอัตโนมัติสำหรับอุปกรณ์และขนาดหน้าจอต่างๆ ซึ่งช่วยปรับปรุงประสิทธิภาพและประสบการณ์ของผู้ใช้ รองรับ lazy loading, รูปภาพที่ตอบสนอง (responsive) และรูปแบบรูปภาพต่างๆ

import Image from 'next/image';

function MyComponent() {
  return (
    <Image
      src="/images/my-image.jpg"
      alt="My Image"
      width={500}
      height={300}
    />
  );
}

3. Service Workers

นำ service worker มาใช้เพื่อเปิดใช้งานฟังก์ชันออฟไลน์และปรับปรุงประสิทธิภาพ Service worker เป็นสคริปต์ที่ทำงานในพื้นหลังและสามารถดักจับคำขอเครือข่าย, แคชแอสเซท และส่งการแจ้งเตือนได้ ไลบรารีเช่น `next-pwa` สามารถทำให้กระบวนการเพิ่ม service worker ในแอปพลิเคชัน Next.js ของคุณง่ายขึ้น

4. Environment Variables

ใช้ environment variables เพื่อกำหนดค่าแอปพลิเคชันของคุณสำหรับสภาพแวดล้อมต่างๆ (เช่น development, staging, production) Next.js มีการสนับสนุนในตัวสำหรับ environment variables ผ่านไฟล์ `.env` และอ็อบเจกต์ `process.env` ระวังอย่าเปิดเผยข้อมูลที่ละเอียดอ่อนในโค้ดฝั่งไคลเอนต์ ใช้ environment variables สำหรับการตั้งค่าการกำหนดค่าที่ปลอดภัยที่จะเปิดเผยเป็นหลัก

5. การตรวจสอบและวิเคราะห์

ผสานรวมบริการตรวจสอบและวิเคราะห์ (เช่น Google Analytics, Sentry หรือ New Relic) เพื่อติดตามตัวชี้วัดประสิทธิภาพ, ระบุข้อผิดพลาด และรับข้อมูลเชิงลึกเกี่ยวกับพฤติกรรมของผู้ใช้ สิ่งนี้จะช่วยให้คุณปรับแต่งแอปพลิเคชันและปรับปรุงประสบการณ์ของผู้ใช้เมื่อเวลาผ่านไป

6. การปรับแต่ง SEO ในแอปพลิเคชันฝั่งไคลเอนต์

ในขณะที่ static exports ให้โครงสร้าง HTML เริ่มต้น ให้พิจารณากลยุทธ์เหล่านี้เพื่อ SEO ที่ดีขึ้นในแอปพลิเคชันที่เน้นฝั่งไคลเอนต์:

ข้อควรพิจารณาด้าน Internationalization (i18n)

เมื่อสร้างแอปพลิเคชันฝั่งไคลเอนต์สำหรับผู้ชมทั่วโลก การทำให้เป็นสากล (i18n) เป็นสิ่งสำคัญ นี่คือแนวทางปฏิบัติที่ดีที่สุดบางประการ:

การเลือกแนวทางที่เหมาะสม: Static Export กับ Server-Side Rendering

การตัดสินใจว่าจะใช้ static exports หรือการเรนเดอร์ฝั่งเซิร์ฟเวอร์ขึ้นอยู่กับความต้องการเฉพาะของแอปพลิเคชันของคุณ พิจารณาปัจจัยต่อไปนี้:

ตัวอย่างการใช้งานจริง

นี่คือตัวอย่างการใช้งานจริงของแอปพลิเคชันที่สามารถได้รับประโยชน์จาก Next.js static exports:

ตัวอย่าง: เว็บไซต์บริษัทข้ามชาติ

ลองจินตนาการถึงบริษัทที่มีสำนักงานในนิวยอร์ก ลอนดอน และโตเกียว พวกเขาต้องการเว็บไซต์ที่ให้บริการในภาษาอังกฤษ ฝรั่งเศส และญี่ปุ่น Next.js static export ที่ผสมผสานกับ headless CMS และไลบรารี i18n อาจเป็นทางเลือกในอุดมคติ CMS จะจัดเก็บเนื้อหาที่แปลแล้ว Next.js จะดึงข้อมูลและเรนเดอร์ฝั่งไคลเอนต์ และเว็บไซต์ static สามารถปรับใช้ทั่วโลกบน CDN เพื่อการเข้าถึงที่รวดเร็ว

บทสรุป

Next.js static exports เป็นวิธีที่ทรงพลังในการสร้างแอปพลิเคชันฝั่งไคลเอนต์เท่านั้นพร้อมกับประโยชน์ของเฟรมเวิร์ก Next.js ด้วยความเข้าใจในข้อดี, ข้อจำกัด, กระบวนการตั้งค่า และเทคนิคขั้นสูง คุณสามารถสร้างประสบการณ์เว็บที่รวดเร็ว, ปลอดภัย และเข้าถึงได้ทั่วโลกซึ่งตรงตามความต้องการเฉพาะของคุณ ไม่ว่าคุณจะสร้างหน้า Landing Page ที่เรียบง่ายหรือ SPA ที่ซับซ้อน static exports สามารถเป็นเครื่องมือที่มีค่าในคลังแสงการพัฒนาเว็บของคุณ