Home » Next.js 15 สิ่งใหม่ที่ต้องรู้ สำหรับ Frontend Developer
ไม่มีหมวดหมู่

Next.js 15 สิ่งใหม่ที่ต้องรู้ สำหรับ Frontend Developer

March 17, 2026
2 Views

สวัสดีครับ! ในโลกของการพัฒนาเว็บที่เปลี่ยนแปลงอย่างรวดเร็ว Next.js ได้พิสูจน์ตัวเองแล้วว่าเป็นหนึ่งในเฟรมเวิร์ก React ที่ทรงพลังและได้รับความนิยมสูงสุด ด้วยความสามารถในการสร้างแอปพลิเคชันที่รวดเร็ว ปรับขนาดได้ และเป็นมิตรกับ SEO สำหรับนักพัฒนา Frontend ทุกคน การมาถึงของ Next.js 15 จึงเป็นเหตุการณ์สำคัญที่ไม่อาจมองข้ามได้เลยครับ

Next.js 15 ไม่ได้เป็นเพียงการอัปเดตเวอร์ชันธรรมดา แต่เป็นการก้าวครั้งใหญ่ที่ผสานรวมนวัตกรรมล่าสุดจาก React และนำเสนอคุณสมบัติใหม่ๆ ที่จะยกระดับประสบการณ์การพัฒนาและประสิทธิภาพของแอปพลิเคชันไปอีกขั้น ไม่ว่าคุณจะเป็นนักพัฒนาที่คุ้นเคยกับ Next.js อยู่แล้ว หรือกำลังมองหาเครื่องมือใหม่ๆ สำหรับโปรเจกต์ถัดไป บทความนี้จะเจาะลึกทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับ Next.js 15 เพื่อให้คุณสามารถนำสิ่งใหม่ๆ เหล่านี้ไปปรับใช้และสร้างสรรค์ผลงานได้อย่างเต็มศักยภาพครับ

เราจะพาคุณไปสำรวจตั้งแต่การรวม React 19 อย่างเต็มรูปแบบ ซึ่งรวมถึง React Compiler และ Hooks ใหม่ๆ ไปจนถึง App Router ที่เสถียรยิ่งขึ้น, Partial Prerendering ที่ปฏิวัติการเรนเดอร์, และ Turbopack ที่เร็วดุจสายฟ้า เตรียมตัวให้พร้อมสำหรับการเดินทางสู่ยุคใหม่ของการพัฒนาเว็บด้วย Next.js 15 กันเลยครับ!

สารบัญ

Next.js 15 คืออะไร และสำคัญอย่างไร?

Next.js 15 คือการอัปเดตครั้งสำคัญของเฟรมเวิร์ก Next.js ที่มาพร้อมกับการผสานรวม React 19 อย่างเต็มรูปแบบ ซึ่งรวมถึงคุณสมบัติใหม่ๆ ที่ล้ำสมัยอย่าง React Compiler (Forget Memo), Hooks ใหม่ๆ เช่น use, useFormStatus, useOptimistic และ Server Actions ที่จะเปลี่ยนวิธีการเขียนโค้ด React ของคุณไปอย่างสิ้นเชิงครับ

นอกจากนี้ Next.js 15 ยังประกาศความเสถียรของ App Router และ Turbopack ซึ่งหมายความว่าเทคโนโลยีเหล่านี้พร้อมสำหรับการใช้งานจริงในโปรดักชันแล้ว และที่น่าตื่นเต้นที่สุดคือการเปิดตัว Partial Prerendering (PPR) ในรูปแบบ Preview ซึ่งเป็นแนวคิดใหม่ในการเรนเดอร์ที่รวมจุดเด่นของ Static Site Generation (SSG) และ Server-Side Rendering (SSR) เข้าไว้ด้วยกัน เพื่อมอบประสิทธิภาพและความยืดหยุ่นที่ไม่เคยมีมาก่อน

ความสำคัญของ Next.js 15 คือการที่มันผลักดันขีดจำกัดของการพัฒนาเว็บให้ก้าวไปข้างหน้า ด้วยการมอบเครื่องมือที่ช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชันที่เร็วขึ้น ประหยัดทรัพยากรมากขึ้น และมอบประสบการณ์ผู้ใช้ที่ดีที่สุด โดยไม่ลดทอนความง่ายในการพัฒนา การอัปเดตนี้สะท้อนให้เห็นถึงวิสัยทัศน์ของ Vercel และ React Team ในการสร้างเว็บแอปพลิเคชันที่ทันสมัยและมีประสิทธิภาพสูงสุดครับ

การผสานรวม React 19 อย่างลึกซึ้ง

หนึ่งในหัวใจสำคัญของ Next.js 15 คือการผสานรวมเข้ากับ React 19 ซึ่งนำเสนอความสามารถใหม่ๆ ที่จะเปลี่ยนวิธีการเขียนโค้ด React ของเราไปอย่างสิ้นเชิงครับ นี่คือคุณสมบัติหลักที่คุณต้องรู้:

React Compiler (Forget Memo)

นี่คือหนึ่งในคุณสมบัติที่น่าตื่นเต้นที่สุดของ React 19 และ Next.js 15 ครับ! React Compiler หรือที่รู้จักกันในชื่อเดิมว่า “Forget Memo” คือคอมไพเลอร์ที่จะเข้ามาช่วยจัดการเรื่องการ memoize คอมโพเนนต์และค่าต่างๆ ในแอปพลิเคชันของคุณโดยอัตโนมัติ

ปัญหาเดิม: ในการพัฒนา React เรามักจะต้องใช้ React.memo, useMemo, และ useCallback เพื่อป้องกันการเรนเดอร์ที่ไม่จำเป็น (unnecessary re-renders) ซึ่งเป็นสาเหตุของปัญหาประสิทธิภาพ และยังทำให้โค้ดของเราซับซ้อนและอ่านยากขึ้นอีกด้วย นักพัฒนาต้องคอยตัดสินใจเองว่าจะ memoize ส่วนไหนดี และบางครั้งก็อาจจะทำผิดพลาดหรือไม่ครบถ้วนครับ

React Compiler แก้ปัญหาอย่างไร: คอมไพเลอร์นี้จะวิเคราะห์โค้ด React ของคุณในระหว่างกระบวนการ build และทำการแทรก memoization ที่จำเป็นให้โดยอัตโนมัติ กล่าวคือ มันจะทำการเรนเดอร์คอมโพเนนต์ของคุณเมื่อจำเป็นเท่านั้น และจะข้ามการเรนเดอร์หาก props หรือ state ที่เกี่ยวข้องไม่ได้เปลี่ยนแปลงไปครับ

“React Compiler จะช่วยให้นักพัฒนาไม่ต้องกังวลเรื่องการ memoize อีกต่อไป พวกเขาสามารถเขียนโค้ด React ได้อย่างเป็นธรรมชาติ และคอมไพเลอร์จะดูแลเรื่องประสิทธิภาพให้โดยอัตโนมัติ”

ประโยชน์สำหรับนักพัฒนา:

  • ประสิทธิภาพที่ดีขึ้นโดยอัตโนมัติ: แอปพลิเคชันของคุณจะทำงานได้เร็วขึ้นโดยที่คุณไม่ต้องเขียนโค้ดเพิ่มเพื่อจัดการ memoization เลยครับ
  • ลดความซับซ้อนของโค้ด: คุณสามารถลบ useMemo, useCallback, และ React.memo ออกไปได้ (ในหลายๆ กรณี) ทำให้โค้ดของคุณสะอาดขึ้น อ่านง่ายขึ้น และบำรุงรักษาง่ายขึ้น
  • ลดข้อผิดพลาด: ไม่ต้องกังวลว่าจะลืม memoize หรือ memoize ผิดที่อีกต่อไป เพราะคอมไพเลอร์จะจัดการให้ครับ

ตัวอย่าง (ก่อนและหลัง React Compiler):

ก่อน (ที่คุณอาจจะต้องทำ):

import React, { useMemo, useCallback } from 'react';

function ProductItem({ product, onAddToCart }) {
  const formattedPrice = useMemo(() => {
    return `$${product.price.toFixed(2)}`;
  }, [product.price]);

  const handleAddToCartClick = useCallback(() => {
    onAddToCart(product.id);
  }, [onAddToCart, product.id]);

  return (
    <div>
      <h3>{product.name}</h3>
      <p>Price: <strong>{formattedPrice}</strong></p>
      <button onClick={handleAddToCartClick}>Add to Cart</button>
    </div>
  );
}

export default React.memo(ProductItem); // หรือ React.memo() สำหรับคอมโพเนนต์

หลัง (ด้วย React Compiler):

import React from 'react';

function ProductItem({ product, onAddToCart }) {
  const formattedPrice = `$${product.price.toFixed(2)}`; // Compiler จะจัดการ memoize ให้ถ้าจำเป็น

  const handleAddToCartClick = () => { // Compiler จะจัดการ memoize ให้ถ้าจำเป็น
    onAddToCart(product.id);
  };

  return (
    <div>
      <h3>{product.name}</h3>
      <p>Price: <strong>{formattedPrice}</strong></p>
      <button onClick={handleAddToCartClick}>Add to Cart</button>
    </div>
  );
}

export default ProductItem; // ไม่ต้องใช้ React.memo() โดยตรงแล้ว (ในหลายกรณี)

จะเห็นได้ว่าโค้ดสะอาดขึ้นอย่างเห็นได้ชัดเลยใช่ไหมครับ? นี่คืออนาคตของการเขียน React ที่มีประสิทธิภาพโดยไม่ต้องใช้ความพยายามเพิ่มเติมครับ

Hooks ใหม่: use, useFormStatus, useOptimistic

React 19 ยังแนะนำ Hooks ใหม่ๆ ที่ออกแบบมาเพื่อทำงานร่วมกับ Server Components และ Server Actions โดยเฉพาะ ซึ่งจะช่วยให้การจัดการข้อมูลและสถานะในแอปพลิเคชันของคุณง่ายและมีประสิทธิภาพยิ่งขึ้นครับ

use(promise) Hook

use Hook เป็นวิธีใหม่ในการอ่านค่าจาก Promise ในคอมโพเนนต์ React ได้โดยตรง! นี่เป็นความสามารถที่สำคัญมากสำหรับ React Server Components (RSC) และ Suspense

การใช้งาน:

import { use } from 'react';

async function fetchUserData(userId) {
  const response = await fetch(`/api/users/${userId}`);
  if (!response.ok) {
    throw new Error('Failed to fetch user data');
  }
  return response.json();
}

function UserProfile({ userId }) {
  // Use the `use` hook to read the promise directly
  const userData = use(fetchUserData(userId));

  return (
    <div>
      <h2>{userData.name}</h2>
      <p>Email: {userData.email}</p>
    </div>
  );
}

ประโยชน์:

  • โค้ดที่อ่านง่ายขึ้น: คุณสามารถเขียนโค้ดที่รอ Promise ในคอมโพเนนต์ได้โดยตรง เหมือนกับการใช้ await ในฟังก์ชัน async
  • ทำงานร่วมกับ Suspense: เมื่อ Promise ยังไม่ resolve, React จะแสดง Fallback UI ของ Suspense Boundary ที่อยู่เหนือคอมโพเนนต์นั้นๆ
  • ลด boilerplate: ไม่ต้องใช้ useState และ useEffect มาจัดการสถานะ loading/error/data สำหรับการ fetch ข้อมูลอีกต่อไปในหลายๆ กรณี

useFormStatus() Hook

Hook นี้ออกแบบมาเพื่อใช้กับ Server Actions โดยเฉพาะครับ มันช่วยให้คุณเข้าถึงสถานะของฟอร์มที่กำลังถูกส่ง (pending status) ได้จากคอมโพเนนต์ลูกที่อยู่ภายในฟอร์มนั้นๆ โดยไม่ต้องส่ง props ลงไป

การใช้งาน:

import { useFormStatus } from 'react-dom'; // Note: from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  );
}

function MyForm() {
  async function handleSubmit(formData) {
    // Simulate a server action
    await new Promise(resolve => setTimeout(resolve, 2000));
    const name = formData.get('name');
    console.log('Form submitted with name:', name);
    // You would typically call a server action here
  }

  return (
    <form action={handleSubmit}>
      <input type="text" name="name" placeholder="Your Name" />
      <SubmitButton />
    </form>
  );
}

ประโยชน์:

  • สร้าง UI ที่ตอบสนอง: สามารถปิดการใช้งานปุ่ม Submit หรือแสดงสถานะ Loading ได้อย่างง่ายดายเมื่อฟอร์มกำลังถูกส่ง
  • แยก Concerns: คอมโพเนนต์ปุ่มสามารถจัดการสถานะของตัวเองได้โดยไม่จำเป็นต้องรู้สถานะของฟอร์มจากคอมโพเนนต์แม่

useOptimistic(state, updater) Hook

useOptimistic Hook ช่วยให้คุณสามารถอัปเดต UI ชั่วคราว (optimistic update) ก่อนที่การเปลี่ยนแปลงข้อมูลจริงจะได้รับการยืนยันจากเซิร์ฟเวอร์ครับ ซึ่งช่วยให้แอปพลิเคชันรู้สึกรวดเร็วและตอบสนองได้ดีขึ้นมาก

การใช้งาน:

import { useOptimistic } from 'react';

// สมมติว่านี่คือ Server Action ของคุณ
async function addTodo(text) {
  // Simulate network delay
  await new Promise(resolve => setTimeout(resolve, 1000));
  return { id: Math.random(), text }; // Return the actual new todo
}

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (currentTodos, newTodo) => [
      ...currentTodos,
      { text: newTodo, sending: true, id: Math.random() }, // Add a temporary todo
    ]
  );

  async function handleAddTodo(formData) {
    const text = formData.get('todoText');
    if (!text) return;

    addOptimisticTodo(text); // Immediately update UI optimistically

    const newTodo = await addTodo(text); // Call server action
    setTodos(prev => [...prev, newTodo]); // Update actual state after server response
  }

  return (
    <div>
      <form action={handleAddTodo}>
        <input type="text" name="todoText" />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {optimisticTodos.map(todo => (
          <li key={todo.id} style={{ opacity: todo.sending ? 0.5 : 1 }}>
            {todo.text} {todo.sending && <em>(Sending...)</em>}
          </li>
        ))}
      </ul>
    </div>
  );
}

ประโยชน์:

  • ประสบการณ์ผู้ใช้ที่ดีขึ้น: ผู้ใช้เห็นการเปลี่ยนแปลงใน UI ทันที ไม่ต้องรอการตอบสนองจากเซิร์ฟเวอร์
  • ความรู้สึกที่รวดเร็ว: ลด perceived latency ทำให้แอปพลิเคชันรู้สึกเร็วขึ้นมาก
  • จัดการความผิดพลาดได้: หาก Server Action ล้มเหลว คุณสามารถย้อนกลับ (rollback) การเปลี่ยนแปลง optimistic นั้นได้

Server Actions: ปฏิวัติการจัดการฟอร์มและข้อมูล

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

หลักการทำงาน:

  • คุณสร้างฟังก์ชัน async ใน Server Component หรือ Client Component แล้วมาร์กด้วย 'use server'
  • ฟังก์ชันเหล่านี้สามารถเรียกใช้ได้โดยตรงจากเหตุการณ์ต่างๆ เช่น onClick ของปุ่ม หรือ action ของฟอร์ม
  • Next.js จะจัดการเรื่องการ serialization, การส่งผ่านข้อมูล และการเรียกใช้ฟังก์ชันบนเซิร์ฟเวอร์ให้โดยอัตโนมัติ

ประโยชน์:

  • ลด Boilerplate: ไม่ต้องเขียน API routes สำหรับการทำงานเล็กๆ น้อยๆ เช่น การอัปเดตข้อมูลผู้ใช้ หรือการเพิ่มรายการในฐานข้อมูล
  • ประสิทธิภาพที่ดีขึ้น: การทำงานบนเซิร์ฟเวอร์โดยตรงช่วยลดปริมาณโค้ด JavaScript ที่ต้องส่งไปยังไคลเอนต์
  • ความปลอดภัย: Server Actions ทำงานบนเซิร์ฟเวอร์ ทำให้ข้อมูลและ logic ที่สำคัญปลอดภัยกว่าการเปิดเผยผ่าน API endpoints ที่เข้าถึงได้โดยตรงจากไคลเอนต์
  • การจัดการสถานะที่ง่ายขึ้น: ทำงานร่วมกับ Hooks ใหม่ๆ เช่น useFormStatus และ useOptimistic ได้อย่างลงตัว

ตัวอย่าง Server Action:

import { revalidatePath } from 'next/cache';

// This function will run on the server
async function addTodo(formData) {
  'use server'; // Mark this function as a Server Action

  const todoText = formData.get('todoText');

  // Simulate database operation
  await new Promise(resolve => setTimeout(resolve, 500));
  console.log(`Adding todo: ${todoText}`);
  // In a real app, you'd interact with a database here
  // e.g., db.collection('todos').add({ text: todoText, completed: false });

  // Revalidate the path to show the new todo
  revalidatePath('/dashboard');
}

export default function AddTodoForm() {
  return (
    <form action={addTodo}>
      <input type="text" name="todoText" placeholder="Add a new todo" />
      <button type="submit">Add</button>
    </form>
  );
}

จะเห็นว่าเราสามารถเรียกใช้ฟังก์ชัน addTodo ได้โดยตรงจาก attribute action ของฟอร์ม โดยไม่ต้องสร้าง API Route สำหรับการนี้เลยครับ

Turbopack: Bundler ที่เร็วที่สุดในจักรวาล (เวอร์ชัน Stable)

Next.js 15 ประกาศความเสถียรของ Turbopack ซึ่งเป็น Bundler ที่เขียนด้วย Rust และพัฒนาโดย Vercel เอง Turbopack ถูกออกแบบมาเพื่อเป็นเครื่องมือ build ที่เร็วที่สุดสำหรับ JavaScript และ TypeScript โดยเฉพาะอย่างยิ่งสำหรับแอปพลิเคชัน Next.js ครับ

ทำไมต้อง Turbopack?

  • ความเร็ว: Turbopack เร็วกว่า Webpack ถึง 700 เท่าในการอัปเดตแบบ Hot Module Replacement (HMR) และเร็วกว่า Vite ถึง 10 เท่าสำหรับการอัปเดตโค้ดขนาดใหญ่
  • ประสิทธิภาพในการพัฒนา: การ build และการอัปเดตโค้ดที่รวดเร็วขึ้นอย่างมาก ช่วยให้นักพัฒนาสามารถทำงานได้อย่างมีประสิทธิภาพมากขึ้น ลดเวลารอคอย และเพิ่ม flow การทำงาน
  • ภาษา Rust: การเขียนด้วย Rust ทำให้ Turbopack มีประสิทธิภาพสูง ใช้หน่วยความจำน้อย และปลอดภัยจากข้อผิดพลาดบางประเภทที่พบได้ในภาษาอื่นๆ
  • เป็นส่วนหนึ่งของ Next.js: Turbopack ถูกรวมเข้ากับ Next.js โดยตรง ทำให้การตั้งค่าและการใช้งานง่ายดาย

การใช้งาน:
Turbopack ถูกเปิดใช้งานเป็นค่าเริ่มต้นในโหมด Development ของ Next.js 15 ครับ คุณสามารถตรวจสอบได้จากการรัน next dev และมองหาข้อความที่ระบุว่ากำลังใช้ Turbopack

next dev

หากคุณต้องการเปรียบเทียบหรือบังคับใช้ Webpack คุณสามารถตั้งค่าใน next.config.mjs ได้ แต่โดยทั่วไปแล้ว การใช้ Turbopack จะมอบประสบการณ์การพัฒนาที่ดีที่สุดครับ

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  // ไม่ต้องตั้งค่าอะไรเป็นพิเศษ ถ้าต้องการใช้ Turbopack ใน dev mode
  // ถ้าต้องการบังคับใช้ webpack สำหรับ dev mode (ไม่แนะนำใน Next.js 15)
  // webpack: (config, { isServer }) => {
  //   if (process.env.NEXT_BUILD_DEBUG === 'true') {
  //     // Custom webpack config
  //   }
  //   return config;
  // },
};

export default nextConfig;

ความเสถียรของ Turbopack หมายความว่านักพัฒนาสามารถพึ่งพาความเร็วและประสิทธิภาพของมันได้อย่างเต็มที่ ซึ่งจะช่วยเร่งกระบวนการพัฒนาแอปพลิเคชัน Next.js ได้อย่างที่ไม่เคยมีมาก่อนครับ

App Router: เส้นทางหลักที่เสถียรและทรงพลังยิ่งขึ้น

Next.js 15 ประกาศว่า App Router ได้รับการพิจารณาว่า Stable อย่างเป็นทางการแล้วครับ นี่เป็นข่าวดีสำหรับนักพัฒนาทุกคนที่กำลังพิจารณาหรือกำลังใช้งาน App Router อยู่ App Router เป็นวิธีการจัดการ Routing และการเรนเดอร์แบบใหม่ใน Next.js ที่สร้างขึ้นบนพื้นฐานของ React Server Components (RSC) และ React Suspense

ทำไม App Router ถึงสำคัญ?

  • ประสิทธิภาพ: ออกแบบมาเพื่อประสิทธิภาพสูงสุด ด้วยการใช้ Server Components เพื่อลดปริมาณ JavaScript ที่ส่งไปยังไคลเอนต์
  • ความยืดหยุ่น: รองรับการเรนเดอร์หลากหลายรูปแบบในเส้นทางเดียว ทั้ง Server Components, Client Components, Streaming และ Suspense
  • ประสบการณ์นักพัฒนา: มอบโครงสร้างการจัดการ Routing ที่มีระบบระเบียบมากขึ้น ด้วยไฟล์ conventions ที่ชัดเจน (layout.js, page.js, loading.js, error.js)
  • อนาคตของ React: App Router ถูกสร้างขึ้นโดยคำนึงถึงวิวัฒนาการของ React ทำให้คุณสามารถใช้ประโยชน์จากคุณสมบัติใหม่ๆ เช่น Hooks ใน React 19 ได้อย่างเต็มที่

โครงสร้างพื้นฐานของ App Router:

  • app/: ไดเรกทอรีหลักสำหรับ App Router
  • layout.js: สำหรับโครงสร้าง UI ที่ใช้ร่วมกันระหว่างหลายๆ เส้นทาง
  • page.js: สำหรับเนื้อหาหลักของแต่ละเส้นทาง
  • loading.js: แสดง UI ระหว่างที่กำลังโหลดข้อมูลสำหรับเส้นทางนั้นๆ
  • error.js: จัดการข้อผิดพลาดที่เกิดขึ้นในเส้นทาง
  • route.js: สำหรับสร้าง API endpoints (แทนที่ pages/api)

ตัวอย่างโครงสร้าง App Router:

app/
├── layout.js       # Root layout
├── page.js         # Root page (e.g., homepage)
├── dashboard/
│   ├── layout.js   # Dashboard layout
│   ├── page.js     # Dashboard page
│   ├── settings/
│   │   ├── page.js # Dashboard settings page
│   └── profile/
│       ├── page.js # Dashboard profile page
├── blog/
│   ├── [slug]/
│   │   ├── page.js # Dynamic blog post page (e.g., /blog/my-first-post)
│   └── page.js     # Blog list page

Server Components (RSC): หัวใจของ App Router

React Server Components (RSC) เป็นแนวคิดที่ปฏิวัติวงการในการเรนเดอร์คอมโพเนนต์ React โดยให้คอมโพเนนต์สามารถทำงานได้ทั้งบนเซิร์ฟเวอร์และไคลเอนต์ครับ

หลักการทำงานของ RSC:

  • รันบนเซิร์ฟเวอร์: Server Components จะถูกเรนเดอร์บนเซิร์ฟเวอร์เท่านั้น
  • ส่ง HTML/CSS/JSON: แทนที่จะส่ง JavaScript ทั้งหมดไปยังไคลเอนต์ Server Components จะส่งเฉพาะ HTML, CSS และข้อมูลที่จำเป็นเท่านั้น
  • ลด Bundle Size: โค้ดที่เกี่ยวข้องกับ Server Components จะไม่ถูกรวมอยู่ใน JavaScript bundle ของไคลเอนต์เลย ทำให้ bundle size เล็กลงอย่างมาก
  • เข้าถึงทรัพยากรเซิร์ฟเวอร์: Server Components สามารถเข้าถึงฐานข้อมูล, file system, หรือ API keys ได้โดยตรงอย่างปลอดภัย โดยไม่ต้องผ่าน API layer
  • ไม่มี Interactive State: Server Components ไม่สามารถใช้ Hooks เช่น useState, useEffect หรือจัดการ Event Listeners ได้โดยตรง เพราะมันไม่ได้ทำงานบนไคลเอนต์

Client Components:
ในทางตรงกันข้าม Client Components คือคอมโพเนนต์ที่คุณคุ้นเคยกันดี ซึ่งทำงานบนไคลเอนต์และสามารถใช้ Hooks, จัดการ Interactive State และ Event Listeners ได้ หากต้องการให้คอมโพเนนต์เป็น Client Component คุณต้องเพิ่ม 'use client'; ไว้ที่ด้านบนสุดของไฟล์ครับ

เมื่อไหร่ควรใช้ Server Components vs. Client Components:

  • Server Components:
    • เมื่อต้องการ fetch ข้อมูลจากฐานข้อมูลหรือ API ภายในเซิร์ฟเวอร์
    • เมื่อต้องการลด JavaScript bundle size ของไคลเอนต์
    • สำหรับ UI ที่ไม่ต้องการ interactivity มากนัก (เช่น การแสดงผลข้อมูล)
    • เพื่อความปลอดภัยในการเข้าถึงข้อมูลสำคัญของเซิร์ฟเวอร์
  • Client Components:
    • เมื่อต้องการใช้ Hooks เช่น useState, useEffect, useContext
    • เมื่อต้องการ Event Listeners (onClick, onChange)
    • เมื่อต้องการใช้ Browser APIs (localStorage, window)
    • เมื่อต้องการใช้ไลบรารีของบุคคลที่สามที่ต้องทำงานบนไคลเอนต์ (เช่น แผนที่แบบ Interactive)

ตัวอย่าง:

// app/products/page.js (Server Component โดยค่าเริ่มต้น)
import ProductList from './ProductList'; // นี่คือ Server Component

async function getProducts() {
  // สามารถเรียกฐานข้อมูลได้โดยตรง หรือ fetch จาก internal API
  const res = await fetch('https://api.example.com/products', { cache: 'no-store' });
  if (!res.ok) throw new Error('Failed to fetch products');
  return res.json();
}

export default async function ProductsPage() {
  const products = await getProducts();
  return (
    <div>
      <h1>Our Products</h1>
      <ProductList products={products} />
    </div>
  );
}

// app/products/ProductList.js (Server Component)
import AddToCartButton from './AddToCartButton'; // นี่คือ Client Component

export default function ProductList({ products }) {
  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>
          {product.name} - ${product.price}
          <AddToCartButton productId={product.id} />
        </li>
      ))}
    </ul>
  );
}

// app/products/AddToCartButton.js (Client Component)
'use client';

import { useState } from 'react';

export default function AddToCartButton({ productId }) {
  const [quantity, setQuantity] = useState(0);

  const handleAddToCart = () => {
    setQuantity(prev => prev + 1);
    console.log(`Added product ${productId} to cart. Current quantity: ${quantity + 1}`);
    // Ideally, you'd use a Server Action here to update the cart on the server.
    // import { addItemToCart } from '@/lib/cart-actions';
    // addItemToCart(productId);
  };

  return (
    <button onClick={handleAddToCart}>
      Add to Cart ({quantity})
    </button>
  );
}

การจัดการข้อมูลใน App Router ที่เหนือกว่า

App Router นำเสนอแนวคิดที่ยืดหยุ่นและมีประสิทธิภาพในการจัดการข้อมูล โดยใช้ fetch API ที่ได้รับการปรับปรุงให้ทำงานร่วมกับ React Cache และ Next.js Caching ได้อย่างลงตัว

คุณสมบัติหลัก:

  • fetch API ที่ปรับปรุง: fetch ใน Server Components ถูกขยายให้รองรับตัวเลือกการแคชที่ Next.js จัดการให้โดยอัตโนมัติ
  • Automatic Caching: Next.js จะแคชผลลัพธ์ของ fetch ใน Server Components โดยอัตโนมัติ ทำให้การเรียกข้อมูลซ้ำๆ ในระหว่างการเรนเดอร์ครั้งเดียวกัน หรือระหว่างการเรนเดอร์ที่แตกต่างกัน (เช่น SSG/ISR) มีประสิทธิภาพมากขึ้น
  • Revalidation: คุณสามารถกำหนดนโยบายการ revalidate ข้อมูลได้ทั้งแบบ Time-based (ISR) หรือ On-demand revalidation โดยใช้ revalidate option ใน fetch หรือ revalidatePath/revalidateTag จาก next/cache
  • Streaming และ Suspense: การเรียกข้อมูลที่ใช้เวลานานจะไม่บล็อกการเรนเดอร์หน้าเว็บทั้งหมด แต่จะแสดง Fallback UI ในระหว่างที่ข้อมูลกำลังโหลด

ตัวอย่างการ Fetch ข้อมูลและการ Revalidate:

// app/products/page.js
import { cache } from 'react'; // From React 19

// Cache data for 60 seconds (Incremental Static Regeneration)
async function getProductsISG() {
  const res = await fetch('https://api.example.com/products', { next: { revalidate: 60 } });
  if (!res.ok) throw new Error('Failed to fetch products');
  return res.json();
}

// Don't cache data (Server-Side Rendering on every request)
async function getProductsSSR() {
  const res = await fetch('https://api.example.com/products', { cache: 'no-store' });
  if (!res.ok) throw new Error('Failed to fetch products');
  return res.json();
}

// Statically generate data at build time (Static Site Generation)
// This is the default behavior if no revalidate or cache options are provided
async function getProductsSSG() {
  const res = await fetch('https://api.example.com/products');
  if (!res.ok) throw new Error('Failed to fetch products');
  return res.json();
}

// Function to fetch products that leverages React's cache and Next.js caching
// Using `cache` from React for deduplication during rendering
const getProducts = cache(async () => {
  const res = await fetch('https://api.example.com/products', {
    next: { tags: ['products'], revalidate: 3600 }, // Revalidate every hour, or on-demand via 'products' tag
  });
  if (!res.ok) throw new Error('Failed to fetch products');
  return res.json();
});

export default async function ProductsPage() {
  const products = await getProducts(); // This will use the cached data or fetch if expired/first time

  return (
    <div>
      <h1>Product Listing</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name} - ${product.price}</li>
        ))}
      </ul>
    </div>
  );
}

ด้วย App Router และการผสานรวม React 19 Next.js 15 มอบเครื่องมือที่ครบครันและทรงพลังสำหรับนักพัฒนาในการสร้างเว็บแอปพลิเคชันที่ซับซ้อนและมีประสิทธิภาพสูงครับ

อ่านเพิ่มเติมเกี่ยวกับ App Router ในเอกสาร Next.js

Partial Prerendering (PPR): การเรนเดอร์แบบผสมผสานยุคใหม่ (Preview)

Partial Prerendering (PPR) เป็นหนึ่งในคุณสมบัติที่น่าตื่นเต้นที่สุดที่ Next.js 15 นำเสนอครับ แม้จะยังอยู่ในช่วง Preview แต่แนวคิดของมันคือการปฏิวัติวิธีการเรนเดอร์เว็บแอปพลิเคชัน โดยรวมจุดเด่นของ Static Site Generation (SSG) และ Server-Side Rendering (SSR) เข้าไว้ด้วยกัน เพื่อมอบประสบการณ์ที่รวดเร็วและเป็นส่วนตัวในเวลาเดียวกัน

ปัญหาที่ PPR เข้ามาแก้ไข:

  • SSG: ให้ประสิทธิภาพสูงและ SEO ดีเยี่ยม แต่ไม่สามารถแสดงข้อมูลที่เปลี่ยนแปลงบ่อยหรือเป็นส่วนตัวได้ทันที
  • SSR: สามารถแสดงข้อมูลล่าสุดและเป็นส่วนตัวได้ แต่มี overhead ในการประมวลผลบนเซิร์ฟเวอร์ทุกครั้ง และอาจมี Time To First Byte (TTFB) ที่สูงกว่า
  • ISR: พยายามรวมสองสิ่งเข้าด้วยกัน แต่ยังคงต้องมีการ “รอ” revalidation และอาจมีปัญหา “stale data” ชั่วคราว

PPR เข้ามาแก้ปัญหาเหล่านี้โดยการแยกส่วน “คงที่” และ “ไดนามิก” ของหน้าเว็บออกจากกันตั้งแต่แรกเริ่ม

Partial Prerendering ทำงานอย่างไร?

แนวคิดหลักของ PPR คือการสร้าง “Static Shell” (เปลือกคงที่) ของหน้าเว็บในระหว่างกระบวนการ build time และในขณะเดียวกันก็ระบุ “Dynamic Holes” (ส่วนที่เปลี่ยนแปลงได้) ที่จะถูกสตรีมเข้ามาจากเซิร์ฟเวอร์ในภายหลัง

  1. Build Time: Next.js จะสร้าง HTML static shell ของหน้าเว็บของคุณ ซึ่งรวมถึงเนื้อหาคงที่ทั้งหมดและ “placeholder” สำหรับส่วนที่เป็นไดนามิก
  2. Initial Request (First Byte): เมื่อผู้ใช้ร้องขอหน้าเว็บ เซิร์ฟเวอร์จะส่ง Static Shell ที่สร้างไว้แล้วทันที นี่คือสิ่งที่ทำให้ TTFB ต่ำและรู้สึกเร็วเหมือน SSG
  3. Streaming Dynamic Content: ในขณะที่ผู้ใช้กำลังดู Static Shell, Next.js จะทำการ fetch ข้อมูลที่จำเป็นสำหรับ Dynamic Holes (เช่น ข้อมูลผู้ใช้ที่เข้าสู่ระบบ หรือสินค้าคงคลังล่าสุด) และสตรีม HTML ของส่วนเหล่านั้นเข้ามาแทนที่ Placeholder โดยใช้ React Suspense

สิ่งที่น่าสนใจคือ กระบวนการทั้งหมดนี้เกิดขึ้นใน HTTP Request เดียวกัน ทำให้ไม่ต้องมีการโหลดเพิ่มเติมหรือกระพริบตาของหน้าเว็บเหมือนกับการ hydrate ปกติ หรือการ fetch API แยกต่างหาก

ตัวอย่างแนวคิด PPR:

// app/dashboard/page.js
import { Suspense } from 'react';
import UserProfile from './UserProfile';
import RecentOrders from './RecentOrders';

export default function DashboardPage() {
  return (
    <div>
      <h1>Welcome to Your Dashboard!</h1>
      <section>
        <h2>Your Profile</h2>
        <Suspense fallback={<p>Loading profile...</p>}>
          <UserProfile /> {/* This component fetches dynamic user data */}
        </Suspense>
      </section>
      <section>
        <h2>Your Recent Orders</h2>
        <Suspense fallback={<p>Loading orders...</p>}>
          <RecentOrders /> {/* This component fetches dynamic order data */}
        </Suspense>
      </section>
      <footer>
        <p>Static footer content.</p>
      </footer>
    </div>
  );
}

// app/dashboard/UserProfile.js (Server Component)
async function getUserData() {
  // Simulate fetching user data from DB
  await new Promise(resolve => setTimeout(resolve, 1500));
  return { name: 'John Doe', email: '[email protected]' };
}

export default async function UserProfile() {
  const user = await getUserData();
  return (
    <div>
      <p>Name: <strong>{user.name}</strong></p>
      <p>Email: {user.email}</p>
    </div>
  );
}

ในตัวอย่างนี้ <h1> และ <footer> จะเป็นส่วนหนึ่งของ Static Shell ที่โหลดเร็ว ส่วน <UserProfile /> และ <RecentOrders /> ซึ่งถูกห่อหุ้มด้วย <Suspense> จะเป็น Dynamic Holes ที่จะถูกสตรีมเข้ามาเมื่อข้อมูลพร้อมครับ

ประโยชน์ของ Partial Prerendering

  • Performance ที่ยอดเยี่ยม: TTFB ต่ำมากเพราะส่ง Static Shell ก่อน ทำให้ผู้ใช้เห็นเนื้อหาได้อย่างรวดเร็ว
  • SEO Friendly: Search engines สามารถ crawl Static Shell ได้ทันที ซึ่งมีประโยชน์ต่อ SEO
  • Dynamic และ Personalized: สามารถแสดงข้อมูลที่เปลี่ยนแปลงบ่อยหรือเป็นส่วนตัวได้ โดยไม่ต้อง trade-off กับความเร็วของการโหลดหน้าเว็บครั้งแรก
  • ลด Overhead ของเซิร์ฟเวอร์: เซิร์ฟเวอร์ไม่จำเป็นต้องเรนเดอร์หน้าทั้งหน้าสำหรับทุกๆ request แค่จัดการส่วนที่เป็นไดนามิกเท่านั้น
  • ประสบการณ์ผู้ใช้ที่ราบรื่น: ผู้ใช้จะไม่รู้สึกว่ากำลังรอโหลดข้อมูล เพราะ Static Shell มาก่อนและส่วนไดนามิกจะค่อยๆ ปรากฏขึ้นอย่างเป็นธรรมชาติ

ตารางเปรียบเทียบ: PPR กับ SSR, SSG, ISR

เพื่อให้เห็นภาพชัดเจน เรามาดูตารางเปรียบเทียบ Partial Prerendering กับกลยุทธ์การเรนเดอร์แบบอื่นๆ ใน Next.js กันครับ

คุณสมบัติ Static Site Generation (SSG) Server-Side Rendering (SSR) Incremental Static Regeneration (ISR) Partial Prerendering (PPR)
เวลา Build สร้างหน้า HTML ทั้งหมดล่วงหน้า ไม่มีการสร้าง HTML ล่วงหน้า สร้างหน้า HTML ล่วงหน้า (เหมือน SSG) สร้าง Static Shell ล่วงหน้า
Time To First Byte (TTFB) ต่ำมาก (ส่งไฟล์ HTML ที่สร้างไว้แล้ว) ปานกลางถึงสูง (เซิร์ฟเวอร์ต้องประมวลผลก่อน) ต่ำมาก (ส่งไฟล์ HTML ที่สร้างไว้แล้ว) ต่ำมาก (ส่ง Static Shell ที่สร้างไว้แล้ว)
ข้อมูลล่าสุด ไม่ใช่ (ต้อง rebuild หรือ revalidate) ใช่ (เรนเดอร์ใหม่ทุก request) ใช่ (หลังจาก revalidation) ใช่ (ส่วน Dynamic ถูกสตรีมเข้ามาล่าสุด)
ข้อมูลส่วนบุคคล ทำไม่ได้โดยตรง (ต้องใช้ Client-side fetch) ทำได้ ทำไม่ได้โดยตรง (ต้องใช้ Client-side fetch) ทำได้ (ส่วน Dynamic)
SEO Friendly ยอดเยี่ยม (มี HTML พร้อมใช้งาน) ยอดเยี่ยม (มี HTML พร้อมใช้งาน) ยอดเยี่ยม (มี HTML พร้อมใช้งาน) ยอดเยี่ยม (Static Shell มี HTML พร้อมใช้งาน)
ความซับซ้อน ต่ำ ปานกลาง ปานกลางถึงสูง ปานกลาง (ต้องเข้าใจ Suspense)
Use Cases บล็อก, หน้า Landing Page, เอกสาร Dashboard, หน้าสินค้า e-commerce ที่ต้องการข้อมูลล่าสุด บล็อก, หน้าสินค้า e-commerce ที่ไม่เปลี่ยนแปลงบ่อย ทุกหน้าที่ต้องการทั้งความเร็วและข้อมูลล่าสุด/ส่วนตัว (e.g., e-commerce, social feeds)

Partial Prerendering เป็นอีกก้าวสำคัญที่ทำให้ Next.js สามารถตอบโจทย์การสร้างเว็บแอปพลิเคชันที่ซับซ้อนและมีประสิทธิภาพสูงได้อย่างแท้จริงครับ แม้จะยังเป็น Preview แต่ก็เป็นสิ่งที่เราควรจับตาดูและเตรียมพร้อมสำหรับการใช้งานจริงในอนาคต

การปรับปรุงกลไก Caching ที่ชาญฉลาดกว่าเดิม

Next.js 15 ได้รับการปรับปรุงกลไก Caching ให้มีความชาญฉลาดและยืดหยุ่นมากยิ่งขึ้น เพื่อให้แอปพลิเคชันของคุณทำงานได้เร็วขึ้นและใช้ทรัพยากรน้อยลง โดยเฉพาะอย่างยิ่งเมื่อทำงานร่วมกับ App Router และ React Server Components ครับ

ประเภทของ Caching ใน Next.js:

  1. Data Cache (fetch API):
    • Next.js จะแคชผลลัพธ์ของ fetch API ใน Server Components โดยอัตโนมัติ
    • คุณสามารถควบคุมพฤติกรรมการแคชได้โดยใช้ cache option ใน fetch ('force-cache', 'no-store', 'no-cache') หรือ next.revalidate และ next.tags option เพื่อกำหนดเวลา revalidate หรือ revalidate ตาม tag
    • เมื่อใช้ next.revalidate Next.js จะทำการ Incremental Static Regeneration (ISR) ให้กับข้อมูลนั้นๆ
  2. Full Route Cache:
    • Next.js แคช HTML และ React Server Component Payload (RSC Payload) ของเส้นทางที่เรนเดอร์แบบ Static หรือ ISR
    • เมื่อผู้ใช้เข้าชมเส้นทางเดิมอีกครั้ง Next.js สามารถส่ง HTML และ RSC Payload ที่แคชไว้ได้ทันที โดยไม่ต้องเรนเดอร์ใหม่
  3. Request Memoization (React Cache):
    • เมื่อเรียก fetch API ด้วย URL และ options เดียวกันภายใน React Render Pass เดียวกัน React จะทำการ deduplicate request นั้นๆ โดยอัตโนมัติ
    • คุณสามารถใช้ cache function จาก React เพื่อ memoize ฟังก์ชันการดึงข้อมูลของคุณ ทำให้มั่นใจได้ว่าข้อมูลจะถูกดึงมาเพียงครั้งเดียว แม้จะเรียกจากหลายคอมโพเนนต์ก็ตามครับ

การ Revalidate ข้อมูล:

Next.js มี API สำหรับการ revalidate ข้อมูลและเส้นทางเพื่อแสดงข้อมูลที่อัปเดตล่าสุด:

  • revalidatePath(path): ใช้เพื่อ revalidate เส้นทางที่กำหนด ทำให้ Next.js fetch ข้อมูลใหม่และสร้าง HTML/RSC Payload ใหม่สำหรับเส้นทางนั้นๆ
  • revalidateTag(tag): ใช้เพื่อ revalidate ข้อมูลที่ถูก fetch ด้วย fetch API และกำหนด next.tags ไว้

ตัวอย่างการใช้ next/cache:

// lib/data.js
import { cache } from 'react';
import { revalidateTag } from 'next/cache';

export const getProducts = cache(async () => {
  const res = await fetch('https://api.example.com/products', {
    next: { tags: ['products'], revalidate: 3600 }, // Cache for 1 hour, can be revalidated by tag
  });
  if (!res.ok) throw new Error('Failed to fetch products');
  return res.json();
});

export async function addProductToDatabase(productData) {
  'use server';
  // Logic to add product to database
  // ...
  // After adding, revalidate the 'products' tag to update the list on the frontend
  revalidateTag('products');
}

// app/products/page.js
import { getProducts } from '@/lib/data';
import AddProductForm from './AddProductForm';

export default async function ProductsPage() {
  const products = await getProducts(); // This will use cached data

  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
      <AddProductForm />
    </div>
  );
}

// app/products/AddProductForm.js
import { addProductToDatabase } from '@/lib/data';

export default function AddProductForm() {
  return (
    <form action={addProductToDatabase}>
      <input type="text" name="productName" placeholder="Product Name" />
      <button type="submit">Add Product</button>
    </form>
  );
}

การปรับปรุงเหล่านี้ช่วยให้นักพัฒนาสามารถควบคุมพฤติกรรมการแคชได้อย่างละเอียด ทำให้แอปพลิเคชัน Next.js 15 สามารถมอบประสิทธิภาพที่เหนือกว่าและลดภาระงานของเซิร์ฟเวอร์ได้อย่างมีนัยสำคัญครับ

Metadata API ที่ยืดหยุ่นและทรงพลัง

Next.js 15 ยังคงพัฒนา Metadata API ให้มีความยืดหยุ่นและทรงพลังมากยิ่งขึ้น เพื่อให้นักพัฒนาสามารถจัดการ SEO และ Social Media Sharing (Open Graph, Twitter Cards) ได้อย่างง่ายดายและมีประสิทธิภาพภายใน App Router ครับ

คุณสมบัติหลัก:

  • ไฟล์ metadata.js / metadata.ts: คุณสามารถสร้างไฟล์ metadata.js หรือ metadata.ts ในไดเรกทอรีใดก็ได้ใน App Router เพื่อกำหนด metadata สำหรับเส้นทางนั้นๆ
  • Static Metadata: ส่งออก Object metadata เพื่อกำหนดค่า metadata แบบคงที่
  • Dynamic Metadata: ส่งออกฟังก์ชัน generateMetadata แบบ async เพื่อดึงข้อมูลและสร้าง metadata แบบไดนามิก (เช่น ดึงชื่อบทความจากฐานข้อมูล)
  • Built-in Open Graph & Twitter Cards: รองรับการสร้าง Open Graph และ Twitter Card metadata โดยอัตโนมัติจากค่าที่คุณกำหนด
  • Fallback และ Merging: Metadata จะถูก merge จาก layout ที่อยู่เหนือกว่าลงมา ทำให้คุณสามารถกำหนด metadata พื้นฐานใน root layout และ override ได้ใน sub-layouts หรือ pages

ตัวอย่าง Static Metadata:

// app/layout.js
export const metadata = {
  title: 'My Awesome Next.js 15 App',
  description: 'Learn all about Next.js 15 new features.',
  openGraph: {
    title: 'My Awesome Next.js 15 App',
    description: 'Learn all about Next.js 15 new features.',
    url: 'https://www.siamlancard.com',
    siteName: 'SiamLancard',
    images: [
      {
        url: 'https://www.siamlancard.com/og-image.jpg',
        width: 800,
        height: 600,
      },
    ],
    locale: 'th_TH',
    type: 'website',
  },
};

export default function RootLayout({ children }) {
  return (
    <html lang="th">
      <body>{children}</body>
    </html>
  );
}

ตัวอย่าง Dynamic Metadata (สำหรับหน้าบทความ):

// app/blog/[slug]/page.js
import { notFound } from 'next/navigation';

async function getBlogPost(slug) {
  // Simulate fetching blog post from a database or API
  const posts = [
    { slug: 'nextjs-15-features', title: 'Next.js 15 New Features', content: '...', image: '/blog/nextjs15.jpg' },
    { slug: 'react-compiler', title: 'Understanding React Compiler', content: '...', image: '/blog/react-compiler.jpg' },
  ];
  return posts.find(post => post.slug === slug);
}

// Dynamic Metadata Generation
export async function generateMetadata({ params }) {
  const post = await getBlogPost(params.slug);

  if (!post) {
    return {
      title: 'Post Not Found',
      description: 'The blog post you are looking for does not exist.',
    };
  }

  return {
    title: post.title,
    description: post.content.substring(0, 150) + '...',
    openGraph: {
      title: post.title,
      description: post.content.substring(0, 150) + '...',
      images: [{ url: post.image }],
    },
  };
}

export default async function BlogPostPage({ params }) {
  const post = await getBlogPost(params.slug);

  if (!post) {
    notFound();
  }

  return (
    <article>
      <h1>{post.title}</h1>
      <img src={post.image} alt={post.title} style={{ maxWidth: '100%' }} />
      <p>{post.content}</p>
    </article>
  );
}

Metadata API ที่ได้รับการปรับปรุงนี้ช่วยให้คุณสามารถสร้างเนื้อหาที่เป็นมิตรกับ Search Engine และ Social Media ได้อย่างง่ายดายและมีประสิทธิภาพ ซึ่งเป็นสิ่งสำคัญอย่างยิ่งสำหรับแอปพลิเคชันเว็บสมัยใหม่ครับ

การรองรับ Internationalization (i18n) ที่ดียิ่งขึ้น

Next.js 15 ยังคงพัฒนาการรองรับ Internationalization (i18n) ให้ดียิ่งขึ้น เพื่อช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชันที่รองรับหลายภาษาได้อย่างราบรื่นและมีประสิทธิภาพครับ แม้ว่าจะไม่มีการเปลี่ยนแปลงที่รุนแรง แต่ก็มีการปรับปรุงเพื่อให้ทำงานร่วมกับ App Router ได้อย่างลงตัวและมีแนวทางปฏิบัติที่ชัดเจนขึ้น

แนวคิดหลักสำหรับการทำ i18n ใน App Router:

  1. Routing Conventions:
    • Next.js App Router แนะนำแนวคิดของ “Internationalized Routing” ซึ่งคุณสามารถกำหนด locale (ภาษา) เป็นส่วนหนึ่งของเส้นทางได้โดยตรง (เช่น /en/products, /th/products)
    • โดยทั่วไปแล้ว คุณจะใช้ Route Groups (วงเล็บ ()) เพื่อแยก locale ออกจากโครงสร้าง URL หลัก (เช่น app/[locale]/page.js)
  2. Localization Libraries:
    • Next.js แนะนำให้ใช้ไลบรารี i18n ที่เป็นที่นิยม เช่น react-i18next, next-intl, หรือ formatjs เพื่อจัดการข้อความแปล, รูปแบบวันที่/เวลา, และสกุลเงิน
    • เนื่องจาก Server Components ไม่มี state หรือ context คุณจะต้องส่งผ่าน locale ไปยัง Client Components ที่ต้องการการแปล หรือใช้ Server Components เพื่อดึงข้อความแปลจากไฟล์ JSON/CMS
  3. Middleware:
    • คุณสามารถใช้ Next.js Middleware เพื่อตรวจจับภาษาของผู้ใช้จาก Header (เช่น Accept-Language) หรือ Cookies และ redirect ผู้ใช้ไปยัง locale ที่เหมาะสมได้

ตัวอย่างโครงสร้าง i18n ด้วย Route Group:

app/
├── (default)/
│   ├── page.js           # Default locale (e.g., /)
│   └── layout.js
├── [locale]/             # Route Group สำหรับ locale
│   ├── layout.js         # Layout สำหรับทุกภาษา (เช่น กำหนด direction, fonts)
│   ├── page.js           # หน้าแรกของแต่ละภาษา (e.g., /en, /th)
│   ├── about/
│   │   ├── page.js       # หน้า About ของแต่ละภาษา (e.g., /en/about, /th/about)
│   └── products/
│       ├── page.js
│       └── [slug]/
│           ├── page.js
└── middleware.ts         # จัดการการ redirect locale

ตัวอย่าง middleware.ts สำหรับ i18n:

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

const locales = ['en', 'th'];
const defaultLocale = 'en';

// Get the preferred locale, similar to above or using a library
function getLocale(request: NextRequest) {
  const acceptLanguage = request.headers.get('accept-language');
  // Simple example: pick the first locale from the header, or default
  const preferredLocale = acceptLanguage
    ? acceptLanguage.split(',')[0].split('-')[0]
    : defaultLocale;
  
  if (locales.includes(preferredLocale)) {
    return preferredLocale;
  }
  return defaultLocale;
}

export function middleware(request: NextRequest) {
  // Check if there is any supported locale in the pathname
  const { pathname } = request.nextUrl;
  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  );

  if (pathnameHasLocale) return;

  // Redirect if there is no locale
  const locale = getLocale(request);
  request.nextUrl.pathname = `/${locale}${pathname}`;
  return NextResponse.redirect(request.nextUrl);
}

export const config = {
  matcher: [
    // Skip all internal paths (_next)
    '/((?!_next|api|favicon.ico|assets|images).*)',
  ],
};

ด้วยการใช้ประโยชน์จาก Route Groups, Middleware และ Server Components ทำให้ Next.js 15 มอบโครงสร้างที่แข็งแกร่งและยืดหยุ่นสำหรับการสร้างแอปพลิเคชันที่รองรับผู้ใช้ทั่วโลกครับ

Middleware ที่มีประสิทธิภาพและยืดหยุ่นกว่าเดิม

Next.js Middleware ได้รับการพัฒนาให้มีประสิทธิภาพและยืดหยุ่นมากยิ่งขึ้นใน Next.js 15 ครับ Middleware ช่วยให้คุณสามารถรันโค้ดก่อนที่ request จะถูกส่งไปยังหน้าเว็บหรือ API route ทำให้คุณสามารถจัดการกับ Logic ต่างๆ เช่น การยืนยันตัวตน, การจัดการ A/B testing, การเขียน URL ใหม่, หรือการจัดการ i18n ได้ที่ Edge โดยไม่ต้องประมวลผลบนเซิร์ฟเวอร์หลัก

คุณสมบัติและการใช้งาน:

  • รันที่ Edge: Middleware ทำงานใน Edge Runtime ซึ่งเป็นสภาพแวดล้อมที่รวดเร็วและกระจายตัวอยู่ทั่วโลก ทำให้ลด latency และเพิ่มประสิทธิภาพ
  • ไฟล์ middleware.ts / middleware.js: สร้างไฟล์ middleware.ts (หรือ .js) ที่ root ของโปรเจกต์ (ใน app/ หรือ src/)
  • NextRequest & NextResponse: คุณสามารถเข้าถึงข้อมูล request (headers, cookies, url) และสร้าง response (redirect, rewrite, set headers) ได้โดยใช้ Object เหล่านี้
  • Configuration (config): คุณสามารถกำหนด matcher ในไฟล์ Middleware เพื่อระบุว่า request ใดบ้างที่ควรผ่าน Middleware นี้

Use Cases ที่เป็นประโยชน์:

  • Authentication: ตรวจสอบสถานะการเข้าสู่ระบบของผู้ใช้และ redirect ไปยังหน้า Login หากไม่ได้รับอนุญาต
  • Authorization: ตรวจสอบสิทธิ์ของผู้ใช้ในการเข้าถึงเส้นทางต่างๆ
  • A/B Testing: กำหนดเวอร์ชันของหน้าเว็บที่จะแสดงให้ผู้ใช้แต่ละคนเห็น
  • URL Rewriting/Redirecting: เปลี่ยนแปลง URL หรือ redirect ผู้ใช้ไปยังเส้นทางอื่น
  • Internationalization (i18n): ตรวจจับภาษาของผู้ใช้และ redirect ไปยัง locale ที่เหมาะสม (ดังตัวอย่างข้างต้น)
  • Analytics: บันทึกข้อมูลการเข้าชมหรือเหตุการณ์ต่างๆ

ตัวอย่าง Authentication Middleware:

// middleware.ts

import { NextResponse } from 'next/server';

import type { NextRequest } from 'next/server';


export function middleware(request: NextRequest) {

  const isAuthenticated = request.cookies.get('sessionToken'); // สมมติว่ามี sessionToken ใน cookie


  // ตรวจสอบเส้นทางที่ต้องการการยืนยันตัวตน

  if (request.nextUrl.pathname.startsWith('/dashboard')) {

    if (!isAuthenticated) {

      // ถ้าไม่ได้ยืนยันตัวตน ให้ redirect ไปหน้า login

      const url = request.nextUrl.clone();

      url.pathname = '/login';

      return NextResponse.redirect(url);

    }

  }


  // อนุญาตให้ request ดำเนินการต่อไป

  return NextResponse.next();

}


export const config = {

  matcher: [

    /*

     * Match all request paths except for the ones starting with:

     * - _next/static (static files)

     * - _next/image (image optimization files)

     * - favicon.ico

     * - api (API routes, unless explicitly matched)

     * - and exclude public assets like images or fonts if you have them

     */

    '/((?!api|_next/static|_next/image|favicon.ico|assets).*)',

    	

บทความที่เกี่ยวข้อง
SiamCafe.net — ชุมชน IT ที่ใหญ่ที่สุด · Siam2R.com — Portfolio งาน IT

Related Articles
จัดส่งรวดเร็วส่งด่วนทั่วประเทศ
รับประกันสินค้าเคลมง่าย มีใบรับประกัน
ผ่อนชำระได้บัตรเครดิต 0% สูงสุด 10 เดือน
สะสมแต้ม รับส่วนลดส่วนลดและคะแนนสะสม

ติดต่อเรา | LINE: @siamlancard

Facebook | YouTube | LINE OA

เว็บในเครือ: SiamCafe.net | iCafeForex.com | Siam2R.com | XMSignal.com

© 2026 SiamLancard — จำหน่ายการ์ดแลน อุปกรณ์ Server และเครื่องพิมพ์ใบเสร็จ

SiamLancard
Logo
Free Forex EA Download — XM Signal · EA Forex ฟรี
iCafeForex.com - สอนเทรด Forex | SiamCafe.net
Shopping cart