การสร้าง Component และการนำไปใช้ใน Next.js

ถ้าคุณเป็นสาย React และกำลังใช้ Next.js เพื่อสร้างเว็บแอป คุณอาจสงสัยว่า "การสร้าง Component และนำไปใช้ใน Next.js ต่างจาก React ปกติยังไง?"

จริง ๆ แล้วหลักการสร้าง Component ใน Next.js ก็คล้ายกับ React ทั่วไป แต่ Next.js มีฟีเจอร์พิเศษบางอย่างที่ช่วยให้การจัดการ Component มีประสิทธิภาพขึ้น

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

Component คืออะไร?

Component เป็นส่วนย่อยของ UI ที่สามารถนำมาใช้ซ้ำได้ ตัวอย่างเช่น

• ปุ่ม (Button)
• แถบนำทาง (Navbar)
• การ์ดแสดงข้อมูล (Card)
• กล่องข้อความ (Input field)

แทนที่เราจะเขียนโค้ดซ้ำ ๆ ทุกหน้า เราสามารถสร้าง Component และนำไปใช้ซ้ำได้ทั่วทั้งเว็บ

1. การสร้าง Component ใน Next.js

1.1 การสร้าง Component แบบพื้นฐาน

ใน Next.js ไฟล์ Component ควรเก็บไว้ในโฟลเดอร์ components/ เพื่อให้โครงสร้างโปรเจกต์ดูเป็นระเบียบ

ตัวอย่างการสร้าง Component Button.js

export default function Button({ text }) {
  return <button className="btn">{text}</button>;
}

Note:

• เราส่งค่า text ผ่าน Props เพื่อให้ปุ่มนี้สามารถแสดงข้อความที่แตกต่างกันได้
• ควรตั้งชื่อไฟล์เป็น ตัวพิมพ์ใหญ่ เช่น Button.js ตามหลักการตั้งชื่อ Component

 

1.2 การใช้ Component ในหน้า Next.js

เมื่อสร้าง Component แล้ว เราสามารถ import และใช้มันในไฟล์อื่น ได้ เช่นใน pages/index.js

ใช้ Button ในหน้า index.js

import Button from '../components/Button';

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js 🚀</h1>
      <Button text="คลิกเลย!" />
      <Button text="สมัครสมาชิก" />
    </div>
  );
}

✅ ผลลัพธ์ที่ได้:

Welcome to Next.js 🚀  
[ คลิกเลย! ]  [ สมัครสมาชิก ]

1.3 การส่งค่า Props ไปยัง Component

Props เป็นค่าที่ส่งจาก Parent Component ไปยัง Child Component
ทำให้เราสามารถปรับแต่ง Component ได้ง่ายขึ้น

ตัวอย่าง Component Card.js รับค่า Props

export default function Card({ title, description }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}


การใช้ Card ใน index.js

import Card from '../components/Card';

export default function Home() {
  return (
    <div>
      <h1>รายการบทความ</h1>
      <Card title="Next.js คืออะไร?" description="Next.js เป็น React Framework ที่ได้รับความนิยมมาก" />
      <Card title="การใช้ API Routes" description="API Routes ช่วยให้เราสร้าง Backend ใน Next.js ได้ง่าย" />
    </div>
  );
}


✅ ผลลัพธ์ที่ได้:

รายการบทความ  
----------------  
Next.js คืออะไร?  
Next.js เป็น React Framework ที่ได้รับความนิยมมาก  

การใช้ API Routes  
API Routes ช่วยให้เราสร้าง Backend ใน Next.js ได้ง่าย  


สังเกต:

• เราสามารถใช้ Card ได้หลายครั้งโดยเปลี่ยนค่า Props
• ทำให้โค้ดดูสะอาด และจัดการง่ายขึ้น

2. การจัดการ Layout ด้วย Component

Next.js มีไฟล์ _app.js ซึ่งช่วยให้เราสร้าง Layout ที่ใช้ซ้ำกันทุกหน้า ได้ง่ายขึ้น

2.1 สร้าง Layout Component

ไฟล์ components/Layout.js

export default function Layout({ children }) {
  return (
    <div>
      <header>🔥 My Website</header>
      <main>{children}</main>
      <footer>⚡ Powered by Next.js</footer>
    </div>
  );
}

2.2 ใช้ Layout ใน _app.js

import Layout from '../components/Layout';
import '../styles/globals.css';

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

✅ ผลลัพธ์ที่ได้

• ทุกหน้าจะมี Header และ Footer โดยอัตโนมัติ

3. การใช้ CSS ใน Component

Next.js รองรับการใช้ CSS ได้หลายแบบ เช่น

•     Global CSS (styles/globals.css)
•     Module CSS (.module.css)
•     Styled Components

3.1 ใช้ Global CSS

ไฟล์: styles/globals.css

.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

ไฟล์: components/Button.js

import '../styles/globals.css';

export default function Button({ text }) {
  return <button className="btn">{text}</button>;
}


✅ ข้อดีของ Global CSS

•     ใช้งานง่าย และใช้ได้กับทุก Component

3.2 ใช้ Module CSS (แนะนำ)

ไฟล์: components/Button.module.css

.btn {
  background-color: red;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

ไฟล์: components/Button.js

import styles from './Button.module.css';

export default function Button({ text }) {
  return <button className={styles.btn}>{text}</button>;
}


✅ ข้อดีของ Module CSS

• ป้องกันการชนกันของ CSS
• ทำให้โค้ดเป็นระเบียบ

สรุป

หัวข้อ	วิธีใช้งาน
สร้าง Component	ใช้ Function Component (export default function Component() {})
ใช้ Component	import Component from '../components/Component'
ส่งค่าเข้า Component	ใช้ Props (<Component name="John" />)
ใช้ Layout ซ้ำกันทุกหน้า	ใช้ _app.js และ Layout Component
ใช้ CSS ใน Component	ใช้ Global CSS หรือ Module CSS

ข้อดีของการใช้ Component ใน Next.js
✅ โค้ดสะอาดขึ้น
✅ ใช้ซ้ำได้
✅ โหลดเร็วขึ้น (Static Optimization)

การจัดการ Layout ด้วย _app.js และ _document.js ใน Next.js

ถ้าคุณเคยเขียนเว็บแอปด้วย Next.js แล้วต้องการให้ทุกหน้ามีโครงสร้าง Layout เหมือนกัน เช่น มี Header, Footer, หรือใช้ธีมเดียวกัน คุณอาจจะเจอปัญหาว่า "ฉันต้องคัดลอกโค้ดพวกนี้ไปทุกหน้าเลยเหรอ?"

ข่าวดีคือ Next.js มีไฟล์พิเศษ _app.js และ _document.js ที่ช่วยให้เราจัดการ Layout และโครงสร้างเอกสาร HTML ได้ง่ายขึ้น!

ในบทความนี้ เราจะมาทำความเข้าใจว่า _app.js และ _document.js คืออะไร ใช้งานยังไง และมีเทคนิคอะไรที่ช่วยให้เว็บเราทำงานได้ดีขึ้น พร้อมตัวอย่างโค้ดแบบเข้าใจง่าย

 _app.js และ _document.js คืออะไร?

📌 _app.js (หรือ _app.tsx สำหรับ TypeScript)

• เป็นไฟล์ที่ทำหน้าที่ ครอบทุกหน้าในเว็บของเรา
• ใช้สำหรับ จัดการ Layout เช่น ใส่ Header, Footer, Theme, Global CSS
• ใช้เพื่อ ควบคุม state ของแอป เช่น Redux, Context API

📌 _document.js

• ใช้เพื่อกำหนด โครงสร้าง HTML พื้นฐาน ของเว็บ
• ใช้ใส่พวก Meta tags, Font, Script ที่ต้องโหลดก่อนหน้าเว็บ
• ใช้แก้ไข <html>, <head>, <body> ที่ Next.js สร้างขึ้นอัตโนมัติ

1. _app.js – ควบคุม Layout ของเว็บ

โค้ดตัวอย่าง _app.js

import '../styles/globals.css';

export default function MyApp({ Component, pageProps }) {
  return (
    <div>
      <header>My Header</header>
      <main>
        <Component {...pageProps} />
      </main>
      <footer>My Footer</footer>
    </div>
  );
}

อธิบายโค้ด

• Component คือหน้าที่เรากำลังเข้าถึง เช่น /about หรือ /contact
• pageProps คือข้อมูลที่ถูกส่งไปยังหน้านั้น ๆ
• <header> และ <footer> จะอยู่เหมือนกันทุกหน้า

✅ ข้อดีของการใช้ _app.js

• ทำให้ทุกหน้ามี Layout เหมือนกัน
• ลดโค้ดซ้ำซ้อน ไม่ต้องใส่ <header> หรือ <footer> เองทุกหน้า

2. ใช้ Layout แยกตามหน้า

บางหน้าของเว็บอาจต้องการ Layout ที่แตกต่างกัน เช่น หน้า Dashboard กับหน้า Landing Page อาจใช้ Layout คนละแบบ
 

วิธีใช้ Layout แบบกำหนดเอง

export default function MyApp({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => page);

  return getLayout(<Component {...pageProps} />);
}

จากนั้นที่หน้าไหนที่ต้องการ Layout พิเศษ ให้เพิ่มฟังก์ชัน getLayout

import DashboardLayout from '../components/DashboardLayout';

export default function Dashboard() {
  return <h1>This is Dashboard</h1>;
}

Dashboard.getLayout = function getLayout(page) {
  return <DashboardLayout>{page}</DashboardLayout>;
};

✅ ข้อดีของวิธีนี้

• ทำให้แต่ละหน้าสามารถใช้ Layout ที่แตกต่างกันได้
• ไม่ต้องใช้เงื่อนไข if ใน _app.js ให้ยุ่งยาก

3. _document.js – ควบคุมโครงสร้าง HTML

ปกติแล้ว Next.js สร้างโครงสร้าง HTML อัตโนมัติให้ แต่ถ้าเราต้องการเพิ่ม Meta Tags, Font, หรือแก้ไข <html> และ <body> เราต้องใช้ _document.js
 

โค้ดตัวอย่าง _document.js

import { Html, Head, Main, NextScript } from 'next/document';

export default function MyDocument() {
  return (
    <Html lang="th">
      <Head>
        <meta charSet="UTF-8" />
        <meta name="description" content="This is my Next.js app" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap"
          rel="stylesheet"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}


อธิบายโค้ด

• <Html lang="th"> → กำหนดภาษาเริ่มต้นเป็นภาษาไทย
• <meta> → ใส่ข้อมูลเกี่ยวกับเว็บ เช่น คำอธิบาย
• <link> → ใส่ฟอนต์จาก Google Fonts
• <Main /> → ตรงนี้คือเนื้อหาของแต่ละหน้า
• <NextScript /> → ใส่สคริปต์ที่ Next.js ต้องการ

✅ ข้อดีของการใช้ _document.js

• กำหนดค่า <html> และ <body> ได้
• ใส่ Global Meta Tags ได้ง่ายขึ้น
• ทำให้เว็บโหลดเร็วขึ้น (ใช้ preconnect, preload)

4. ใช้ _app.js และ _document.js ร่วมกันให้เกิดประโยชน์สูงสุด

ลองดูโค้ดตัวอย่างที่ผสมทั้ง _app.js และ _document.js ให้ทำงานร่วมกัน

 _app.js

import '../styles/globals.css';
import Layout from '../components/Layout';

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}


_document.js

import { Html, Head, Main, NextScript } from 'next/document';

export default function MyDocument() {
  return (
    <Html lang="en">
      <Head>
        <meta charSet="UTF-8" />
        <link rel="stylesheet" href="/global.css" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}


✅ ผลลัพธ์ที่ได้

• ทุกหน้าจะถูกครอบด้วย <Layout> ที่เราสร้าง
• Meta Tags และ Font ถูกใส่จาก _document.js
• โค้ดสะอาดและเป็นระเบียบ

สรุป

ความสามารถ	_app.js	_document.js
ควบคุม Layout	✅	❌
ใส่ Meta Tags	❌	✅
ใส่ CSS/Theme	✅	✅
ใส่ Script พิเศษ	❌	✅
แก้ไข <html> และ <body>	❌	✅

• _app.js ใช้สำหรับควบคุม Layout และการทำงานของแอป
• _document.js ใช้สำหรับกำหนดโครงสร้าง HTML และ Meta Tags

ถ้าคุณใช้งานทั้งสองไฟล์ให้ถูกวิธี เว็บของคุณจะเร็วขึ้น โหลดเร็วขึ้น และจัดการง่ายขึ้นแน่นอน!