AiAutoA

AiAutoA is a branded, read-only media showcase built with Next.js 14 for a Nextcloud backend. It connects to a single Nextcloud folder over WebDAV, keeps credentials server-side, and presents files through a clean green SaaS interface rather than the native Nextcloud UI.

Tech Stack

• Next.js 14 App Router
• TypeScript
• Tailwind CSS
• Server-side API routes
• WebDAV via fetch + Basic Auth

Features

• Homepage with featured content and recent files
• Gallery page with responsive grid layout
• File detail pages with inline previews
• Support for images, videos, and documents
• Folder navigation from a scoped Nextcloud root
• Search across the configured library scope
• Server-side metadata and download proxy routes
• Loading, empty, and error states

Required Environment Variables

Create .env.local from .env.example:

NEXTCLOUD_BASE_URL=https://nextcloud.example.com
NEXTCLOUD_USERNAME=your-username
NEXTCLOUD_APP_PASSWORD=your-app-password
NEXTCLOUD_ROOT_FOLDER=/AiAutoA/Public
ENABLE_SYSTEM_PAGE=false
AFFILIATE_URL=https://s.shopee.vn/4fs7jwXwtN

Setup

1. Install dependencies:

npm install

On Windows PowerShell with script restrictions, use:

cmd /c npm.cmd install

2. Create your local environment file:

copy .env.example .env.local

3. Update .env.local with a valid Nextcloud base URL, username, app password, and root folder.

4. Start the app:

npm run dev

Or on restricted PowerShell setups:

cmd /c npm.cmd run dev

5. Open http://localhost:3000.

Deploy On Render

This project can be deployed to Render as a Web Service.

1. Push this repo to GitHub.
2. In Render, create a new Web Service from the repo.
3. Render can read render.yaml automatically, or use:
   • Build Command: npm install && npm run build
   • Start Command: npm run start
4. Add these environment variables in Render:
   • NEXTCLOUD_BASE_URL
   • NEXTCLOUD_USERNAME
   • NEXTCLOUD_DAV_USER
   • NEXTCLOUD_APP_PASSWORD
   • NEXTCLOUD_ROOT_FOLDER
   • AFFILIATE_URL
   • ENABLE_SYSTEM_PAGE

Nextcloud Notes

• The app is read-only by design.
• Admins manage files in Nextcloud only.
• The frontend never receives Nextcloud credentials.
• All WebDAV requests are executed on the server.
• The configured root folder acts as the app boundary.
• AFFILIATE_URL is server-only and opens in a new tab at most once every 24 hours per browser when users download files.

API Routes

• GET /api/files Returns the current folder listing, filters, and search results.
• GET /api/files/[...path] Returns metadata for a specific file.
• GET /api/download/[...path] Streams a file from Nextcloud to the browser.
• GET /api/thumb/[...path] Returns a lightweight poster thumbnail for non-image assets.
• GET /api/health Returns sync health metadata when the system page is enabled.

Folder Structure

.
|-- app
|   |-- api
|   |   |-- download/[...path]/route.ts
|   |   `-- files
|   |       |-- [...path]/route.ts
|   |       `-- route.ts
|   |-- files/[...path]/page.tsx
|   |-- gallery/page.tsx
|   |-- error.tsx
|   |-- globals.css
|   |-- layout.tsx
|   |-- loading.tsx
|   |-- not-found.tsx
|   `-- page.tsx
|-- components
|   |-- app-shell.tsx
|   |-- breadcrumbs.tsx
|   |-- empty-state.tsx
|   |-- file-card.tsx
|   |-- file-preview.tsx
|   |-- hero-featured.tsx
|   |-- loading-skeleton.tsx
|   `-- search-form.tsx
|-- lib
|   |-- nextcloud.ts
|   |-- types.ts
|   `-- utils.ts
|-- .env.example
|-- next.config.mjs
|-- package.json
|-- postcss.config.mjs
|-- tailwind.config.ts
`-- tsconfig.json

Implementation Notes

• WebDAV listing uses PROPFIND and XML parsing on the server.
• System files such as dotfiles and common desktop metadata are filtered out.
• File previews use the download proxy in inline mode.
• The optional /system page and /api/health route stay hidden unless ENABLE_SYSTEM_PAGE=true.
• Search is scoped to the configured root folder and traverses nested folders with server-side limits to avoid runaway requests.