boychawin.com

How to install Next.js 14 แบบมีรายละเอียด

พา setup โปรเจกต์ Next.js 14 เบื้องต้น

Boy Chawin
Boy Chawin

Dec 7, 2023

การติดตั้ง Next.js ด้วยคำสั่ง npx create-next-app@latest เป็นการสร้างโปรเจกต์ Next.js ใหม่โดยใช้คำสั่ง interactive prompt ซึ่งให้คุณตอบคำถามเพื่อกำหนดการตั้งค่าต่างๆ ของโปรเจกต์ที่กำลังสร้าง ดังนี้:

npx ช่วยให้คุณสามารถรัน package โดยไม่ต้องติดตั้งใหม่ในเครื่องของคุณ มันจะช่วยในการดึง package ที่ต้องการมาใช้งานจาก npm registry ซึ่งมีการรวบรวมแพ็กเกจ JavaScript จำนวนมากที่ใช้กันอย่างแพร่หลาย

npx create-next-app@latest        
✔ What is your project named? … my-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
  1. ชื่อโปรเจกต์: my-nextjs-app คำถามเกี่ยวกับการตั้งชื่อของโปรเจกต์ที่คุณต้องการสร้าง

  2. การใช้ TypeScript: คุณเลือกที่จะใช้หรือไม่ใช้ TypeScript ในโปรเจกต์

  3. การใช้ ESLint: คุณเลือกที่จะใช้หรือไม่ใช้ ESLint เพื่อตรวจสอบคุณภาพของโค้ด

  4. การใช้ Tailwind CSS: คุณเลือกที่จะใช้หรือไม่ใช้ Tailwind CSS เพื่อการจัดรูปแบบเว็บไซต์

  5. การใช้ src/ directory: คุณเลือกที่จะใช้หรือไม่ใช้โครงสร้างโฟลเดอร์ src/ เพื่อจัดการไฟล์โค้ดในโปรเจกต์

  6. การใช้ App Router: คุณเลือกที่จะใช้หรือไม่ใช้ App Router เพื่อการจัดการเส้นทางของแอปพลิเคชัน

  7. การกำหนด Import Alias: คุณเลือกที่จะใช้หรือไม่ใช้การกำหนด Import Alias (@/*)

ต้องติดตั้ง Node.js และ npm ไว้ก่อนแล้ว

  • ติดตั้ง Node.js ถ้ายังไม่ได้ทำ

  • npm จะถูกติดตั้งพร้อมกับ Node.js

    # วิธีเช็คค่ามีการติดตั้งไว้แล้วหรือยัง
    node -v
    # v18.17.0
    

1. สร้างโปรเจกต์ Next.js ใหม่

npx create-next-app@latest my-nextjs-app

โดย my-nextjs-app คือชื่อโปรเจกต์ของคุณ

2. เข้าไปในโฟลเดอร์ของโปรเจกต์

cd my-nextjs-app

3. เริ่มต้นโปรเจกต์

npm run dev

หรือ

yarn dev

***กระซิบบอกว่าผมถนัดใช้ yarn มันสั้นดี อาจจะได้เห็นการใช้ yarn บ่อยๆนะ***

จากนั้นเปิดเว็บบราวเซอร์และไปที่ http://localhost:3000 เพื่อดูเว็บไซต์ Next.js ของคุณที่กำลังรันอยู่

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


ขอบคุณ ChatGPT ตัวช่วยที่ดีมาก แต่คนอ่านเชื่อเลยว่าเนื้อหาของเราจะดีกว่าแน่ๆ

ระบบจองห้อง/โต๊ะ PHP & MySQLi

ระบบจองห้อง, ระบบจัดการทรัพยากรสารสนเทศ

ระบบจองห้อง/โต๊ะ PHP & MySQLi

Nov 22, 2023

Web ระบบเบิก-จ่ายวัสดุ

ระบบเบิก-จ่ายวัสดุ อุปกรณ์และเครื่องเขียนสำนักงาน API PHP/MySQL

Web ระบบเบิก-จ่ายวัสดุ

Dec 5, 2023

How to install LINE (LIFF) ร่วมกับ React

การใช้ LINE Front-end Framework (LIFF) ร่วมกับ React และ TypeScript สำหรับการรับรองตัวตนและการเข้าถึงข้อมูล

How to install LINE (LIFF) ร่วมกับ React

Dec 6, 2023

เข้าสู่ระบบด้วย Credentials Provider In NextAuth.js Prisma EP.3

เข้าสู่ระบบโดยใช้ชื่อผู้ใช้และรหัสผ่าน ได้ง่ายๆ ด้วย provider credentials.

เข้าสู่ระบบด้วย Credentials Provider In NextAuth.js Prisma EP.3

Dec 6, 2023

How to install Prisma in Next.js 14

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

How to install Prisma in Next.js 14

Dec 7, 2023

[Free] Next.js Admin Dashboard Template with Tailwind CSS

Tailwind CSS-Powered Next.js Admin Dashboard Template

[Free] Next.js Admin Dashboard Template with Tailwind CSS

Dec 11, 2023

How to use CRUD with Prisma in Next.js

การใช้งาน CRUD (Create, Read, Update, Delete) กับ Prisma ใน Next.js

How to use CRUD with Prisma in Next.js

Dec 12, 2023

How to Install and using MAMP

ขั้นตอนในการติดตั้งและใช้งาน MAMP (Mac,Windows, Apache, MySQL, PHP)

How to Install and using MAMP

Dec 12, 2023

ระบบร้านอาหาร RESTFul API in Golang

Restaurant System API

ระบบร้านอาหาร  RESTFul API in Golang

Dec 18, 2023

สร้างตารางข้อมูล Excel โดย PhpSpreadsheet ด้วย PHP

สร้างตารางข้อมูลใน Excel โดยใช้ไลบรารี PhpSpreadsheet ซึ่งเป็นไลบรารีสำหรับจัดการไฟล์ Excel ด้วย PHP

สร้างตารางข้อมูล Excel โดย PhpSpreadsheet ด้วย PHP

Dec 21, 2023