Next.js 14 offers exciting new features that give developers more control over performance, caching, and optimizations for web apps. In this post, we’ll explore how to harness the power of the next.config.mjs file, focusing on features like image optimization, progressive web app (PWA) support, styled-components, caching strategies, and serverless architecture.
Below is a breakdown of each section of the next.config.mjs to help you get the most out of your Next.js 14 project.
1. Styling with Styled-Components for Next.js
Next.js 14 integrates smoothly with styled-components, which allows you to write CSS directly within your JavaScript or TypeScript files. Here’s how you enable styled-components in the compiler:
compiler: {
styledComponents: true,
},
Why it matters:
Styled-components streamline component-based development, allowing CSS to be scoped to components. When used with Next.js, this configuration ensures better optimization during the build process, leading to smaller bundle sizes and improved performance.
2. Standalone Output for Simplified Deployments for Next.js
Next.js 14 introduces the Standalone output mode, allowing your application to bundle all required dependencies in a single package. This is highly beneficial for deploying on Docker or serverless platforms.
output: 'standalone',
Why it matters:
Standalone mode simplifies the deployment process by packaging everything your app needs in one bundle, making it easier to ship across environments without missing dependencies.
3. Optimized Image Handling for Performance for Next.js
Handling images is a crucial part of optimizing page load times. Next.js’s built-in image optimization tool now supports advanced formats like WebP and AVIF, both of which provide superior compression compared to traditional image formats.
images: {
domains: ['yourdomain.com', 'localhost'],
formats: ['image/avif', 'image/webp'],
minimumCacheTTL: 60,
deviceSizes: [640, 750, 1080, 1200, 1920],
},
Why it matters:
Modern image formats like AVIF and WebP help reduce bandwidth and improve loading times by providing efficient image compression without sacrificing quality. Additionally, configuring specific domains ensures secure and optimized loading for images from external sources.
4. Caching Strategies for API Routes and Static Assets for Next.js
Caching plays a pivotal role in improving performance. By caching API responses and static files, you can reduce server load and provide a snappy user experience.
async headers() {
return [
{
source: '/api/:path*',
headers: [
{ key: 'Cache-Control', value: 's-maxage=86400, stale-while-revalidate=59' },
],
},
{
source: '/public/images/static/:path*',
headers: [
{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' },
],
},
];
},
Why it matters:
Using caching headers for your API routes (like s-maxage) ensures that responses are cached for a day, while still allowing fresh data with stale-while-revalidate. For static assets, long-term caching ensures that frequently used files (like images) are delivered instantly, reducing load times and server strain.
5. Webpack Optimizations for Faster Builds for Next.js
For enhanced performance, we customize Webpack’s caching behavior. Specifically, we enable in-memory caching for faster production builds.
webpack: (config, { dev }) => {
if (config.cache && !dev) {
config.cache = { type: 'memory' };
}
return config;
},
Why it matters:
In-memory caching allows Webpack to reuse cached assets, resulting in faster builds and more efficient production releases.
6. Scroll Restoration and Server Actions: Enhancing UX for Next.js
Next.js 14 introduces experimental features like Scroll Restoration and Server Actions that can significantly improve user experience.
experimental: {
scrollRestoration: true,
serverActions: true,
},
Why it matters:
Scroll restoration ensures that when users navigate back to a previous page, their scroll position is preserved, improving usability. Meanwhile, server actions enhance the server-side capabilities of your app, allowing complex server-driven interactions without increasing client-side JavaScript.
7. Progressive Web App (PWA) Configuration for Next.js
PWAs combine the best of web and native apps, offering offline support and faster loading times. By enabling a custom service worker in Next.js, we can turn the app into a PWA.
pwa: {
dest: 'public',
runtimeCaching: [
{
urlPattern: /^https?.*/,
handler: 'NetworkFirst',
options: {
cacheName: 'https-cache',
expiration: { maxEntries: 200 },
},
},
],
},
Why it matters:
PWAs improve performance by caching resources and allowing apps to function offline. The NetworkFirst caching strategy ensures that your users always get the most up-to-date content when they have a network connection but can still access the app when offline.
8. Build-Time Optimizations: SWC Minification, CSS Optimization, and Compression for Next.js
Next.js 14 includes several build-time optimizations out of the box, like SWC minification, CSS optimization, and Brotli/gzip compression.
swcMinify: true,
optimizeCss: true,
compress: true,
Why it matters:
These optimizations reduce the overall bundle size, resulting in faster initial page loads, smaller data transfers, and reduced loading times for subsequent navigations. Enabling compression ensures that text-based assets are delivered in the most efficient format.
9. Rewrites for API Proxies for Next.js
To make your app more flexible and scalable, Next.js allows you to proxy API requests. Here’s an example of how to rewrite API calls to a different domain:
async rewrites() {
return [
{
source: '/api/:path*',
destination: 'https://cms.maximuseducation.com.au/:path*',
},
];
},
Why it matters:
Rewrites allow you to keep your frontend code decoupled from your backend services, making it easier to manage APIs hosted on different domains.
Conclusion
With the introduction of Next.js 14, developers have more tools at their disposal to build high-performance, scalable, and maintainable web applications. Whether it’s optimizing image handling, setting up custom caching strategies, or enabling PWA features, the next.config.mjs file plays a critical role in shaping how your app performs.
By configuring Next.js thoughtfully with the options outlined above, you can ensure that your app not only performs efficiently but also provides an exceptional user experience.
Github Link: https://github.com/sopu175/next-config-mjs
Form Validation With PHP Regular Expression, Send Mail With PHP Mailer, Form Validation With PHP Regular Expression, Send Mail With PHP Mailer“Solving Rest API CORS Issues in WordPress as a Headless CMS”, Front-end Development: A Foundation for Web Development Success, Understanding the Difference Between REM and PX: Choosing the Right Unit for Web Design
