# next.config.js in LunaTV: Complete Build Configuration Guide > Explore next.config.js in LunaTV. Learn how it controls standalone output, custom webpack rules, PWA integration, and image optimization for your Next.js build. - Repository: [MoonTechLab/LunaTV](https://github.com/MoonTechLab/LunaTV) - Tags: how-to-guide - Published: 2026-09-08 --- **The [`next.config.js`](https://github.com/MoonTechLab/LunaTV/blob/main/next.config.js) file in LunaTV serves as the central configuration hub for the Next.js framework, controlling standalone output generation, custom webpack rules for SVG handling, Progressive Web App integration, and image optimization settings.** The [`next.config.js`](https://github.com/MoonTechLab/LunaTV/blob/main/next.config.js) file in the MoonTechLab/LunaTV repository dictates how the Next.js application compiles, bundles, and behaves across different environments. Located at the project root, this configuration directly impacts the production build output, asset processing pipeline, and deployment architecture used by the LunaTV streaming platform. ## Standalone Output and Build Optimization The configuration prioritizes **self-contained deployments** through specific output settings that shape the final bundle structure. ### Self-Contained Deployment Architecture Setting `output: 'standalone'` on line 5 generates a standalone folder containing only the necessary files to run the application. This eliminates the need for a separate `node_modules` directory in production, significantly simplifying Docker containers and serverless deployments. The resulting package includes the compiled application code and a minimal set of production dependencies required at runtime. ### Code Quality and Linting Scope On line 7, the configuration limits **ESLint** checking to the source directory via `eslint.dirs: ['src']`. This restriction keeps continuous integration pipelines fast by avoiding linting of generated files, test suites, or third-party code, focusing validation strictly on the application logic that ships to users. ### Compiler Behavior Adjustments Lines 10 and 11 contain deliberate optimizations for the LunaTV codebase: - **`reactStrictMode: false`** disables React's strict mode double-rendering checks, preventing incompatibility issues with third-party video player libraries that may not conform to strict React patterns - **`swcMinify: false`** turns off the built-in SWC minifier, likely preserving debugging information or allowing integration with additional post-processing tools in the build pipeline ## Experimental Instrumentation for Production Monitoring Line 14 configures conditional performance tracking through `experimental.instrumentationHook`. The setting uses `NODE_ENV` to enable instrumentation hooks **only in production builds**, allowing LunaTV to collect runtime performance metrics and monitoring data without adding overhead during local development. This ensures development remains fast while production deployments provide observability into actual user sessions. ## Image Handling and Remote Patterns Lines 18 through 29 configure relaxed image handling rules critical for a streaming platform. Setting `images.unoptimized: true` bypasses Next.js's built-in image optimization service, while the `remotePatterns` array permits loading media from any external host. This configuration supports user-generated content and external media streams without the latency of server-side image processing, essential for LunaTV's video-centric user experience. ## Custom Webpack Configuration The `webpack` function spanning lines 32 to 68 implements sophisticated asset handling and runtime compatibility fixes through direct webpack manipulation. ### Dual-Mode SVG Imports The configuration replaces Next.js's default SVG handling with a **dual-mode approach** using `@svgr/webpack`: - **Component imports**: Standard `*.svg` imports transform into React components suitable for inline rendering and styling - **URL imports**: Appending `?url` to the import path (`*.svg?url`) returns the file path as a string for traditional image tags The webpack configuration explicitly excludes SVG files from the generic file loader to prevent conflicts between these two modes. ```typescript // Import as React component (inline, stylable) import Logo from '@/assets/logo.svg'; // Usage: // Import as URL string (img src compatible) import logoUrl from '@/assets/logo.svg?url'; // Usage: Luna TV logo ``` ### Node.js Module Polyfills Lines 61 through 66 provide **runtime fallbacks** for core Node.js modules including `net`, `tls`, and `crypto`. These polyfills prevent runtime errors in browser environments where these server-side modules aren't available, ensuring compatibility with libraries that may include universal (isomorphic) code expecting Node.js APIs. ## Progressive Web App Integration Lines 72 through 79 wrap the entire configuration with `next-pwa` (`withPWA`), enabling native-app-like capabilities. This integration: - Generates service worker files during the build process - Configures offline caching strategies for static assets - Conditionally registers the PWA based on `NODE_ENV`, disabling service workers in development to prevent caching interference during active coding When built with `pnpm build`, LunaTV becomes installable on supported devices and maintains functionality during network interruptions through strategic asset caching. ## Build Script Integration The [`next.config.js`](https://github.com/MoonTechLab/LunaTV/blob/main/next.config.js) directly supports the build scripts defined in [`package.json`](https://github.com/MoonTechLab/LunaTV/blob/main/package.json), specifically `pnpm dev` and `pnpm build`. Additionally, the configuration works alongside [`scripts/generate-manifest.js`](https://github.com/MoonTechLab/LunaTV/blob/main/scripts/generate-manifest.js), which runs before each build to produce the web app manifest required for PWA functionality. Any modification to the webpack rules or output settings immediately affects the compiled bundle that users receive when accessing LunaTV. ## Summary - **`output: 'standalone'`** creates self-contained deployment packages eliminating node_modules dependencies in production - **Dual-mode SVG handling** via custom webpack rules supports both React component imports and URL-based references using `@svgr/webpack` - **`images.unoptimized: true`** and permissive remote patterns allow external media streams without Next.js image processing overhead - **Node polyfills** for `net`, `tls`, and `crypto` ensure browser compatibility with isomorphic libraries - **`next-pwa`** integration generates service workers and offline capabilities, activated only in production builds - **Conditional instrumentation hooks** enable performance monitoring exclusively in production environments ## Frequently Asked Questions ### What does the standalone output option achieve in LunaTV's next.config.js? Setting `output: 'standalone'` on line 5 generates a self-contained `.next/standalone` folder that includes only the compiled application and essential production dependencies. This allows LunaTV to deploy using minimal Docker images or serverless functions without requiring the full `node_modules` directory, reducing deployment size and startup time significantly. ### How does LunaTV handle SVG imports differently from standard Next.js? According to the webpack configuration in lines 32-68, LunaTV implements a dual-mode system where standard `*.svg` imports become React components via `@svgr/webpack`, while `*.svg?url` imports return the file path as a string. This approach allows developers to use SVGs as both inline stylable components and traditional image sources within the same codebase. ### Why is image optimization disabled in the LunaTV configuration? Lines 18-29 set `images.unoptimized: true` and define permissive remote patterns because LunaTV handles user-generated and external streaming media that must load without Next.js's server-side optimization pipeline. Disabling optimization eliminates processing latency for remote video thumbnails and external media assets, ensuring faster load times for streaming content. ### When is the PWA service worker active in LunaTV? The `next-pwa` configuration on lines 72-79 uses the `disable` option tied to `NODE_ENV` to activate the service worker only in production builds. During development (`pnpm dev`), the PWA remains disabled to prevent aggressive caching from interfering with live code changes, while production builds (`pnpm build`) generate the full service worker for offline functionality.