สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
Next.js เป็นเฟรมเวิร์ก JavaScript ที่ใช้กับ React ซึ่งมีจุดเด่นที่การทำ Server-Side Rendering (SSR), Static Site Generation (SSG), และอีกมากมาย เพื่อช่วยให้การสร้างเว็บแอปพลิเคชันที่เร็วและปรับปรุงประสบการณ์ผู้ใช้ได้ดียิ่งขึ้น ในบทความนี้จะอธิบาย Next.js แบบง่ายๆ ผ่านการสร้างโปรเจกต์ตัวอย่างขั้นพื้นฐาน
ขั้นตอนที่ 1: การตั้งค่าสภาพแวดล้อม
ก่อนอื่น คุณต้องมี Node.js ติดตั้งอยู่ในเครื่องของคุณ เพื่อเริ่มต้นโปรเจกต์ Next.js ใหม่ คุณสามารถสร้างโฟลเดอร์ใหม่แล้วใช้คำสั่งต่อไปนี้ใน terminal:
bash
Copy code
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev
คำสั่ง create-next-app จะสร้างโปรเจกต์ Next.js ใหม่ที่ชื่อ my-next-app และ npm run dev จะเริ่มต้น development server ที่คุณสามารถเข้าถึงผ่าน browser ที่ http://localhost:3000
ขั้นตอนที่ 2: สร้างหน้าเว็บ
หลังจากตั้งค่าโปรเจกต์แล้ว คุณสามารถเริ่มสร้างหน้าเว็บได้ Next.js ใช้ระบบไฟล์เราทิ้งเพื่อเราท์ติ้ง ซึ่งหมายความว่าไฟล์ในโฟลเดอร์ pages จะกลายเป็นเส้นทางหน้าเว็บของคุณ ตัวอย่างเช่น เพื่อสร้างหน้า About คุณจะเพิ่มไฟล์ about.js ลงในโฟลเดอร์ pages ด้วยโค้ดดังนี้:
javascript
Copy code
export default function About() {
return
}
เมื่อคุณเข้าถึง http://localhost:3000/about ใน browser คุณจะเห็นหน้า About ที่คุณสร้างขึ้น
ขั้นตอนที่ 3: เพิ่มการนำทาง
การนำทางระหว่างหน้าต่างๆ ใน Next.js ทำได้ง่ายด้วยคอมโพเนนต์ Link จาก next/link ตัวอย่างเช่น หากต้องการเพิ่มลิงก์ไปยังหน้า About ในหน้าแรก (index.js) คุณสามารถทำได้ดังนี้:
javascript
Copy code
import Link from 'next/link';
export default function Home() {
return (
);
}
ขั้นตอนที่ 4: ใช้งาน CSS และส่วนประกอบ
Next.js รองรับ CSS Modules ซึ่งช่วยให้คุณสามารถใช้งาน CSS ได้อย่างเฉพาะเจาะจงกับส่วนประกอบต่างๆ โดยไม่ต้องกังวลเรื่องการชนของชื่อคลาส คุณสามารถสร้างไฟล์ CSS ในโฟลเดอร์ styles และนำเข้าไปใช้ในส่วนประกอบของคุณได้
ขั้นตอนที่ 5: การใช้งาน API Routes
Next.js ช่วยให้คุณสามารถสร้าง API endpoints ได้อย่างง่ายดายภายในโปรเจกต์เดียวกัน โดยการเพิ่มไฟล์ในโฟลเดอร์ pages/api ตัวอย่างเช่น สร้างไฟล์ hello.js ใน pages/api ด้วยโค้ดต่อไปนี้:
javascript
Copy code
export default function handler(req, res) {
res.status(200).json({ message: 'Hello World!' });
}
เมื่อคุณเข้าถึง http://localhost:3000/api/hello คุณจะได้รับ JSON ที่มีข้อความ "Hello World!"
การเริ่มต้นกับ Next.js นั้นง่ายและเป็นประตูสู่การพัฒนาเว็บแอปพลิเคชันที่ทันสมัยและเร็วขึ้น ด้วยคุณสมบัติอย่าง SSR และ SSG ทำให้ Next.js เป็นเฟรมเวิร์กที่เหมาะสำหรับการสร้างเว็บไซต์ที่มีประสิทธิภาพสูงและ SEO ที่ดี
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: next.js react javascript server-side_rendering static_site_generation node.js css_modules api_routes web_development frontend_development
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com