Next.js Database NoSQL

การเขียน Code NoSQL CRUD โดยใช้ภาษา Next.js

ในยุคที่ข้อมูลถูกสร้างขึ้นอย่างรวดเร็วและกระจายไปทั่วทุกพื้นที่ การจัดการข้อมูลในรูปแบบ NoSQL จึงกลายเป็นเรื่องที่สำคัญ โดยเฉพาะสำหรับแอปพลิเคชันที่ต้องการทนต่อการเปลี่ยนแปลงและขนาดข้อมูลที่เติบโตขึ้นเรื่อย ๆ ในบทความนี้ เราจะพูดถึงการเขียน Code NoSQL CRUD (Create, Read, Update, Delete) โดยใช้ Next.js ซึ่งเป็น Framework ที่ได้รับความนิยมอย่างมากในหมู่นักพัฒนาเว็บ

ทำไมถึงเลือกใช้ Next.js?

Next.js เป็น Framework ที่พัฒนาขึ้นบน React ซึ่งให้ความสะดวกในการสร้างแอปพลิเคชันในรูปแบบ SPA (Single Page Application) ที่มีประสิทธิภาพสูง นอกจากนี้ยังรองรับการ Server-Side Rendering (SSR) และ Static Site Generation (SSG) ทำให้ผู้ใช้สามารถเข้าถึงข้อมูลได้รวดเร็วยิ่งขึ้น

การติดตั้ง Next.js

ก่อนที่เราจะเริ่มเขียน Code เราต้องติดตั้ง Next.js ในโปรเจกต์ของเราก่อน สามารถทำได้ง่าย ๆ โดยใช้คำสั่งดังนี้:

 npx create-next-app my-nextjs-app
cd my-nextjs-app
npm install

เมื่อคุณสร้างโปรเจกต์เสร็จแล้ว ลงไปในโฟลเดอร์และติดตั้งแพ็กเกจที่จำเป็นสำหรับการเชื่อมต่อ NoSQL Database เช่น Firebase, MongoDB หรือ DynamoDB

การเชื่อมต่อ MongoDB

หากคุณเลือกใช้ MongoDB เป็นฐานข้อมูล NoSQL ของคุณ เราต้องติดตั้ง MongoDB Driver:

 npm install mongodb

และสร้างไฟล์ `lib/mongodb.js` เพื่อเชื่อมต่อกับฐานข้อมูล MongoDB ของคุณ:

 import { MongoClient } from 'mongodb';

const uri = process.env.MONGODB_URI;
const options = {};

let client;
let clientPromise;

if (process.env.NODE_ENV === 'development') {
  // ในระหว่างการพัฒนาใช้ MongoClient แบบปกติ
  client = new MongoClient(uri, options);
  clientPromise = client.connect();
} else {
  // ในโหมดผลิตใช้ MongoClient แบบ Single Instance
  client = new MongoClient(uri, options);
  clientPromise = client.connect();
}

export default clientPromise;

โปรดตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่า `MONGODB_URI` ในไฟล์ `.env.local`

CRUD Operations ขั้นพื้นฐาน

ตอนนี้เรามาเริ่มทำงานกับ CRUD operations กันดีกว่า!

Create Operation

เพื่อสร้างข้อมูลใหม่ใน MongoDB เราจะสร้าง API Route ในโฟลเดอร์ `pages/api/post.js`:

 import clientPromise from '../../lib/mongodb';

export default async function handler(req, res) {
  const client = await clientPromise;
  const db = client.db('mydatabase');

  switch (req.method) {
    case 'POST':
      const { title, content } = req.body;
      const result = await db.collection('posts').insertOne({
        title,
        content,
        createdAt: new Date(),
      });
      res.json(result.ops[0]);
      break;
    default:
      res.setHeader('Allow', ['POST']);
      res.status(405).end(`Method ${req.method} Not Allowed`);
      break;
  }
}

ในตัวอย่างข้างต้น เมื่อมีการส่งคำขอ POST เราจะรับข้อมูลจาก `req.body` และนำไปเก็บยังคอลเล็กชัน "posts"

Read Operation

สำหรับการอ่านข้อมูล สามารถสร้างเพจแสดงข้อมูลใน `pages/posts.js` ดังนี้:

 import Head from 'next/head';
import clientPromise from '../lib/mongodb';

export default function Posts({ posts }) {
  return (
    <div>
      <Head>
        <title>My Posts</title>
      </Head>
      <h1>Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post._id}>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export async function getServerSideProps() {
  const client = await clientPromise;
  const db = client.db('mydatabase');
  const posts = await db.collection('posts').find({}).toArray();

  return {
    props: { posts: JSON.parse(JSON.stringify(posts)) },
  };
}

ในที่นี้ เราจะใช้ `getServerSideProps` เพื่อดึงข้อมูลจากฐานข้อมูล และส่งข้อมูลดังกล่าวไปยังคอมโพเนนต์เพื่อแสดงในหน้า HTML

Update Operation

การอัปเดตข้อมูลใน MongoDB สามารถทำได้โดยการสร้าง API ใน `pages/api/update.js`:

 import clientPromise from '../../lib/mongodb';

export default async function handler(req, res) {
  const client = await clientPromise;
  const db = client.db('mydatabase');

  switch (req.method) {
    case 'PUT':
      const { id, title, content } = req.body;
      const result = await db.collection('posts').updateOne(
        { _id: new ObjectId(id) },
        { $set: { title, content } }
      );
      res.json(result);
      break;
    default:
      res.setHeader('Allow', ['PUT']);
      res.status(405).end(`Method ${req.method} Not Allowed`);
      break;
  }
}

ในกรณีนี้ เราสามารถส่งคำขอ PUT พร้อมกับ ID ของโพสต์ที่เราต้องการอัปเดตและข้อมูลใหม่ โดยจะทำการอัปเดตในคอลเล็กชัน "posts"

Delete Operation

ในการลบข้อมูล เราจะสร้าง API ใน `pages/api/delete.js`:

 import clientPromise from '../../lib/mongodb';

export default async function handler(req, res) {
  const client = await clientPromise;
  const db = client.db('mydatabase');

  switch (req.method) {
    case 'DELETE':
      const { id } = req.body;
      const result = await db.collection('posts').deleteOne({ _id: new ObjectId(id) });
      res.json(result);
      break;
    default:
      res.setHeader('Allow', ['DELETE']);
      res.status(405).end(`Method ${req.method} Not Allowed`);
      break;
  }
}

ลักษณะการทำงาน

ทุกครั้งที่คุณสร้าง อัปเดต หรือ ลบโพสต์จากฐานข้อมูล คำขอ HTTP จะถูกส่งไปยัง API และที่นั่นคุณจะได้จัดการ CRUD operations ตามประเภทคำขอนั้น

สรุป

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

หากคุณสนใจในการเรียนรู้เพิ่มเติมเกี่ยวกับเทคนิคการพัฒนาโปรแกรม สร้างแอปพลิเคชัน และการใช้งานเทคโนโลยีขั้นสูง สามารถเข้าไปที่เว็บไซต์ของเรา EPT และเริ่มเรียนรู้กันเถอะ!

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

Tag ที่น่าสนใจ: java c# vb.net python c c++ machine_learning web database oop cloud aws ios android

บทความนี้อาจจะมีที่ผิด กรุณาตรวจสอบก่อนใช้

หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor

ไม่อยากอ่าน Tutorial อยากมาเรียนเลยทำอย่างไร?

สมัครเรียน ONLINE ได้ทันทีที่ https://elearn.expert-programming-tutor.com

หรือติดต่อ

085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM

แผนที่ ที่ตั้งของอาคารของเรา

EXPERT-PROGRAMMING-TUTOR
รับสอนเขียนโปรแกรมคอมพิวเตอร์

NoSQL

การเขียน Code NoSQL CRUD โดยใช้ภาษา Next.js

ทำไมถึงเลือกใช้ Next.js?

การติดตั้ง Next.js

CRUD Operations ขั้นพื้นฐาน

สรุป

บทความนี้อาจจะมีที่ผิด กรุณาตรวจสอบก่อนใช้

ไม่อยากอ่าน Tutorial อยากมาเรียนเลยทำอย่างไร?

สมัครเรียน ONLINE ได้ทันทีที่ https://elearn.expert-programming-tutor.com

หรือติดต่อ

แผนผังการเรียนเขียนโปรแกรม

Link อื่นๆ

ติดต่อเราได้ที่

EXPERT-PROGRAMMING-TUTOR รับสอนเขียนโปรแกรมคอมพิวเตอร์

NoSQL

การเขียน Code NoSQL CRUD โดยใช้ภาษา Next.js

ทำไมถึงเลือกใช้ Next.js?

การติดตั้ง Next.js

CRUD Operations ขั้นพื้นฐาน

สรุป

บทความนี้อาจจะมีที่ผิด กรุณาตรวจสอบก่อนใช้

ไม่อยากอ่าน Tutorial อยากมาเรียนเลยทำอย่างไร?

สมัครเรียน ONLINE ได้ทันทีที่ https://elearn.expert-programming-tutor.com

หรือติดต่อ

แผนผังการเรียนเขียนโปรแกรม

Link อื่นๆ

ติดต่อเราได้ที่

EXPERT-PROGRAMMING-TUTOR
รับสอนเขียนโปรแกรมคอมพิวเตอร์