Deal Plus Tech - Next.js Website

Complete redesign of dealplustech.co.th website built with Next.js 14, TypeScript, and Tailwind CSS.

Features

• 🚀 Next.js 14 with App Router
• 💅 Tailwind CSS for styling
• 📝 Headless WordPress integration for Blog
• 🌐 Thai URL support for product categories
• 📱 Fully responsive design
• 🔍 SEO optimized

Getting Started

Prerequisites

• Node.js 18.17 or later
• npm or yarn

Installation

npm install

Environment Variables

Copy .env.example to .env.local and fill in your values:

cp .env.example .env.local

Required environment variables:

• NEXT_PUBLIC_WORDPRESS_API_URL - Your WordPress REST API URL (e.g., https://your-domain.com/wp-json/wp/v2)
• NEXT_PUBLIC_SITE_URL - Your production site URL
• NEXT_PUBLIC_PHONE - Contact phone number
• NEXT_PUBLIC_EMAIL - Contact email
• NEXT_PUBLIC_LINE_ID - LINE ID for contact
• NEXT_PUBLIC_FACEBOOK_URL - Facebook page URL
• NEXT_PUBLIC_COMPANY_ADDRESS - Company address

Development

npm run dev

Open http://localhost:3000 in your browser.

Production Build

npm run build
npm start

Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Homepage
│   ├── about-us/           # About page
│   ├── services/           # Services page
│   ├── portfolio/          # Portfolio page
│   ├── contact-us/         # Contact page
│   ├── all-projects/       # FAQ page
│   ├── product/            # Products listing
│   ├── blog/               # Blog pages
│   └── [[...slug]]/        # Product category catch-all
├── components/
│   ├── layout/             # Header, Footer, FloatingContact
│   ├── sections/           # Page sections
│   └── ui/                 # UI components
├── lib/
│   ├── utils.ts            # Utility functions
│   └── wordpress.ts        # WordPress API client
├── types/
│   └── index.ts            # TypeScript types
├── data/
│   └── site-config.ts      # Site configuration
└── styles/
    └── globals.css         # Global styles

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import your repository on Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

Other Platforms

The project can be deployed to any platform that supports Next.js:

• Netlify
• AWS Amplify
• Docker
• Self-hosted Node.js server

WordPress Integration

This site uses WordPress as a headless CMS for the Blog section.

Setup WordPress

1. Install WordPress on your server
2. Ensure the REST API is enabled (default in modern WordPress)
3. Set NEXT_PUBLIC_WORDPRESS_API_URL to your WordPress API endpoint
4. Create posts with featured images for best display

API Endpoints Used

• /posts - Blog posts
• /categories - Post categories
• /_embed - Embedded author and media data

License

Private project for Deal Plus Tech Co., Ltd.