forked from UKSOURCE/hailearning.edu.vn
feat: setup frontend Next.js project structure
This commit is contained in:
nguyenvanbao
218
README.md
218
README.md
@@ -1,36 +1,218 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
# VisaService - Website Dịch Vụ Visa
|
||||
|
||||
## Getting Started
|
||||
Website dịch vụ visa chuyên nghiệp được xây dựng với Next.js 15, TypeScript và Tailwind CSS. Hỗ trợ tư vấn visa cho hơn 50 quốc gia với tỷ lệ thành công 99%.
|
||||
|
||||
First, run the development server:
|
||||
## 🚀 Tính Năng
|
||||
|
||||
- **8 Trang Chính**: Trang chủ, Giới thiệu, Dịch vụ, Visa, Quốc gia, Bảng giá, Blog, Liên hệ
|
||||
- **Hệ Thống Đặt Lịch**: Đặt lịch tư vấn với chuyên gia
|
||||
- **Responsive Design**: Tối ưu cho mọi thiết bị
|
||||
- **JSON-Based Content**: Dễ dàng quản lý nội dung
|
||||
- **Interactive Components**: Form, accordion, filter, modal
|
||||
- **SEO Optimized**: Metadata và structure tối ưu
|
||||
|
||||
## 🛠️ Công Nghệ Sử Dụng
|
||||
|
||||
- **Framework**: Next.js 15 (App Router)
|
||||
- **Language**: TypeScript
|
||||
- **Styling**: Tailwind CSS
|
||||
- **Icons**: Emoji icons
|
||||
- **Deployment**: Docker support
|
||||
|
||||
## 📁 Cấu Trúc Thư Mục
|
||||
|
||||
```
|
||||
app/
|
||||
├── components/ # Shared components
|
||||
│ ├── Header.tsx # Navigation header
|
||||
│ └── Footer.tsx # Site footer
|
||||
├── about/ # Trang giới thiệu
|
||||
│ ├── about.json # Dữ liệu về công ty
|
||||
│ └── page.tsx # Component trang
|
||||
├── services/ # Trang dịch vụ
|
||||
│ ├── services.json # Dữ liệu dịch vụ
|
||||
│ └── page.tsx # Component trang
|
||||
├── visa/ # Trang visa
|
||||
│ ├── visa.json # Dữ liệu các loại visa
|
||||
│ └── page.tsx # Component trang
|
||||
├── countries/ # Trang quốc gia
|
||||
│ ├── countries.json # Dữ liệu quốc gia
|
||||
│ └── page.tsx # Component trang
|
||||
├── pricing/ # Trang bảng giá
|
||||
│ ├── pricing.json # Dữ liệu giá cả
|
||||
│ └── page.tsx # Component trang
|
||||
├── blog/ # Trang blog
|
||||
│ ├── blog.json # Dữ liệu bài viết
|
||||
│ └── page.tsx # Component trang
|
||||
├── contact/ # Trang liên hệ
|
||||
│ ├── contact.json # Thông tin liên hệ
|
||||
│ └── page.tsx # Component trang
|
||||
├── appointment/ # Trang đặt lịch
|
||||
│ ├── appointment.json # Dữ liệu booking
|
||||
│ └── page.tsx # Component trang
|
||||
├── layout.tsx # Root layout
|
||||
├── page.tsx # Trang chủ
|
||||
└── globals.css # Global styles
|
||||
```
|
||||
|
||||
## 🚀 Hướng Dẫn Chạy Dự Án
|
||||
|
||||
### Yêu Cầu Hệ Thống
|
||||
|
||||
- Node.js 18+
|
||||
- npm, yarn, hoặc pnpm
|
||||
|
||||
### Cài Đặt và Chạy
|
||||
|
||||
1. **Clone repository**
|
||||
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd visa-service-website
|
||||
```
|
||||
|
||||
2. **Cài đặt dependencies**
|
||||
|
||||
```bash
|
||||
npm install
|
||||
# hoặc
|
||||
yarn install
|
||||
# hoặc
|
||||
pnpm install
|
||||
```
|
||||
|
||||
3. **Chạy development server**
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
# hoặc
|
||||
yarn dev
|
||||
# or
|
||||
# hoặc
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
4. **Mở trình duyệt**
|
||||
Truy cập [http://localhost:3000](http://localhost:3000) để xem website
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
### Scripts Có Sẵn
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
```bash
|
||||
npm run dev # Chạy development server
|
||||
npm run build # Build production
|
||||
npm run start # Chạy production server
|
||||
npm run lint # Kiểm tra code style
|
||||
```
|
||||
|
||||
## Learn More
|
||||
## 🐳 Chạy Với Docker
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
### Development với Docker
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
```bash
|
||||
# Build và chạy container
|
||||
docker-compose up --build
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
# Chạy ở background
|
||||
docker-compose up -d
|
||||
|
||||
## Deploy on Vercel
|
||||
# Dừng container
|
||||
docker-compose down
|
||||
```
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
### Production với Docker
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
```bash
|
||||
# Build production image
|
||||
docker build -t visa-service .
|
||||
|
||||
# Chạy container
|
||||
docker run -p 3000:3000 visa-service
|
||||
```
|
||||
|
||||
## 📝 Tùy Chỉnh Nội Dung
|
||||
|
||||
### Cập Nhật Dữ Liệu
|
||||
|
||||
Mỗi trang có file JSON riêng chứa dữ liệu:
|
||||
|
||||
- `about/about.json` - Thông tin công ty
|
||||
- `services/services.json` - Danh sách dịch vụ
|
||||
- `visa/visa.json` - Các loại visa
|
||||
- `countries/countries.json` - Quốc gia hỗ trợ
|
||||
- `pricing/pricing.json` - Bảng giá dịch vụ
|
||||
- `blog/blog.json` - Bài viết blog
|
||||
- `contact/contact.json` - Thông tin liên hệ
|
||||
- `appointment/appointment.json` - Cấu hình đặt lịch
|
||||
|
||||
### Thêm Trang Mới
|
||||
|
||||
1. Tạo thư mục mới trong `app/`
|
||||
2. Tạo file `data.json` chứa dữ liệu
|
||||
3. Tạo file `page.tsx` với React component
|
||||
4. Cập nhật navigation trong `Header.tsx`
|
||||
|
||||
### Tùy Chỉnh Styling
|
||||
|
||||
- Sử dụng Tailwind CSS classes
|
||||
- Tùy chỉnh theme trong `tailwind.config.js`
|
||||
- Global styles trong `app/globals.css`
|
||||
|
||||
## 🌐 Deployment
|
||||
|
||||
### Vercel (Khuyến nghị)
|
||||
|
||||
1. Push code lên GitHub
|
||||
2. Kết nối repository với Vercel
|
||||
3. Deploy tự động
|
||||
|
||||
### Netlify
|
||||
|
||||
1. Build project: `npm run build`
|
||||
2. Upload thư mục `out/` lên Netlify
|
||||
|
||||
### VPS/Server
|
||||
|
||||
1. Build project: `npm run build`
|
||||
2. Chạy: `npm run start`
|
||||
3. Sử dụng PM2 hoặc Docker cho production
|
||||
|
||||
## 📱 Responsive Design
|
||||
|
||||
Website được tối ưu cho:
|
||||
|
||||
- **Mobile**: < 768px
|
||||
- **Tablet**: 768px - 1024px
|
||||
- **Desktop**: > 1024px
|
||||
|
||||
## 🔧 Cấu Hình Môi Trường
|
||||
|
||||
Tạo file `.env.local` (tùy chọn):
|
||||
|
||||
```env
|
||||
NEXT_PUBLIC_SITE_URL=http://localhost:3000
|
||||
NEXT_PUBLIC_CONTACT_EMAIL=info@visaservice.com
|
||||
NEXT_PUBLIC_PHONE=1900-1234
|
||||
```
|
||||
|
||||
## 🤝 Đóng Góp
|
||||
|
||||
1. Fork repository
|
||||
2. Tạo feature branch: `git checkout -b feature/new-feature`
|
||||
3. Commit changes: `git commit -m 'Add new feature'`
|
||||
4. Push branch: `git push origin feature/new-feature`
|
||||
5. Tạo Pull Request
|
||||
|
||||
## 📄 License
|
||||
|
||||
MIT License - xem file [LICENSE](LICENSE) để biết thêm chi tiết.
|
||||
|
||||
## 📞 Hỗ Trợ
|
||||
|
||||
- **Email**: info@visaservice.com
|
||||
- **Phone**: 1900 1234
|
||||
- **Website**: [visaservice.com](https://visaservice.com)
|
||||
|
||||
---
|
||||
|
||||
**Phát triển bởi**: VisaService Team
|
||||
**Phiên bản**: 1.0.0
|
||||
**Cập nhật**: January 2025
|
||||
|
||||
Reference in New Issue
Block a user