ติดตั้ง Next.js และเริ่มโปรเจกต์แรกแบบง่าย ๆ

    Next.js คือเฟรมเวิร์กที่พัฒนาขึ้นจาก React.js ซึ่งได้รับความนิยมอย่างมากในช่วงหลัง เพราะมันช่วยให้การพัฒนาเว็บแอปพลิเคชันที่ต้องการฟีเจอร์ขั้นสูง เช่น การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR), Static Site Generation (SSG), และการจัดการ SEO ทำได้ง่ายขึ้น แต่หากคุณเพิ่งเริ่มต้นกับ Next.js อาจจะรู้สึกงง ๆ ว่าต้องทำอะไรบ้างเพื่อเริ่มต้นโปรเจกต์แรกของคุณ

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

ขั้นตอนที่ 1: ติดตั้ง Node.js และ npm

    ก่อนที่เราจะเริ่มโปรเจกต์ใน Next.js ได้ เราต้องติดตั้ง Node.js และ npm (Node Package Manager) ให้เรียบร้อยก่อน ถ้าคุณยังไม่ได้ติดตั้ง Node.js หรือไม่แน่ใจว่ามีแล้วหรือยัง สามารถตรวจสอบได้โดยการเปิด Terminal หรือ Command Prompt แล้วพิมพ์คำสั่งเหล่านี้:

node -v

และ

npm -v

หากมีการแสดงเวอร์ชันออกมาแสดงว่าคุณได้ติดตั้ง Node.js และ npm แล้ว แต่หากยังไม่มีก็สามารถดาวน์โหลด Node.js ได้ที่ https://nodejs.org เลือกเวอร์ชันที่แนะนำ (LTS) และติดตั้งตามขั้นตอน

เมื่อเสร็จแล้วลองตรวจสอบอีกครั้งว่ามีการติดตั้งสำเร็จแล้วหรือยัง

ขั้นตอนที่ 2: สร้างโปรเจกต์ใหม่ด้วย Next.js

เมื่อคุณติดตั้ง Node.js และ npm เรียบร้อยแล้ว ขั้นตอนต่อไปคือการสร้างโปรเจกต์ใหม่ด้วย Next.js ซึ่งเราสามารถใช้คำสั่ง create-next-app ในการสร้างโปรเจกต์ได้อย่างง่ายดาย

1.     เปิด Terminal หรือ Command Prompt
2.     ใช้คำสั่งนี้เพื่อสร้างโปรเจกต์ใหม่

npx create-next-app@latest ชื่อโปรเจกต์ของคุณ

ตัวอย่างเช่น หากคุณอยากตั้งชื่อโปรเจกต์ว่า my-first-next-project ก็พิมพ์คำสั่งนี้:

npx create-next-app@latest my-first-next-project

คำสั่งนี้จะดาวน์โหลดเทมเพลตพื้นฐานของ Next.js และติดตั้ง dependencies ที่จำเป็นทั้งหมดให้คุณ โดยไม่ต้องตั้งค่ามือเอง

ขั้นตอนที่ 3: เข้าไปในโฟลเดอร์โปรเจกต์

เมื่อการสร้างโปรเจกต์เสร็จสมบูรณ์ ให้เข้าไปในโฟลเดอร์ของโปรเจกต์ที่เพิ่งสร้างขึ้น โดยใช้คำสั่ง:

cd my-first-next-project

ขั้นตอนที่ 4: รันโปรเจกต์แรก

หลังจากที่คุณเข้าไปในโฟลเดอร์โปรเจกต์แล้ว คุณสามารถเริ่มรันโปรเจกต์ของคุณได้ทันที โดยใช้คำสั่งนี้:

npm run dev

คำสั่งนี้จะเริ่มเซิร์ฟเวอร์ในโหมดพัฒนา (development mode) และโปรเจกต์ของคุณจะรันที่ http://localhost:3000 ถ้าทุกอย่างทำงานถูกต้อง คุณสามารถเปิดเบราว์เซอร์แล้วพิมพ์ URL นี้เพื่อดูหน้าเว็บแรกของคุณ

ขั้นตอนที่ 5: ทำความเข้าใจโครงสร้างโปรเจกต์

เมื่อคุณสร้างโปรเจกต์ Next.js ใหม่แล้ว คุณจะเห็นโครงสร้างของโฟลเดอร์ที่ค่อนข้างง่ายและเข้าใจได้ไม่ยาก ลองมาดูกันว่าในโปรเจกต์ที่สร้างขึ้นมาจะมีโฟลเดอร์และไฟล์อะไรบ้าง:

• pages/: โฟลเดอร์นี้จะเก็บไฟล์ที่เป็นหน้าเว็บ (pages) ของโปรเจกต์ เช่น index.js คือหน้าแรกของเว็บไซต์
• public/: โฟลเดอร์นี้จะเก็บไฟล์ที่เป็นสาธารณะ เช่น รูปภาพ ไฟล์ .txt หรือไฟล์อื่น ๆ ที่สามารถเข้าถึงได้จาก URL
• styles/: โฟลเดอร์นี้จะเก็บไฟล์ CSS สำหรับตกแต่งหน้าเว็บ
• node_modules/: โฟลเดอร์ที่ npm สร้างขึ้นเพื่อเก็บ dependencies ที่จำเป็นสำหรับโปรเจกต์
• package.json: ไฟล์นี้จะเก็บข้อมูลเกี่ยวกับโปรเจกต์ เช่น dependencies, scripts, และ metadata อื่น ๆ

ในโฟลเดอร์ pages คุณจะเห็นไฟล์ index.js ซึ่งเป็นหน้าแรกของเว็บไซต์ คุณสามารถแก้ไขไฟล์นี้เพื่อเปลี่ยนแปลงเนื้อหาของหน้าแรกได้ทันที

ขั้นตอนที่ 6: แก้ไขหน้าแรกของคุณ

ลองเปิดไฟล์ pages/index.js และเปลี่ยนเนื้อหาภายในไฟล์นี้สักหน่อยเพื่อทดสอบการทำงานของ Next.js ตัวอย่างเช่น:

function HomePage() {
  return (
    <div>
      <h1>ยินดีต้อนรับสู่โปรเจกต์แรกของคุณใน Next.js!</h1>
      <p>นี่คือหน้าแรกของเว็บไซต์ที่คุณสร้างขึ้นมา</p>
    </div>
  );
}

export default HomePage;

จากนั้นบันทึกไฟล์และไปที่เบราว์เซอร์เพื่อรีเฟรชหน้า http://localhost:3000 คุณจะเห็นการเปลี่ยนแปลงที่คุณทำทันที

ขั้นตอนที่ 7: การเพิ่มหน้าใหม่

หนึ่งในคุณสมบัติที่ยอดเยี่ยมของ Next.js คือระบบ Routing ที่อัตโนมัติ เพียงแค่คุณสร้างไฟล์ใหม่ในโฟลเดอร์ pages หน้าใหม่ก็จะถูกสร้างขึ้นโดยอัตโนมัติ ลองสร้างไฟล์ใหม่ชื่อ about.js ในโฟลเดอร์ pages และใส่โค้ดนี้:

function AboutPage() {
  return (
    <div>
      <h1>เกี่ยวกับเรา</h1>
      <p>นี่คือหน้าที่เกี่ยวกับเว็บไซต์ของเรา</p>
    </div>
  );
}

export default AboutPage;

ตอนนี้คุณสามารถไปที่ http://localhost:3000/about เพื่อดูหน้า "เกี่ยวกับเรา" ที่คุณเพิ่งสร้างขึ้นได้เลย

ขั้นตอนที่ 8: การใช้งาน Link ใน Next.js

Next.js มีคอมโพเนนต์ที่เรียกว่า Link ซึ่งช่วยให้การทำ routing ภายในเว็บไซต์ง่ายขึ้นโดยไม่ต้องโหลดหน้าใหม่ทั้งหมด ลองใช้ Link เพื่อเพิ่มลิงก์ไปยังหน้า "เกี่ยวกับเรา" ที่คุณสร้างขึ้น:

เปิดไฟล์ index.js แล้วเพิ่มโค้ดนี้:

import Link from 'next/link';

function HomePage() {
  return (
    <div>
      <h1>ยินดีต้อนรับสู่โปรเจกต์แรกของคุณใน Next.js!</h1>
      <p><Link href="/about">ไปยังหน้าที่เกี่ยวกับเรา</Link></p>
    </div>
  );
}

export default HomePage;

ตอนนี้เมื่อคุณไปที่หน้าแรก คุณจะเห็นลิงก์ที่สามารถคลิกเพื่อไปยังหน้า "เกี่ยวกับเรา" ได้ทันที

สรุป

การเริ่มต้นกับ Next.js นั้นไม่ยากเลย! เราเพียงแค่ต้องติดตั้ง Node.js, สร้างโปรเจกต์ใหม่ด้วยคำสั่ง create-next-app, รันโปรเจกต์, แล้วเริ่มแก้ไขหน้าเว็บและเพิ่มหน้าใหม่ตามต้องการ Next.js ทำให้การพัฒนาเว็บแอปพลิเคชันง่ายขึ้นและมีเครื่องมือที่ครบครันสำหรับการทำงานในระดับสูง

ลองสร้างโปรเจกต์และทดสอบฟีเจอร์ต่าง ๆ ที่ Next.js มีให้ดูนะครับ รับรองว่าคุณจะสนุกกับการสร้างเว็บแอปพลิเคชันใน Next.js มากขึ้น!