ผมต้องสร้างโปรเจ็คนี้ยังไง เอาเริ่มตั้งแต่โหลด โปรแกรม ติดตั้ง ตั้งค่า ใช้งาน

168d ago

คู่มือสร้างโปรเจ็ค Smart Study Booth แบบ Step-by-Step

ขั้นตอนที่ 1: เตรียมเครื่องมือ

1.1 ติดตั้งโปรแกรมพื้นฐาน

# 1. ติดตั้ง Node.js (เวอร์ชัน 18 หรือใหม่กว่า)
# ดาวน์โหลดจาก: https://nodejs.org/
node --version  # ตรวจสอบเวอร์ชัน
npm --version   # ตรวจสอบ npm

# 2. ติดตั้ง Git
# ดาวน์โหลดจาก: https://git-scm.com/
git --version   # ตรวจสอบเวอร์ชัน

# 3. ติดตั้ง VS Code (แนะนำ)
# ดาวน์โหลดจาก: https://code.visualstudio.com/

1.2 ติดตั้ง VS Code Extensions (แนะนำ)

- ES7+ React/Redux/React-Native snippets
- Tailwind CSS IntelliSense
- TypeScript Importer
- Prettier - Code formatter
- Auto Rename Tag
- Bracket Pair Colorizer

ขั้นตอนที่ 2: สร้างโปรเจ็ค

2.1 สร้างโปรเจ็ค Next.js

# สร้างโปรเจ็คใหม่
npx create-next-app@latest smart-study-booth --typescript --tailwind --eslint --app

# เข้าไปในโฟลเดอร์โปรเจ็ค
cd smart-study-booth

# เปิดโปรเจ็คใน VS Code
code .

2.2 ติดตั้ง Dependencies

# ติดตั้ง shadcn/ui
npx shadcn@latest init

# ติดตั้ง components ที่จำเป็น
npx shadcn@latest add button card input label textarea select checkbox radio-group badge avatar tabs dialog alert progress separator table switch

# ติดตั้ง packages เพิ่มเติม
npm install lucide-react recharts next-auth @next-auth/prisma-adapter prisma @prisma/client

ขั้นตอนที่ 3: โครงสร้างโปรเจ็ค

3.1 สร้างโครงสร้างโฟลเดอร์

smart-study-booth/
├── app/
│   ├── admin/
│   │   └── page.tsx
│   ├── api/
│   │   ├── auth/
│   │   ├── bookings/
│   │   └── rooms/
│   ├── login/
│   │   └── page.tsx
│   ├── qr-scanner/
│   │   └── page.tsx
│   ├── review/
│   │   └── page.tsx
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── ui/
│   └── custom/
├── lib/
├── prisma/
├── public/
└── types/

3.2 คัดลอกโค้ดจาก v0

สร้างไฟล์ app/page.tsx:

# คัดลอกโค้ดจากไฟล์ app/page.tsx ที่ v0 สร้างให้

สร้างไฟล์อื่นๆ ตามลำดับ:

app/admin/page.tsx
app/qr-scanner/page.tsx
app/review/page.tsx
app/login/page.tsx

ขั้นตอนที่ 4: ตั้งค่า Database

4.1 ติดตั้ง Prisma

# สร้าง Prisma schema
npx prisma init

4.2 สร้าง Database Schema

แก้ไขไฟล์ prisma/schema.prisma:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  image     String?
  points    Int      @default(0)
  level     String   @default("Bronze")
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  
  bookings  Booking[]
  reviews   Review[]
  
  @@map("users")
}

model Room {
  id           String   @id @default(cuid())
  name         String   @unique
  floor        Int
  capacity     Int
  status       String   @default("active")
  amenities    String[]
  rating       Float    @default(0)
  totalBookings Int     @default(0)
  createdAt    DateTime @default(now())
  updatedAt    DateTime @updatedAt
  
  bookings     Booking[]
  reviews      Review[]
  
  @@map("rooms")
}

model Booking {
  id        String   @id @default(cuid())
  userId    String
  roomId    String
  date      DateTime
  startTime String
  endTime   String
  duration  Int
  purpose   String
  status    String   @default("upcoming")
  qrScanned Boolean  @default(false)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  
  user      User     @relation(fields: [userId], references: [id])
  room      Room     @relation(fields: [roomId], references: [id])
  review    Review?
  
  @@map("bookings")
}

model Review {
  id          String   @id @default(cuid())
  userId      String
  roomId      String
  bookingId   String   @unique
  cleanliness Int
  quietness   Int
  facilities  Int
  overall     Int
  comment     String?
  issues      String[]
  recommend   String
  createdAt   DateTime @default(now())
  
  user        User     @relation(fields: [userId], references: [id])
  room        Room     @relation(fields: [roomId], references: [id])
  booking     Booking  @relation(fields: [bookingId], references: [id])
  
  @@map("reviews")
}

4.3 ตั้งค่า Environment Variables

สร้างไฟล์ .env.local:

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/smart_study_booth"

# NextAuth
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key-here"

# Google OAuth
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

# LINE Notify (ถ้าต้องการ)
LINE_NOTIFY_TOKEN="your-line-notify-token"

ขั้นตอนที่ 5: ตั้งค่า Authentication

5.1 สร้างไฟล์ `lib/auth.ts`:

import { NextAuthOptions } from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { prisma } from "./prisma"

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  callbacks: {
    session: async ({ session, token }) => {
      if (session?.user?.email) {
        const user = await prisma.user.findUnique({
          where: { email: session.user.email },
        })
        if (user) {
          session.user.id = user.id
          session.user.points = user.points
          session.user.level = user.level
        }
      }
      return session
    },
  },
  pages: {
    signIn: "/login",
  },
}

5.2 สร้างไฟล์ `lib/prisma.ts`:

import { PrismaClient } from '@prisma/client'

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined
}

export const prisma = globalForPrisma.prisma ?? new PrismaClient()

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

5.3 สร้าง API Route `app/api/auth/[...nextauth]/route.ts`:

import NextAuth from "next-auth"
import { authOptions } from "@/lib/auth"

const handler = NextAuth(authOptions)

export { handler as GET, handler as POST }

ขั้นตอนที่ 6: รันโปรเจ็ค

6.1 ตั้งค่า Database

# สร้าง database migration
npx prisma migrate dev --name init

# สร้าง Prisma client
npx prisma generate

# เพิ่มข้อมูลตัวอย่าง (ถ้าต้องการ)
npx prisma db seed

6.2 รันโปรเจ็ค

# รัน development server
npm run dev

# เปิดเบราว์เซอร์ไปที่
# http://localhost:3000

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

7.1 สร้าง API Routes

สร้างไฟล์ app/api/rooms/route.ts:

import { NextRequest, NextResponse } from "next/server"
import { prisma } from "@/lib/prisma"

export async function GET() {
  try {
    const rooms = await prisma.room.findMany({
      include: {
        bookings: {
          where: {
            date: {
              gte: new Date(),
            },
          },
        },
      },
    })
    return NextResponse.json(rooms)
  } catch (error) {
    return NextResponse.json({ error: "Failed to fetch rooms" }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const room = await prisma.room.create({
      data: body,
    })
    return NextResponse.json(room)
  } catch (error) {
    return NextResponse.json({ error: "Failed to create room" }, { status: 500 })
  }
}

7.2 เพิ่ม Real-time Features

# ติดตั้ง Socket.io
npm install socket.io socket.io-client

ขั้นตอนที่ 8: Testing & Deployment

8.1 Testing

# รันการทดสอบ
npm run test

# ตรวจสอบ TypeScript
npm run type-check

# ตรวจสอบ ESLint
npm run lint

8.2 Build & Deploy

# Build โปรเจ็ค
npm run build

# Deploy ไป Vercel
npx vercel

# หรือ push ไป GitHub แล้วเชื่อมต่อกับ Vercel

ขั้นตอนถัดไป

เพิ่ม Database จริง (Supabase, PlanetScale)
ตั้งค่า Google OAuth
เพิ่ม LINE Notify
เพิ่ม QR Code Scanner
เพิ่ม Real-time Updates
เพิ่ม Mobile Responsive
เพิ่ม PWA Features

ต้องการความช่วยเหลือ?

หากมีปัญหาในขั้นตอนไหน สามารถถามได้เลย! ฉันจะช่วยแก้ไขปัญหาและอธิบายเพิ่มเติม

168d ago

1/1Next.js 15.4.3WebpackBuild ErrorModule not found: Can't resolve 'geist/font/sans'./app/layout.tsx (2:1)Module not found: Can't resolve 'geist/font/sans' 1 | import type { Metadata } from 'next' > 2 | import { GeistSans } from 'geist/font/sans' | ^ 3 | import { GeistMono } from 'geist/font/mono' 4 | import './globals.css' 5 | https://nextjs.org/docs/messages/module-not-found

168d ago

แก้ไขปัญหา Geist Font ใน Next.js 15

ปัญหานี้เกิดจากการที่ Next.js 15 ไม่ได้ติดตั้ง Geist font มาให้อัตโนมัติ มีวิธีแก้ไข 2 วิธี:

วิธีที่ 1: ติดตั้ง Geist Font (แนะนำ)

1.1 ติดตั้ง Geist Font Package

npm install geist

1.2 ตรวจสอบไฟล์ `app/layout.tsx`

import type { Metadata } from 'next'
import { GeistSans } from 'geist/font/sans'
import { GeistMono } from 'geist/font/mono'
import './globals.css'

export const metadata: Metadata = {
  title: 'Smart Study Booth',
  description: 'ระบบจองพื้นที่เรียนรู้อัจฉริยะ',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="th" className={`${GeistSans.variable} ${GeistMono.variable}`}>
      <body className={GeistSans.className}>
        {children}
      </body>
    </html>
  )
}

วิธีที่ 2: ใช้ Font อื่นแทน (ถ้าไม่ต้องการ Geist)

2.1 ใช้ Google Fonts (Inter)

แก้ไขไฟล์ app/layout.tsx:

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ 
  subsets: ['latin'],
  variable: '--font-inter',
})

export const metadata: Metadata = {
  title: 'Smart Study Booth',
  description: 'ระบบจองพื้นที่เรียนรู้อัจฉริยะ',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="th" className={inter.variable}>
      <body className={inter.className}>
        {children}
      </body>
    </html>
  )
}

2.2 ใช้ System Font

แก้ไขไฟล์ app/layout.tsx:

import type { Metadata } from 'next'
import './globals.css'

export const metadata: Metadata = {
  title: 'Smart Study Booth',
  description: 'ระบบจองพื้นที่เรียนรู้อัจฉริยะ',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="th">
      <body className="font-sans antialiased">
        {children}
      </body>
    </html>
  )
}

และแก้ไขไฟล์ tailwind.config.ts:

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          'Segoe UI',
          'Roboto',
          'Oxygen',
          'Ubuntu',
          'Cantarell',
          'Open Sans',
          'Helvetica Neue',
          'sans-serif',
        ],
      },
    },
  },
  plugins: [],
}

export default config

วิธีที่ 3: ใช้ Thai Font (สำหรับภาษาไทย)

3.1 ใช้ Noto Sans Thai

import type { Metadata } from 'next'
import { Noto_Sans_Thai } from 'next/font/google'
import './globals.css'

const notoSansThai = Noto_Sans_Thai({ 
  subsets: ['thai', 'latin'],
  variable: '--font-noto-sans-thai',
})

export const metadata: Metadata = {
  title: 'Smart Study Booth',
  description: 'ระบบจองพื้นที่เรียนรู้อัจฉริยะ',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="th" className={notoSansThai.variable}>
      <body className={notoSansThai.className}>
        {children}
      </body>
    </html>
  )
}

ตรวจสอบและแก้ไขเพิ่มเติม

ตรวจสอบ package.json

# ดูว่าติดตั้ง geist หรือยัง
npm list geist

# ถ้ายังไม่มี ให้ติดตั้ง
npm install geist

# หรือใช้ yarn
yarn add geist

ล้าง Cache และ Restart

# ล้าง Next.js cache
rm -rf .next

# ล้าง node_modules และติดตั้งใหม่
rm -rf node_modules
npm install

# รันโปรเจ็คใหม่
npm run dev

วิธีที่แนะนำสำหรับโปรเจ็คนี้

สำหรับโปรเจ็ค Smart Study Booth แนะนำให้ใช้ Noto Sans Thai เพราะ:

✅ รองรับภาษาไทยได้ดี
✅ ฟรีจาก Google Fonts
✅ อ่านง่าย เหมาะกับระบบการศึกษา
✅ ไม่ต้องติดตั้ง package เพิ่ม

ไฟล์ app/layout.tsx ที่แนะนำ:

import type { Metadata } from 'next'
import { Noto_Sans_Thai } from 'next/font/google'
import './globals.css'

const notoSansThai = Noto_Sans_Thai({ 
  subsets: ['thai', 'latin'],
  weight: ['300', '400', '500', '600', '700'],
  variable: '--font-noto-sans-thai',
})

export const metadata: Metadata = {
  title: 'Smart Study Booth',
  description: 'ระบบจองพื้นที่เรียนรู้อัจฉริยะ สำหรับนิสิตมหาวิทยาลัยมหาสารคาม',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="th" className={notoSansThai.variable}>
      <body className={`${notoSansThai.className} antialiased`}>
        {children}
      </body>
    </html>
  )
}

หลังจากแก้ไขแล้ว ให้รัน npm run dev ใหม่ ปัญหาควรหายไป! 🎉

168d ago

เขียน code ที่ต้องใช้ทั้งหมดใน โปรเจ็คให้หน่อย เอา แบบโหลดไปวางทับแล้วใช้ได้เลย

168d ago

คู่มือสร้างโปรเจ็ค Smart Study Booth แบบ Step-by-Step

ขั้นตอนที่ 1: เตรียมเครื่องมือ

1.1 ติดตั้งโปรแกรมพื้นฐาน

# 1. ติดตั้ง Node.js (เวอร์ชัน 18 หรือใหม่กว่า)
# ดาวน์โหลดจาก: https://nodejs.org/
node --version  # ตรวจสอบเวอร์ชัน
npm --version   # ตรวจสอบ npm

# 2. ติดตั้ง Git
# ดาวน์โหลดจาก: https://git-scm.com/
git --version   # ตรวจสอบเวอร์ชัน

# 3. ติดตั้ง VS Code (แนะนำ)
# ดาวน์โหลดจาก: https://code.visualstudio.com/

1.2 ติดตั้ง VS Code Extensions (แนะนำ)

- ES7+ React/Redux/React-Native snippets
- Tailwind CSS IntelliSense
- TypeScript Importer
- Prettier - Code formatter
- Auto Rename Tag
- Bracket Pair Colorizer

ขั้นตอนที่ 2: สร้างโปรเจ็ค

2.1 สร้างโปรเจ็ค Next.js

# สร้างโปรเจ็คใหม่
npx create-next-app@latest smart-study-booth --typescript --tailwind --eslint --app

# เข้าไปในโฟลเดอร์โปรเจ็ค
cd smart-study-booth

# เปิดโปรเจ็คใน VS Code
code .

2.2 ติดตั้ง Dependencies

# ติดตั้ง shadcn/ui
npx shadcn@latest init

# ติดตั้ง components ที่จำเป็น
npx shadcn@latest add button card input label textarea select checkbox radio-group badge avatar tabs dialog alert progress separator table switch

# ติดตั้ง packages เพิ่มเติม
npm install lucide-react recharts next-auth @next-auth/prisma-adapter prisma @prisma/client

ขั้นตอนที่ 3: โครงสร้างโปรเจ็ค

3.1 สร้างโครงสร้างโฟลเดอร์

smart-study-booth/
├── app/
│   ├── admin/
│   │   └── page.tsx
│   ├── api/
│   │   ├── auth/
│   │   ├── bookings/
│   │   └── rooms/
│   ├── login/
│   │   └── page.tsx
│   ├── qr-scanner/
│   │   └── page.tsx
│   ├── review/
│   │   └── page.tsx
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── ui/
│   └── custom/
├── lib/
├── prisma/
├── public/
└── types/

3.2 คัดลอกโค้ดจาก v0

สร้างไฟล์ app/page.tsx:

# คัดลอกโค้ดจากไฟล์ app/page.tsx ที่ v0 สร้างให้

สร้างไฟล์อื่นๆ ตามลำดับ:

app/admin/page.tsx
app/qr-scanner/page.tsx
app/review/page.tsx
app/login/page.tsx

ขั้นตอนที่ 4: ตั้งค่า Database

4.1 ติดตั้ง Prisma

# สร้าง Prisma schema
npx prisma init

4.2 สร้าง Database Schema

แก้ไขไฟล์ prisma/schema.prisma:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  image     String?
  points    Int      @default(0)
  level     String   @default("Bronze")
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  
  bookings  Booking[]
  reviews   Review[]
  
  @@map("users")
}

model Room {
  id           String   @id @default(cuid())
  name         String   @unique
  floor        Int
  capacity     Int
  status       String   @default("active")
  amenities    String[]
  rating       Float    @default(0)
  totalBookings Int     @default(0)
  createdAt    DateTime @default(now())
  updatedAt    DateTime @updatedAt
  
  bookings     Booking[]
  reviews      Review[]
  
  @@map("rooms")
}

model Booking {
  id        String   @id @default(cuid())
  userId    String
  roomId    String
  date      DateTime
  startTime String
  endTime   String
  duration  Int
  purpose   String
  status    String   @default("upcoming")
  qrScanned Boolean  @default(false)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  
  user      User     @relation(fields: [userId], references: [id])
  room      Room     @relation(fields: [roomId], references: [id])
  review    Review?
  
  @@map("bookings")
}

model Review {
  id          String   @id @default(cuid())
  userId      String
  roomId      String
  bookingId   String   @unique
  cleanliness Int
  quietness   Int
  facilities  Int
  overall     Int
  comment     String?
  issues      String[]
  recommend   String
  createdAt   DateTime @default(now())
  
  user        User     @relation(fields: [userId], references: [id])
  room        Room     @relation(fields: [roomId], references: [id])
  booking     Booking  @relation(fields: [bookingId], references: [id])
  
  @@map("reviews")
}

4.3 ตั้งค่า Environment Variables

สร้างไฟล์ .env.local:

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/smart_study_booth"

# NextAuth
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key-here"

# Google OAuth
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

# LINE Notify (ถ้าต้องการ)
LINE_NOTIFY_TOKEN="your-line-notify-token"

ขั้นตอนที่ 5: ตั้งค่า Authentication

5.1 สร้างไฟล์ `lib/auth.ts`:

import { NextAuthOptions } from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { prisma } from "./prisma"

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  callbacks: {
    session: async ({ session, token }) => {
      if (session?.user?.email) {
        const user = await prisma.user.findUnique({
          where: { email: session.user.email },
        })
        if (user) {
          session.user.id = user.id
          session.user.points = user.points
          session.user.level = user.level
        }
      }
      return session
    },
  },
  pages: {
    signIn: "/login",
  },
}

5.2 สร้างไฟล์ `lib/prisma.ts`:

import { PrismaClient } from '@prisma/client'

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined
}

export const prisma = globalForPrisma.prisma ?? new PrismaClient()

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

5.3 สร้าง API Route `app/api/auth/[...nextauth]/route.ts`:

import NextAuth from "next-auth"
import { authOptions } from "@/lib/auth"

const handler = NextAuth(authOptions)

export { handler as GET, handler as POST }

ขั้นตอนที่ 6: รันโปรเจ็ค

6.1 ตั้งค่า Database

# สร้าง database migration
npx prisma migrate dev --name init

# สร้าง Prisma client
npx prisma generate

# เพิ่มข้อมูลตัวอย่าง (ถ้าต้องการ)
npx prisma db seed

6.2 รันโปรเจ็ค

# รัน development server
npm run dev

# เปิดเบราว์เซอร์ไปที่
# http://localhost:3000

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

7.1 สร้าง API Routes

สร้างไฟล์ app/api/rooms/route.ts:

import { NextRequest, NextResponse } from "next/server"
import { prisma } from "@/lib/prisma"

export async function GET() {
  try {
    const rooms = await prisma.room.findMany({
      include: {
        bookings: {
          where: {
            date: {
              gte: new Date(),
            },
          },
        },
      },
    })
    return NextResponse.json(rooms)
  } catch (error) {
    return NextResponse.json({ error: "Failed to fetch rooms" }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const room = await prisma.room.create({
      data: body,
    })
    return NextResponse.json(room)
  } catch (error) {
    return NextResponse.json({ error: "Failed to create room" }, { status: 500 })
  }
}

7.2 เพิ่ม Real-time Features

# ติดตั้ง Socket.io
npm install socket.io socket.io-client

ขั้นตอนที่ 8: Testing & Deployment

8.1 Testing

# รันการทดสอบ
npm run test

# ตรวจสอบ TypeScript
npm run type-check

# ตรวจสอบ ESLint
npm run lint

8.2 Build & Deploy

# Build โปรเจ็ค
npm run build

# Deploy ไป Vercel
npx vercel

# หรือ push ไป GitHub แล้วเชื่อมต่อกับ Vercel

ขั้นตอนถัดไป

เพิ่ม Database จริง (Supabase, PlanetScale)
ตั้งค่า Google OAuth
เพิ่ม LINE Notify
เพิ่ม QR Code Scanner
เพิ่ม Real-time Updates
เพิ่ม Mobile Responsive
เพิ่ม PWA Features

ต้องการความช่วยเหลือ?

168d ago

แก้ไขปัญหา Geist Font ใน Next.js 15

วิธีที่ 1: ติดตั้ง Geist Font (แนะนำ)

1.1 ติดตั้ง Geist Font Package

npm install geist

1.2 ตรวจสอบไฟล์ `app/layout.tsx`

import type { Metadata } from 'next'
import { GeistSans } from 'geist/font/sans'
import { GeistMono } from 'geist/font/mono'
import './globals.css'

export const metadata: Metadata = {
  title: 'Smart Study Booth',
  description: 'ระบบจองพื้นที่เรียนรู้อัจฉริยะ',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="th" className={`${GeistSans.variable} ${GeistMono.variable}`}>
      <body className={GeistSans.className}>
        {children}
      </body>
    </html>
  )
}

วิธีที่ 2: ใช้ Font อื่นแทน (ถ้าไม่ต้องการ Geist)

2.1 ใช้ Google Fonts (Inter)

แก้ไขไฟล์ app/layout.tsx:

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ 
  subsets: ['latin'],
  variable: '--font-inter',
})

export const metadata: Metadata = {
  title: 'Smart Study Booth',
  description: 'ระบบจองพื้นที่เรียนรู้อัจฉริยะ',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="th" className={inter.variable}>
      <body className={inter.className}>
        {children}
      </body>
    </html>
  )
}

2.2 ใช้ System Font

แก้ไขไฟล์ app/layout.tsx:

import type { Metadata } from 'next'
import './globals.css'

export const metadata: Metadata = {
  title: 'Smart Study Booth',
  description: 'ระบบจองพื้นที่เรียนรู้อัจฉริยะ',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="th">
      <body className="font-sans antialiased">
        {children}
      </body>
    </html>
  )
}

และแก้ไขไฟล์ tailwind.config.ts:

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          'Segoe UI',
          'Roboto',
          'Oxygen',
          'Ubuntu',
          'Cantarell',
          'Open Sans',
          'Helvetica Neue',
          'sans-serif',
        ],
      },
    },
  },
  plugins: [],
}

export default config

วิธีที่ 3: ใช้ Thai Font (สำหรับภาษาไทย)

3.1 ใช้ Noto Sans Thai

import type { Metadata } from 'next'
import { Noto_Sans_Thai } from 'next/font/google'
import './globals.css'

const notoSansThai = Noto_Sans_Thai({ 
  subsets: ['thai', 'latin'],
  variable: '--font-noto-sans-thai',
})

export const metadata: Metadata = {
  title: 'Smart Study Booth',
  description: 'ระบบจองพื้นที่เรียนรู้อัจฉริยะ',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="th" className={notoSansThai.variable}>
      <body className={notoSansThai.className}>
        {children}
      </body>
    </html>
  )
}

ตรวจสอบและแก้ไขเพิ่มเติม

ตรวจสอบ package.json

# ดูว่าติดตั้ง geist หรือยัง
npm list geist

# ถ้ายังไม่มี ให้ติดตั้ง
npm install geist

# หรือใช้ yarn
yarn add geist

ล้าง Cache และ Restart

# ล้าง Next.js cache
rm -rf .next

# ล้าง node_modules และติดตั้งใหม่
rm -rf node_modules
npm install

# รันโปรเจ็คใหม่
npm run dev

วิธีที่แนะนำสำหรับโปรเจ็คนี้

สำหรับโปรเจ็ค Smart Study Booth แนะนำให้ใช้ Noto Sans Thai เพราะ:

✅ รองรับภาษาไทยได้ดี
✅ ฟรีจาก Google Fonts
✅ อ่านง่าย เหมาะกับระบบการศึกษา
✅ ไม่ต้องติดตั้ง package เพิ่ม

ไฟล์ app/layout.tsx ที่แนะนำ:

import type { Metadata } from 'next'
import { Noto_Sans_Thai } from 'next/font/google'
import './globals.css'

const notoSansThai = Noto_Sans_Thai({ 
  subsets: ['thai', 'latin'],
  weight: ['300', '400', '500', '600', '700'],
  variable: '--font-noto-sans-thai',
})

export const metadata: Metadata = {
  title: 'Smart Study Booth',
  description: 'ระบบจองพื้นที่เรียนรู้อัจฉริยะ สำหรับนิสิตมหาวิทยาลัยมหาสารคาม',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="th" className={notoSansThai.variable}>
      <body className={`${notoSansThai.className} antialiased`}>
        {children}
      </body>
    </html>
  )
}

หลังจากแก้ไขแล้ว ให้รัน npm run dev ใหม่ ปัญหาควรหายไป! 🎉

168d ago

คู่มือสร้างโปรเจ็ค Smart Study Booth แบบ Step-by-Step

ขั้นตอนที่ 1: เตรียมเครื่องมือ

1.1 ติดตั้งโปรแกรมพื้นฐาน

1.2 ติดตั้ง VS Code Extensions (แนะนำ)

ขั้นตอนที่ 2: สร้างโปรเจ็ค

2.1 สร้างโปรเจ็ค Next.js

2.2 ติดตั้ง Dependencies

ขั้นตอนที่ 3: โครงสร้างโปรเจ็ค

3.1 สร้างโครงสร้างโฟลเดอร์

3.2 คัดลอกโค้ดจาก v0

ขั้นตอนที่ 4: ตั้งค่า Database

4.1 ติดตั้ง Prisma

4.2 สร้าง Database Schema

4.3 ตั้งค่า Environment Variables

ขั้นตอนที่ 5: ตั้งค่า Authentication

5.1 สร้างไฟล์ lib/auth.ts:

5.2 สร้างไฟล์ lib/prisma.ts:

5.3 สร้าง API Route app/api/auth/[...nextauth]/route.ts:

ขั้นตอนที่ 6: รันโปรเจ็ค

6.1 ตั้งค่า Database

6.2 รันโปรเจ็ค

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

7.1 สร้าง API Routes

7.2 เพิ่ม Real-time Features

ขั้นตอนที่ 8: Testing & Deployment

8.1 Testing

8.2 Build & Deploy

ขั้นตอนถัดไป

ต้องการความช่วยเหลือ?

แก้ไขปัญหา Geist Font ใน Next.js 15

วิธีที่ 1: ติดตั้ง Geist Font (แนะนำ)

1.1 ติดตั้ง Geist Font Package

1.2 ตรวจสอบไฟล์ app/layout.tsx

วิธีที่ 2: ใช้ Font อื่นแทน (ถ้าไม่ต้องการ Geist)

2.1 ใช้ Google Fonts (Inter)

2.2 ใช้ System Font

วิธีที่ 3: ใช้ Thai Font (สำหรับภาษาไทย)

3.1 ใช้ Noto Sans Thai

ตรวจสอบและแก้ไขเพิ่มเติม

ตรวจสอบ package.json

ล้าง Cache และ Restart

วิธีที่แนะนำสำหรับโปรเจ็คนี้

คู่มือสร้างโปรเจ็ค Smart Study Booth แบบ Step-by-Step

ขั้นตอนที่ 1: เตรียมเครื่องมือ

1.1 ติดตั้งโปรแกรมพื้นฐาน

1.2 ติดตั้ง VS Code Extensions (แนะนำ)

ขั้นตอนที่ 2: สร้างโปรเจ็ค

2.1 สร้างโปรเจ็ค Next.js

2.2 ติดตั้ง Dependencies

ขั้นตอนที่ 3: โครงสร้างโปรเจ็ค

3.1 สร้างโครงสร้างโฟลเดอร์

3.2 คัดลอกโค้ดจาก v0

ขั้นตอนที่ 4: ตั้งค่า Database

4.1 ติดตั้ง Prisma

4.2 สร้าง Database Schema

4.3 ตั้งค่า Environment Variables

ขั้นตอนที่ 5: ตั้งค่า Authentication

5.1 สร้างไฟล์ lib/auth.ts:

5.2 สร้างไฟล์ lib/prisma.ts:

5.3 สร้าง API Route app/api/auth/[...nextauth]/route.ts:

ขั้นตอนที่ 6: รันโปรเจ็ค

6.1 ตั้งค่า Database

6.2 รันโปรเจ็ค

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

7.1 สร้าง API Routes

7.2 เพิ่ม Real-time Features

ขั้นตอนที่ 8: Testing & Deployment

8.1 Testing

8.2 Build & Deploy

ขั้นตอนถัดไป

ต้องการความช่วยเหลือ?

แก้ไขปัญหา Geist Font ใน Next.js 15

วิธีที่ 1: ติดตั้ง Geist Font (แนะนำ)

1.1 ติดตั้ง Geist Font Package

1.2 ตรวจสอบไฟล์ app/layout.tsx

วิธีที่ 2: ใช้ Font อื่นแทน (ถ้าไม่ต้องการ Geist)

2.1 ใช้ Google Fonts (Inter)

2.2 ใช้ System Font

วิธีที่ 3: ใช้ Thai Font (สำหรับภาษาไทย)

3.1 ใช้ Noto Sans Thai

5.1 สร้างไฟล์ `lib/auth.ts`:

5.2 สร้างไฟล์ `lib/prisma.ts`:

5.3 สร้าง API Route `app/api/auth/[...nextauth]/route.ts`:

1.2 ตรวจสอบไฟล์ `app/layout.tsx`

5.1 สร้างไฟล์ `lib/auth.ts`:

5.2 สร้างไฟล์ `lib/prisma.ts`:

5.3 สร้าง API Route `app/api/auth/[...nextauth]/route.ts`:

1.2 ตรวจสอบไฟล์ `app/layout.tsx`