This project explores building a luxury villa rental website using Next.js 15 with the App Router, emphasizing server-side rendering (SSR) and SEO optimization. The aim is to deliver a fast, responsive, and visually refined site that performs well in search engine rankings.
The second goal of this project is to explore how far AI can assist in building such a website, especially with tasks that I don't enjoy (design, writing, SEO, etc.).
- Design: Created the initial design system and UI components using shadcn/ui ✅
- Project Structure: Suggested the overall Next.js project structure ✅
- SEO Optimization: Provided guidelines for SEO best practices ✅
- Client-side email sending solutions: Recommended EmailJS for sending emails from the client side + integration tips ✅
- Email HTML template: Generated the HTML template for the contact form email ✅
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS v4
- UI Components: shadcn/ui
- Package Manager: Bun
- Deployment: Static for GitHub Pages using nextjs-github-pages
src/
├── app/ # Next.js App Router pages
│ ├── villa/ # Villa showcase pages
│ │ ├── _components/ # Reusable components for villa pages
│ │ └── page.tsx # Villa showcase homepage
│ ├── layout.tsx # Root layout with SEO metadata
│ ├── page.tsx # Homepage
│ └── globals.css # Global styles
├── components/ # Reusable React components
│ ├── ui/ # shadcn/ui components
│ └── Header.tsx # Navigation header
└── lib/ # Utility functions
└── utils.ts # Common utilities
First, install dependencies:
bun installThen, run the development server:
bun run devOpen http://localhost:3100 with your browser to see the result.
All rights reserved - Villa Morticcione