Fix Docker build and Next.js metadata configuration

- Move themeColor and viewport to separate viewport export in layout.tsx
- Improve Docker build process with npm ci and proper dependency handling
- Add Docker-friendly Next.js configuration settings
- Resolve constructor error and metadata warnings

Dockerfile

@@ -8,21 +8,26 @@ WORKDIR /app
 
 # Copy package files
 COPY package.json package-lock.json* ./
-# Install dependencies but skip Prisma postinstall
+# Clean install dependencies
-RUN npm install --ignore-scripts
+RUN npm ci --only=production --ignore-scripts && npm cache clean --force
 
 # Rebuild the source code only when needed
 FROM base AS builder
 RUN apt-get update && apt-get install -y openssl ca-certificates && rm -rf /var/lib/apt/lists/*
 WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
+
+# Copy package files and install all dependencies (including dev)
+COPY package.json package-lock.json* ./
+RUN npm ci --ignore-scripts
+
+# Copy source code
 COPY . .
 
-# Generate Prisma Client for the correct platform (Debian)
+# Generate Prisma Client for the correct platform
-RUN npx prisma generate --generator client
+RUN npx prisma generate
 
 # Build Next.js application
-ENV NEXT_TELEMETRY_DISABLED 1
+ENV NEXT_TELEMETRY_DISABLED=1
 ENV AUTH_TRUST_HOST=true
 RUN npm run build
 

app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from 'next'
+import type { Metadata, Viewport } from 'next'
 import './globals.css'
 import ServiceWorkerRegistration from '@/components/ServiceWorkerRegistration'
 import OfflineIndicator from '@/components/OfflineIndicator'
@@ -9,14 +9,6 @@ export const metadata: Metadata = {
   title: 'Ultimate Lists',
   description: 'The ultimate todo list app with advanced task management',
   manifest: '/manifest.json',
-  themeColor: '#3B82F6',
-  viewport: {
-    width: 'device-width',
-    initialScale: 1,
-    maximumScale: 1,
-    userScalable: false,
-    viewportFit: 'cover',
-  },
   appleWebApp: {
     capable: true,
     statusBarStyle: 'black-translucent',
@@ -39,6 +31,15 @@ export const metadata: Metadata = {
   },
 }
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  viewportFit: 'cover',
+  themeColor: '#3B82F6',
+}
+
 export default function RootLayout({
   children,
 }: {

next.config.js

@@ -14,11 +14,15 @@ const nextConfig = {
   // Optimize images
   images: {
     formats: ['image/avif', 'image/webp'],
+    unoptimized: process.env.NODE_ENV === 'production',
   },
   // Enable compression
   compress: true,
   // Production source maps (smaller)
   productionBrowserSourceMaps: false,
+  // Ensure proper handling in Docker
+  trailingSlash: false,
+  poweredByHeader: false,
 }
 
 module.exports = nextConfig