Postgresql create a table step by step in Next.js

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

1. ทำความรู้จักกับ PostgreSQL และ Next.js

ก่อนอื่น ให้เราเริ่มจากการทำความรู้จักกับ PostgreSQL กันก่อนดีกว่า PostgreSQL เป็นระบบจัดการฐานข้อมูลเชิงสัมพันธ์ (RDBMS) ที่ใช้งานได้ฟรีและมีคุณสมบัติที่หลากหลาย โดยเฉพาะการสนับสนุน SQL และมีการขยายได้อย่างง่ายดาย

ในขณะที่ Next.js เป็นเฟรมเวิร์คสำหรับ React ที่ช่วยในการสร้างเว็บแอปพลิเคชัน ที่สนับสนุนการเรนเดอร์ฝั่งเซิร์ฟเวอร์ (Server-Side Rendering) ทำให้หน้าเว็บรวดเร็วและเป็นมิตรกับ SEO

2. การเตรียมโพสต์เกรส (PostgreSQL)

ก่อนที่คุณจะเริ่มสร้างตาราง คุณควรมี PostgreSQL ติดตั้งอยู่ในเครื่องของคุณ หรือสามารถใช้งานผ่านบริการคลาวด์ เช่น Heroku ก็ได้ ขั้นตอนแรกคือการสร้างฐานข้อมูลใหม่ใน PostgreSQL

 CREATE DATABASE my_database;

3. การติดตั้ง dependences ใน Next.js

คุณต้องติดตั้ง PostgreSQL client ในโปรเจกต์ Next.js ของคุณ โดยใช้ `pg` ซึ่งเป็นไลบรารีที่ช่วยในการเชื่อมต่อ PostgreSQL

เปิดเทอร์มินัลและรันคำสั่งด้านล่าง:

 npm install pg

4. การสร้างตารางใน PostgreSQL

หลังจากที่คุณได้สร้างฐานข้อมูลใหม่แล้ว ให้เราไปที่การสร้างตาราง โดยเราจะสร้างตารางชื่อ `users` เพื่อเก็บข้อมูลผู้ใช้งาน

 CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

5. การเชื่อมต่อ PostgreSQL ใน Next.js

หลังจากที่เราสร้างตารางเรียบร้อยแล้ว ต่อไปเราจะเขียนโค้ดใน Next.js เพื่อเชื่อมต่อกับฐานข้อมูล PostgreSQL และทำการ Query ข้อมูล

สร้างไฟล์ `lib/db.js` ขึ้นมาและเขียนโค้ดด้านล่างนี้:

 import { Pool } from 'pg';

const pool = new Pool({
    user: 'your_username',
    host: 'localhost',
    database: 'my_database',
    password: 'your_password',
    port: 5432,
});

export const getUsers = async () => {
    const { rows } = await pool.query('SELECT * FROM users');
    return rows;
};

6. การเรียกดูข้อมูลผู้ใช้ใน Next.js

มาต่อกันที่การสร้าง API route เพื่อที่จะสามารถดึงข้อมูลจากฐานข้อมูลและแสดงในหน้าเว็บได้ สร้างไฟล์ `pages/api/users.js` ขึ้นมา

 import { getUsers } from '../../lib/db';

export default async function handler(req, res) {
    const users = await getUsers();
    res.status(200).json(users);
}

7. การเรียกใช้ API ใน Frontend

หลังจากที่เราได้สร้าง API เรียบร้อยแล้ว ให้เราไปที่หน้า `pages/index.js` เพื่อเรียกดูข้อมูลผู้ใช้และแสดงผลบนหน้าเว็บ

 import { useEffect, useState } from 'react';

export default function Home() {
    const [users, setUsers] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch('/api/users');
            const data = await response.json();
            setUsers(data);
        };
        fetchData();
    }, []);

    return (
        <div>
            <h1>User List</h1>
            <ul>
                {users.map(user => (
                    <li key={user.id}>{user.name} - {user.email}</li>
                ))}
            </ul>
        </div>
    );
}

8. Use Case ในโลกจริง

ในโลกของธุรกิจ การมีระบบจัดการผู้ใช้เป็นสิ่งที่สำคัญมาก เช่น แอปพลิเคชันที่ให้บริการออนไลน์ หรือ เว็บไซต์อีคอมเมิร์ซ ทุกธุรกิจจำเป็นต้องมีฐานข้อมูลเพื่อเก็บข้อมูลของลูกค้า ซึ่ง PostgreSQL เป็นทางเลือกที่ดีสำหรับการสร้างระบบจัดการข้อมูลที่มีประสิทธิภาพ

สรุป

การสร้างตารางใน PostgreSQL ด้วย Next.js เป็นกระบวนการที่ไม่ซับซ้อน หากคุณมีการเตรียมตัวที่ถูกต้อง โดยบทความนี้เราได้แสดงตัวอย่างการสร้างตาราง การเชื่อมต่อฐานข้อมูล และการเรียกดูข้อมูลจากตารางใน Next.js อย่างง่าย พร้อมทั้งยกตัวอย่าง use case ในโลกจริงให้คุณได้เห็นประโยชน์การใช้งานจริง

หากคุณสนใจศึกษาเพิ่มเติมเกี่ยวกับการโปรแกรมและระบบฐานข้อมูล สามารถเข้าร่วมเรียนที่ EPT (Expert-Programming-Tutor) ซึ่งเรามีหลักสูตรการสอนที่ครอบคลุม ไม่ว่าจะเป็นการเขียนโปรแกรมหรือการจัดการฐานข้อมูล จะทำให้คุณมีความรู้และทักษะที่จำเป็นในการทำงานในวงการนี้

ให้การเรียนโปรแกรมเป็นเรื่องสนุกกับ EPT ตั้งแต่วันนี้!

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