N

Nokfa Docs

framework-next.js
project
style
tool-git

Current: project

สารบัญ

ไม่มีชื่อบทความ

การเริ่มต้นโปรเจกต์ Next.js 14 ด้วย App Router และ JavaScript (ESM)

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

ใช้คำสั่งด้านล่างเพื่อสร้างโปรเจกต์ใหม่:

pnpm create next-app@latest

ตัวเลือกที่แนะนำระหว่างติดตั้ง:

  • Project name: time-clock-frontend
  • Would you like to use TypeScript? No (ใช้ JavaScript ธรรมดา)
  • Would you like to use ESLint? Yes
  • Would you like to use Tailwind CSS? Yes (ถ้ามี UI)
  • Would you like to use src/ directory? Yes
  • Would you like to use App Router? Yes
  • Would you like to customize the default import alias (@/*)? No

หลังสร้างเสร็จแล้ว เข้าโฟลเดอร์โปรเจกต์:

cd time-clock-frontend

2. ลบไฟล์ตัวอย่าง (Demo)

เพื่อล้างไฟล์ตัวอย่างออกให้สะอาด:

rm -rf src/app/(api|page.tsx|layout.tsx|favicon.ico|globals.css)

แล้วสร้างไฟล์ใหม่สำหรับเริ่มต้นใช้งาน เช่น:

mkdir -p src/app

สร้าง src/app/page.js:

export default function Home() {
  return <h1>Time Clock</h1>;
}

สร้าง src/app/layout.js:

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

สร้าง src/app/globals.css:

body {
  font-family: sans-serif;
}

3. ติดตั้งแพ็กเกจที่จำเป็น

ติดตั้งไลบรารีที่ต้องใช้เชื่อมต่อ Google Calendar และจัดการ env:

pnpm add googleapis@131 dotenv@16 clsx@latest

รายละเอียด:

  • googleapis: ใช้เชื่อมต่อ Google API (เช่น Calendar)
  • dotenv: โหลดตัวแปรจากไฟล์ .env
  • clsx: ช่วยรวม className (option สำหรับจัดการ UI)

4. สร้างตัวอย่างไฟล์ .env.local

สร้างไฟล์ .env.local ที่ root ของโปรเจกต์ เพื่อเก็บตัวแปรสำคัญ:

GOOGLE_PROJECT_ID=your-google-project-id
GOOGLE_CALENDAR_ID=your-calendar-id@group.calendar.google.com
GOOGLE_CLIENT_EMAIL=service-account-email@your-project-id.iam.gserviceaccount.com
GOOGLE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n...\n...\n-----END PRIVATE KEY-----\n"

หมายเหตุ: อย่าลืมแปะ \n แทนบรรทัดใหม่ใน GOOGLE_PRIVATE_KEY

5. โครงสร้าง Folder Tree (ระดับ 3 ลึก)

.
├── config/
│   └── google-service-account.json (ใส่ไฟล์ SA Key)
├── public/
│   └── (ใส่ assets เพิ่มเติมถ้ามี)
├── src/
│   ├── app/
│   │   ├── api/           (ไว้สำหรับ API Routes)
│   │   ├── layout.js      (Root Layout)
│   │   ├── page.js        (Home Page)
│   │   └── globals.css    (Global Styles)
│   ├── components/        (Components ต่าง ๆ)
│   ├── lib/               (Library เช่น Google API client)
│   └── utils/             (Helper Functions)
├── .env.local
├── next.config.js
└── package.json

6. next.config.js

ไฟล์ next.config.js สามารถใช้ค่าเริ่มต้นได้เลย ไม่ต้องแก้อะไรพิเศษในตอนนี้:

/** @type {import('next').NextConfig} */
const nextConfig = {};

module.exports = nextConfig;
  • App Router ของ Next.js v14 รองรับ ESM + Edge API โดยอัตโนมัติ
  • สามารถ deploy ขึ้น Vercel ได้ทันที

7. Tips สำหรับ macOS และ Windows

macOS:

  • ใช้ Terminal ธรรมดาได้ เช่น iTerm2, Terminal.app
  • กรณีพิมพ์ pnpm ไม่ได้ ให้ติดตั้งด้วย brew install pnpm

Windows:

  • ใช้ Git Bash, PowerShell หรือ Windows Terminal ได้
  • ถ้าเจอปัญหา path ของ pnpm หรือ node ให้ตรวจสอบ Environment Variables (ต้องมี path ของ Node.js)
  • ถ้าเจอปัญหา newline character ต่างกัน (CRLF vs LF) ตอน clone โปรเจกต์ ให้ตั้งค่า Git เป็น:
git config --global core.autocrlf input

หมายเหตุ: หลังขั้นตอนนี้ ระบบพร้อมสำหรับเชื่อมต่อ Google Calendar API ได้แล้วในบทถัดไป