How to Build a Basic CRUD App with Next.js?

บทนำ ในคู่มือนี้ เราจะพาคุณไปสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) แบบครบวงจร โดยใช้ next js สำหรับส่วนหน้า และ back4app เป็นโซลูชันส่วนหลังของคุณ คุณจะตั้งค่าโปรเจกต์ชื่อ basic crud app nextjs , ออกแบบสคีมาฐานข้อมูลที่มีพลศาสตร์ และรวมฟังก์ชัน crud ที่มีประสิทธิภาพเข้ากับแอป next js ของคุณ เราจะครอบคลุมทุกอย่างตั้งแต่การกำหนดค่าโปรเจกต์ back4app ของคุณและการออกแบบคอลเลกชัน ไปจนถึงการเชื่อมต่ออินเทอร์เฟซ next js ของคุณโดยใช้ parse sdk หรือวิธี rest/graphql เมื่อสิ้นสุด คุณจะมีแอปพลิเคชันเว็บที่พร้อมใช้งานในผลิตภัณฑ์ พร้อมการรับรองความถูกต้องของผู้ใช้ที่ปลอดภัยและการจัดการข้อมูลที่มีประสิทธิภาพ ข้อคิดสำคัญ สร้างแอปพลิเคชัน crud แบบเต็มรูปแบบด้วย next js และ back4app เรียนรู้การออกแบบสคีมาฐานข้อมูลที่ยืดหยุ่นซึ่งปรับให้เข้ากับความต้องการข้อมูลของคุณ ใช้ส่วนติดต่อผู้ดูแลระบบที่ใช้งานง่ายแบบลากและวางสำหรับการจัดการข้อมูล ค้นพบแนวทางปฏิบัติที่ดีที่สุดสำหรับการปรับใช้ รวมถึงการทำให้เป็นคอนเทนเนอร์ docker และการรวม github ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณมี บัญชี back4app ที่มีการตั้งค่าโปรเจกต์ใหม่ สำหรับคำแนะนำ โปรดดูที่ เริ่มต้นใช้งานกับ back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนา next js ใช้ สร้างแอป next https //nextjs org/docs/api reference/create next app หรือเครื่องมือที่คล้ายกัน ตรวจสอบให้แน่ใจว่าได้ติดตั้ง node js (เวอร์ชัน 14 หรือใหม่กว่า) ความเข้าใจพื้นฐานเกี่ยวกับ javascript, next js และการรวม api เยี่ยมชม เอกสาร next js https //nextjs org/docs เพื่อดูภาพรวมหากจำเป็น ขั้นตอนที่ 1 – การตั้งค่าโปรเจกต์ของคุณ เริ่มโปรเจกต์ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “แอปใหม่” บนแดชบอร์ดของคุณ ป้อนชื่อโปรเจกต์ basic crud app nextjs และทำตามคำแนะนำ สร้างโปรเจกต์ใหม่ โปรเจกต์ใหม่ของคุณจะแสดงในแดชบอร์ด ซึ่งทำหน้าที่เป็นแกนหลักสำหรับแบ็กเอนด์ของคุณ สร้างแอปพลิเคชัน next js ของคุณ เปิดเทอร์มินัลของคุณและรัน npx create next app\@latest basic crud app nextjs เปลี่ยนไปยังไดเรกทอรีโปรเจกต์ของคุณ cd basic crud app nextjs คำสั่งนี้จะตั้งค่าโครงสร้างโปรเจกต์ next js ที่พร้อมสำหรับการปรับแต่ง ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูลของคุณ การจัดโครงสร้างโมเดลข้อมูลของคุณ สำหรับแอป crud นี้ คุณจะสร้างคอลเลกชันที่จำเป็น สองคอลเลกชันหลักด้านล่างมีรายละเอียดฟิลด์ที่ช่วยให้ฟังก์ชันการทำงานหลัก 1 คอลเลกชันรายการ คอลเลกชันนี้เก็บรายละเอียดเกี่ยวกับแต่ละรายการ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือหัวข้อของรายการ คำอธิบาย สตริง สรุปสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่สร้างรายการ อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตล่าสุด 2 การเก็บรวบรวมผู้ใช้ การเก็บรวบรวมนี้จัดการโปรไฟล์ผู้ใช้และข้อมูลการตรวจสอบสิทธิ์ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อผู้ใช้ที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกัน รหัสผ่าน hash สตริง รหัสผ่านที่ถูกแฮชอย่างปลอดภัยสำหรับการตรวจสอบสิทธิ์ผู้ใช้ สร้างเมื่อ วันที่ เวลาที่บัญชีถูกสร้างขึ้น อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตบัญชีล่าสุด คุณสามารถกำหนดคอลเลกชันเหล่านี้ด้วยตนเองในแดชบอร์ด back4app โดยการสร้างคลาสใหม่สำหรับแต่ละคอลเลกชันและเพิ่มคอลัมน์ที่เกี่ยวข้อง สร้างคลาสใหม่ สร้างฟิลด์โดยการเลือกประเภทข้อมูลที่เหมาะสม ตั้งชื่อคอลัมน์ และตั้งค่าดีฟอลต์หรือข้อกำหนด สร้างคอลัมน์ การใช้ผู้ช่วย ai ของ back4app สำหรับการตั้งค่า schema ผู้ช่วย ai ของ back4app ช่วยให้การสร้าง schema ฐานข้อมูลเป็นไปอย่างราบรื่น อธิบายคอลเลกชันและฟิลด์ที่คุณต้องการ และให้ผู้ช่วยสร้างโครงสร้างโดยอัตโนมัติ ขั้นตอนการใช้ผู้ช่วย ai เปิดผู้ช่วย ai ค้นหามันในเมนูแดชบอร์ด back4app ของคุณ อธิบายโมเดลข้อมูลของคุณ วางข้อความที่ละเอียดซึ่งอธิบายคอลเลกชันและข้อกำหนดฟิลด์ของคุณ ตรวจสอบและนำไปใช้ ตรวจสอบ schema ที่สร้างขึ้นและนำไปใช้ในโปรเจกต์ของคุณ ตัวอย่างข้อความ create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) วิธีนี้ไม่เพียงแต่ช่วยประหยัดเวลา แต่ยังช่วยให้สคีมาของคุณสอดคล้องและปรับให้เหมาะสมอีกด้วย ขั้นตอนที่ 3 – เปิดใช้งานอินเทอร์เฟซผู้ดูแลระบบ & ฟีเจอร์ crud สำรวจอินเทอร์เฟซผู้ดูแลระบบ อินเทอร์เฟซผู้ดูแลระบบ back4app มีโซลูชันที่ไม่ต้องเขียนโค้ดเพื่อจัดการข้อมูลแบ็กเอนด์ของคุณ ด้วยระบบลากและวางที่ใช้งานง่าย คุณสามารถทำการดำเนินการ crud ได้อย่างง่ายดาย เปิดใช้งานอินเทอร์เฟซผู้ดูแลระบบ ไปที่ส่วน “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ คลิกที่ “แอปผู้ดูแล” จากนั้นเลือก “เปิดใช้งานแอปผู้ดูแล ” กำหนดค่าข้อมูลประจำตัวผู้ดูแลระบบของคุณ โดยการตั้งค่าผู้ใช้ผู้ดูแลระบบคนแรกของคุณ นี่ยังช่วยกำหนดบทบาทเช่น b4aadminuser และคอลเลกชันระบบที่จำเป็น เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งานแล้ว ให้เข้าสู่ระบบในส่วนติดต่อผู้ดูแลระบบเพื่อเริ่มจัดการข้อมูลของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การดำเนินการ crud ผ่านส่วนติดต่อผู้ดูแลระบบ ภายในส่วนติดต่อผู้ดูแลระบบ คุณสามารถ สร้างบันทึก ใช้ปุ่ม “เพิ่มบันทึก” ในคอลเลกชัน (เช่น รายการ) เพื่อแทรกข้อมูลใหม่ ดูหรืออัปเดตบันทึก คลิกที่บันทึกเพื่อดูหรือแก้ไขฟิลด์ของมัน ลบบันทึก ใช้ตัวเลือกลบเพื่อลบรายการที่ล้าสมัย ส่วนติดต่อที่เรียบง่ายนี้ทำให้การจัดการข้อมูลเป็นเรื่องง่ายและมีประสิทธิภาพ ขั้นตอนที่ 4 – เชื่อมต่อ next js กับ back4app เมื่อคุณตั้งค่าด้านหลังเสร็จแล้ว ขั้นตอนถัดไปคือการเชื่อมต่อแอปพลิเคชัน next js ของคุณ ตัวเลือก a ใช้ parse sdk ติดตั้ง parse sdk npm install parse เริ่มต้น parse ในแอป next js ของคุณ สร้างไฟล์ (เช่น, lib/parseconfig js ) // lib/parseconfig js import parse from 'parse'; // replace with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; รวม parse ในหน้า next js ตัวอย่างเช่น สร้างหน้าเพื่อดึงและแสดงรายการ // pages/index js import { useeffect, usestate } from 'react'; import parse from ' /lib/parseconfig'; export default function home() { const \[items, setitems] = usestate(\[]); useeffect(() => { const loaditems = async () => { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error('error retrieving items ', error); } }; loaditems(); }, \[]); return ( \<div style={{ padding '2rem' }}> \<h1>item list\</h1> \<ul> {items map((item) => ( \<li key={item id}> \<strong>{item get('title')}\</strong> {item get('description')} \</li> ))} \</ul> \</div> ); } ตัวเลือก b การใช้ rest หรือ graphql หากคุณไม่ต้องการใช้ parse sdk คุณสามารถจัดการการดำเนินการ crud ด้วย rest หรือ graphql ตัวอย่างเช่น การดึงรายการผ่าน rest const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('items fetched ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); รวมการเรียก api เหล่านี้เข้ากับส่วนประกอบ next js ของคุณตามต้องการ ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับ backend ของคุณ การดำเนินการควบคุมการเข้าถึง (acls) รักษาความปลอดภัยข้อมูลของคุณโดยการกำหนด acls ให้กับวัตถุ ตัวอย่างเช่น การสร้างรายการที่เจ้าของเท่านั้นที่สามารถเข้าถึงได้ async function addprivateitem(itemdetails, owner) { const items = parse object extend('items'); const newitem = new items(); newitem set('title', itemdetails title); newitem set('description', itemdetails description); // configure acl owner only read and write const acl = new parse acl(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); newitem setacl(acl); try { const saveditem = await newitem save(); console log('private item added ', saveditem); } catch (error) { console error('error adding item ', error); } } การกำหนดสิทธิ์ระดับคลาส (clps) ภายในแดชบอร์ด back4app ปรับ clps สำหรับแต่ละคอลเลกชันเพื่อจำกัดการเข้าถึงข้อมูลเฉพาะผู้ใช้ที่ได้รับอนุญาตเท่านั้น ขั้นตอนที่ 6 – การดำเนินการตรวจสอบสิทธิ์ผู้ใช้ การตั้งค่าบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ที่สร้างขึ้นใน parse สำหรับการตรวจสอบสิทธิ์ ในแอป next js ของคุณ จัดการการลงทะเบียนและการเข้าสู่ระบบตามที่แสดงด้านล่าง // pages/signup js import { usestate } from 'react'; import parse from ' /lib/parseconfig'; export default function signup() { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const registeruser = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration failed ' + error message); } }; return ( \<form onsubmit={registeruser}> \<input type="text" placeholder="username" value={username} onchange={(e) => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={(e) => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={(e) => setemail(e target value)} /> \<button type="submit">register\</button> \</form> ); } วิธีการที่คล้ายกันสามารถใช้สำหรับการเข้าสู่ระบบและการจัดการเซสชัน คุณยังสามารถเปิดใช้งานฟีเจอร์เพิ่มเติมเช่นการเข้าสู่ระบบผ่านโซเชียล การตรวจสอบอีเมล และการกู้คืนรหัสผ่านผ่านแดชบอร์ด back4app ขั้นตอนที่ 7 – การปรับใช้ frontend ของ next js ของคุณ ตัวเลือกการปรับใช้ของ back4app ช่วยให้คุณสามารถโฮสต์แอปพลิเคชัน next js ของคุณได้อย่างง่ายดาย ไม่ว่าจะผ่านการรวม github หรือการสร้าง docker 7 1 การสร้างเวอร์ชันการผลิตของคุณ เปิดไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล รันคำสั่ง build npm run build สิ่งนี้จะสร้าง next โฟลเดอร์ที่มีไฟล์ที่ถูกปรับให้เหมาะสมทั้งแบบสแตติกและแบบเซิร์ฟเวอร์ 7 2 การจัดระเบียบและอัปโหลดโค้ดของคุณ ที่เก็บของคุณควรมีไฟล์ต้นฉบับทั้งหมดสำหรับแอป next js ของคุณ โครงสร้างทั่วไปอาจเป็น basic crud app nextjs/ ├── node modules/ ├── pages/ │ ├── index js │ └── signup js ├── lib/ │ └── parseconfig js ├── public/ │ └── favicon ico ├── package json └── readme md ตัวอย่าง lib/parseconfig js // lib/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; ตัวอย่าง pages/index js (ดูโค้ดที่ให้ไว้ในขั้นตอนที่ 4) การส่งโค้ดของคุณไปยัง github เริ่มต้นรีโพซิทอรี git git init เพิ่มไฟล์ทั้งหมด git add คอมมิตการเปลี่ยนแปลงของคุณ git commit m "initial commit of next js crud application" สร้างรีโพซิทอรี github ตัวอย่างเช่น ตั้งชื่อว่า basic crud app nextjs ผลักดันโค้ดของคุณ git remote add origin https //github com/your username/basic crud app nextjs git git push u origin main 7 3 การรวมเข้ากับการปรับใช้เว็บ back4app เข้าถึงการปรับใช้เว็บ เข้าสู่ระบบแดชบอร์ด back4app ของคุณ ไปที่โครงการของคุณ และเลือกฟีเจอร์การปรับใช้เว็บ เชื่อมต่อบัญชี github ของคุณ ทำตามคำแนะนำเพื่อลิงก์ที่เก็บของคุณ เลือกที่เก็บและสาขาของคุณ เลือกที่เก็บ (เช่น basic crud app nextjs ) และสาขา (เช่น main ) ที่มีโค้ดของคุณ 7 4 การกำหนดค่าการตั้งค่าการปรับใช้ คำสั่งสร้าง หากที่เก็บของคุณไม่มีโฟลเดอร์ที่สร้างไว้ล่วงหน้า next ให้ระบุคำสั่ง (เช่น npm run build ) ไดเรกทอรีผลลัพธ์ ตั้งค่าไดเรกทอรีผลลัพธ์เป็น next เพื่อให้ back4app รู้ว่าไฟล์ที่คอมไพล์ของคุณอยู่ที่ไหน ตัวแปรสภาพแวดล้อม เพิ่มตัวแปรสภาพแวดล้อมที่จำเป็น เช่น คีย์ api 7 5 การบรรจุแอปพลิเคชัน next js ของคุณด้วย docker หากคุณชอบ docker สำหรับการปรับใช้ ให้รวม dockerfile ในที่เก็บของคุณ # use an official node runtime as the base image from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the source code copy \# build the next js application run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/ next /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] เลือกตัวเลือกการปรับใช้ docker ใน back4app เพื่อบรรจุและปรับใช้แอปพลิเคชันของคุณ 7 6 การเปิดตัวแอปพลิเคชันของคุณ ปรับใช้แอปของคุณ คลิกที่ ปรับใช้ ปุ่มใน back4app ติดตามกระบวนการสร้าง back4app จะดึงโค้ดของคุณ ดำเนินการคำสั่งสร้าง และปรับใช้แอปพลิเคชันของคุณ เข้าถึงแอปของคุณแบบสด เมื่อการปรับใช้เสร็จสิ้น จะมี url ที่ให้บริการแอปพลิเคชัน next js ของคุณ 7 7 การตรวจสอบการปรับใช้ของคุณ เยี่ยมชม url ที่ให้ไว้ เปิด url ในเบราว์เซอร์ของคุณ ทดสอบฟังก์ชันการทำงาน ตรวจสอบให้แน่ใจว่าหน้าของคุณโหลดได้อย่างถูกต้องและการดำเนินการ crud ทั้งหมดทำงาน แก้ไขปัญหาหากจำเป็น ใช้เครื่องมือพัฒนาเบราว์เซอร์และบันทึก back4app เพื่อตรวจสอบปัญหา ขั้นตอนที่ 8 – สรุปและขั้นตอนถัดไป ขอแสดงความยินดี! คุณได้สร้างแอปพลิเคชัน crud ที่แข็งแกร่งด้วย next js และ back4app สำเร็จแล้ว คุณได้กำหนดค่าโครงการของคุณ ออกแบบคอลเลกชันที่ปรับแต่ง และเชื่อมต่อส่วนหน้า next js ของคุณกับแบ็กเอนด์ที่ปลอดภัย ขั้นตอนถัดไป ปรับปรุงส่วนหน้า ขยายแอป next js ของคุณด้วยฟีเจอร์ขั้นสูง เช่น มุมมองรายละเอียด ฟังก์ชันการค้นหา หรือการอัปเดตแบบเรียลไทม์ เสริมแบ็กเอนด์ของคุณ สำรวจฟังก์ชันคลาวด์ การรวมระบบของบุคคลที่สาม หรือการควบคุมการเข้าถึงเพิ่มเติม เรียนรู้ต่อไป เยี่ยมชม เอกสาร back4app https //www back4app com/docs และแหล่งข้อมูล next js เพื่อการปรับแต่งและเพิ่มประสิทธิภาพเพิ่มเติม โดยการติดตามบทแนะนำนี้ คุณมีทักษะในการสร้างแอปพลิเคชัน crud ที่สามารถปรับขนาดได้และปลอดภัยโดยใช้ next js และ back4app ขอให้สนุกกับการเขียนโค้ด!