สร้าง Web Application ด้วย Next.js

Next.js by Keptcode.com

สร้าง App ด้วย Next.js ในรูปแบบภาษา TypeScript

Path: [skeleton]

Terminal

# Create Project
$ npx create-next-app@latest --typescript

# What is your project named?: next-ts-app
# Would you like to use ESLint? › Yes
# Would you like to use Tailwind CSS? › Yes
# Would you like to use `src/` directory? › Yes
# Would you like to use App Router? (recommended) › Yes
# Would you like to customize the default import alias? : Yes
# What import alias would you like configured? › @/*

# ตั้งชื่อ "โปรเจกใหม่" เป็น "next-ts-app"
# คุณต้องการใช้ "ESLint" กับโครงการนี้ ใช่หรือไม่? : ใช่
# คุณต้องการใช้ "Tailwind CSS" กับโครงการนี้ ใช่หรือไม่? : ใช่
# คุณต้องการใช้ "src/" เป็น directory ของโครงการนี้ ใช่หรือไม่? : ใช่
# แนะนำใช้งาน App Router ของ Next.js: ใช่
# คุณต้องการ ปรับแต่ง alias เริ่มต้น ใช่หรือไม่? : ใช่
# คุณต้องการกำหนด "alias" (ค่านามแฝง) การนำเข้า ใช่หรือไม่?

ทดสอบ: รัน Website ด้วยคำสั่ง npm

# cd เข้าไปยังโฟลเดอร์ "next-ts-app"
$ cd next-ts-app

# รันทดสอบ "เว็บแอพ" ที่พึ่งสร้างเสร็จ
$ npm run dev

ตัวอย่าง: Website ที่พัฒนาจาก Next.js

http://localhost:3000/

ตัวอย่าง: Project Structure ที่ใช้งานจริง

Path: [skeleton]\next-ts-app

Language: Project Structure

├── public/
│   ├── assets/
│   │   └── images/
│   │       └── favicon.ico
│   ├── next.svg
│   └── vercel.svg
├── src/
│   ├── pages/
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   └── index.tsx
│   ├── components/
│   ├── styles/
│   │   └── globals.css
│   └── app/
│      └── layout.tsx
├── next-env.d.ts
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json