การใช้งาน Function ในภาษา Next.js แบบง่ายๆ พร้อมตัวอย่าง CODE และอธิบายการทำงาน

Next.js เป็นเฟรมเวิร์คที่ได้รับความนิยมในการพัฒนาแอปพลิเคชันเว็บ ด้วยความสามารถในการจัดการ routing, server-side rendering (SSR), และ static site generation (SSG) ทำให้การพัฒนาเว็บเป็นเรื่องที่ง่ายและมีประสิทธิภาพ หากคุณยังใหม่กับ Next.js และต้องการเข้าใจเรื่องฟังก์ชันการทำงานใน Next.js เราจะมาทำความรู้จักกันในบทความนี้

ฟังก์ชันใน Next.js คืออะไร?

ฟังก์ชันใน Next.js สามารถมีหลายรูปแบบ ขึ้นอยู่กับการใช้งาน อาจเป็นการสร้าง components, API routes หรือการจัดการ data fetching ฟังก์ชันเหล่านี้ช่วยให้เราเข้าถึงการทำงานที่ซับซ้อนยิ่งขึ้น โดยสามารถช่วยลดความซับซ้อนในโค้ดได้ และช่วยทำให้โค้ดอ่านง่ายขึ้น

ตัวอย่างฟังก์ชันในการสร้าง Component

มาดูตัวอย่างฟังก์ชันใน Next.js ที่ใช้สำหรับสร้าง component กัน คำว่า "component" ในที่นี้หมายถึง บล็อกเล็ก ๆ ของโค้ดที่ใช้แสดงข้อมูลในหน้าเว็บ

1. สร้าง Component พื้นฐาน

เราจะเริ่มจากการสร้าง component พื้นฐาน โดยใช้งานฟังก์ชันในภาษา JavaScript เพื่อทำให้โค้ดสั้นลงและอ่านง่าย

 // components/Hello.js
import React from 'react';

function Hello({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Hello;

ในตัวอย่างนี้ เรากำหนดฟังก์ชัน `Hello` ที่รับ props ชื่อ `name` และแสดงข้อความ "Hello, {name}!"

2. นำ Component มาใช้ใน Page

หลังจากสร้าง component แล้ว เราจะนำไปใช้งานในหน้าเว็บหลัก

 // pages/index.js
import Hello from '../components/Hello';

export default function Home() {
  return (
    <div>
      <Hello name="ผู้ใช้" />
    </div>
  );
}

ตัวอย่างการทำงานของ API Routes

Next.js ยังมีฟีเจอร์ที่เรียกว่า API Routes ซึ่งช่วยให้เราสามารถสร้าง API endpoint ได้โดยไม่ต้องตั้งค่า server แยกต่างหาก มาเริ่มเขียน API ของเรากันดีกว่า

1. สร้าง API Route

 // pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from API!' });
}

2. เรียกใช้งาน API ที่สร้างขึ้น

เราสามารถเรียกใช้ API ที่เราสร้างขึ้นมาใน component ได้

 // components/FetchHello.js
import React, { useEffect, useState } from 'react';

function FetchHello() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('/api/hello')
      .then(response => response.json())
      .then(data => setMessage(data.message));
  }, []);

  return <h2>{message}</h2>;
}

export default FetchHello;

และนำ FetchHello ไปใช้ในหน้า

 // pages/index.js
import Hello from '../components/Hello';
import FetchHello from '../components/FetchHello';

export default function Home() {
  return (
    <div>
      <Hello name="ผู้ใช้" />
      <FetchHello />
    </div>
  );
}

Use Case ในโลกจริง

การใช้ฟังก์ชันใน Next.js นั้นมีประโยชน์มากเมื่อพูดถึงการพัฒนาเว็บแอปพลิเคชันในตลาดปัจจุบัน ตัวอย่างเช่น:

สรุป

การใช้งานฟังก์ชันใน Next.js ไม่เพียงแต่ทำให้โค้ดของเรามีความเป็นระเบียบและอ่านง่ายขึ้น แต่ยังช่วยเพิ่มประสิทธิภาพในการพัฒนาเว็บแอปพลิเคชันที่ทันสมัยและใช้งานจริงได้ หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Next.js หรือภาษาการเขียนโปรแกรมอื่น ๆ อย่าลืมมาศึกษากับเราที่ EPT (Expert-Programming-Tutor) ที่นี่เรามีหลักสูตรการสอนที่เหมาะสำหรับทุกคน ไม่ว่าจะเป็นผู้เริ่มต้นหรือผู้ที่มีประสบการณ์แล้ว พวกเราพร้อมที่จะนำคุณสู่โลกของการเขียนโปรแกรมไปด้วยกัน!

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