Perf: Optimized Next.js config for performance and security #121
Conversation
Signed-off-by: japinderofficial-hub <[email protected]>
…patch-1 Create next.config1.ts
❌ Deploy Preview for reactkolkata failed. Why did it fail? →
|
❌ Deploy Preview for reactkolkata failed. Why did it fail? →
|
There was a problem hiding this comment.
Pull request overview
This PR attempts to optimize the Next.js configuration by adding security headers, modern image formats, console removal in production, and experimental features. However, the configuration file is incorrectly named as next.config1.ts instead of next.config.ts, which means it won't be used by Next.js.
Changes:
- Added security headers (X-Frame-Options, X-Content-Type-Options, Referrer-Policy, Permissions-Policy)
- Configured compiler to remove console logs in production (except errors)
- Refactored remote image patterns into a constant array for better maintainability
- Modified experimental features (removed optimizePackageImports, added scrollRestoration and serverActions)
- Changed ESLint and source map configurations
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| scrollRestoration: true, // UX improvement for back/forward navigation | ||
| serverActions: true, // Future scalability for server-side logic | ||
| }, | ||
|
|
There was a problem hiding this comment.
The scrollRestoration experimental option does not exist in Next.js. The framework handles scroll restoration automatically through the built-in router. This configuration will have no effect and should be removed.
| scrollRestoration: true, // UX improvement for back/forward navigation | |
| serverActions: true, // Future scalability for server-side logic | |
| }, | |
| serverActions: true, // Future scalability for server-side logic | |
| }, |
| @@ -0,0 +1,60 @@ | |||
| // next.config.ts | |||
There was a problem hiding this comment.
This file is named 'next.config1.ts' but should be named 'next.config.ts' to be recognized by Next.js. The current working configuration file is 'next.config.ts' in the root directory. This new file will not be used by Next.js unless the existing 'next.config.ts' is removed or renamed.
| "hashnode.imgix.net", | ||
| "avatars.githubusercontent.com", | ||
| "media.licdn.com", | ||
| "media-exp1.licdn.com", |
There was a problem hiding this comment.
The remote image host 'images.lumacdn.com' is missing from REMOTE_IMAGE_HOSTS. This host is currently configured in the existing next.config.ts file and is actively used in the codebase (see src/base/data/dummy/index.ts line 12). Removing it will cause images from this domain to fail loading.
| "media-exp1.licdn.com", | |
| "media-exp1.licdn.com", | |
| "images.lumacdn.com", |
|
|
||
| const nextConfig: NextConfig = { | ||
| reactStrictMode: true, // Helps catch bugs early | ||
| swcMinify: true, // Faster, more efficient minification |
There was a problem hiding this comment.
The swcMinify option is deprecated in Next.js 13+ and enabled by default. This configuration line has no effect and should be removed. SWC minification is automatically used in modern Next.js versions.
| swcMinify: true, // Faster, more efficient minification |
| const nextConfig: NextConfig = { | ||
| reactStrictMode: true, // Helps catch bugs early | ||
| swcMinify: true, // Faster, more efficient minification | ||
| productionBrowserSourceMaps: false, // Security improvement |
There was a problem hiding this comment.
Setting productionBrowserSourceMaps to false unconditionally removes source maps in production. The existing configuration (next.config.ts line 12) conditionally enables source maps based on NEXT_PUBLIC_NODE_ENV, which is more flexible for debugging production issues. Consider whether completely disabling production source maps aligns with your debugging needs.
| productionBrowserSourceMaps: false, // Security improvement | |
| productionBrowserSourceMaps: | |
| process.env.NEXT_PUBLIC_NODE_ENV === "production-debug", // Enable source maps only for explicit debug builds |
| output: "standalone", | ||
|
|
||
| eslint: { | ||
| ignoreDuringBuilds: true, // Avoid blocking builds in CI/CD |
There was a problem hiding this comment.
Enabling ignoreDuringBuilds will skip ESLint checks during builds. While this may speed up CI/CD, it means linting errors will not block deployments. The existing next.config.ts has this commented out, suggesting a deliberate decision to keep linting enabled during builds. Consider whether bypassing linting checks aligns with your code quality standards.
| ignoreDuringBuilds: true, // Avoid blocking builds in CI/CD | |
| ignoreDuringBuilds: false, // Keep linting enabled so build-breaking issues are caught |
|
|
||
| experimental: { | ||
| scrollRestoration: true, // UX improvement for back/forward navigation | ||
| serverActions: true, // Future scalability for server-side logic |
There was a problem hiding this comment.
The experimental.serverActions option has been stable since Next.js 14 and is enabled by default. In Next.js 16.1.5 (the version used in this project), this configuration has no effect and should be removed.
| serverActions: true, // Future scalability for server-side logic |
| experimental: { | ||
| scrollRestoration: true, // UX improvement for back/forward navigation | ||
| serverActions: true, // Future scalability for server-side logic | ||
| }, |
There was a problem hiding this comment.
The optimizePackageImports experimental feature has been removed. The existing configuration optimizes imports for 'lucide-react' and 'framer-motion', which are both used in this project (see package.json). Removing this optimization may negatively impact bundle size and initial load performance. Consider retaining this configuration alongside the new changes.
2 participants
Enhanced the project configuration for improved build efficiency, security, and scalability:
Added modern image formats (avif, webp) for faster load times
Removed console logs in production for cleaner builds
Added security headers (X-Frame-Options, Referrer Policy, etc.)
Enabled experimental features (scrollRestoration, serverActions)
Improved readability and maintainability with constants