Advanced Next.js Techniques to Optimize Performance

Next.js is a powerful framework for building server‑rendered React applications, offering features such as automatic code splitting, static site generation, and server‑side rendering.

Tip: If you are new to Next.js, read the “Next.js Best Practices” article and follow the code examples.

In this article we present several advanced techniques to improve a Next.js app, including dynamic imports for third‑party libraries, publishing static assets to a CDN, server‑side caching of expensive data operations, Incremental Static Regeneration (ISR), and integrating a custom server for WebSocket support.

Dynamic Import of Third‑Party Libraries

Next.js automatically splits code per page, but third‑party libraries that are not designed for code splitting may still increase the initial bundle size. Use dynamic import to load them on demand.

import moment from 'moment';

Replace with:

const moment = dynamic(() => import('moment'));

This loads the moment library only when needed, reducing the initial bundle.

Publish Static Assets to a CDN

Although Next.js optimizes images and static files, serving them from a fast CDN further improves performance and reduces server load. Configure the CDN URL with the assetPrefix option in next.config.js :

module.exports = { 
  ... 
  assetPrefix: 'https://yourcdn.com/', 
  ... 
};

After this setting, all static asset URLs are prefixed with the CDN domain.

Server‑Side Caching for Expensive Data Operations

If your app performs heavy database queries or API calls, cache the results on the server using Next.js built‑in cache API.

import { cache } from 'next/cache';
async function getPosts() {
  const cachedPosts = await cache.get('posts');
  if (cachedPosts) { return cachedPosts; }
  const posts = await fetch('/api/posts');
  await cache.set('posts', posts);
  return posts;
}

This reduces load on databases and APIs while keeping data fresh.

Note: Cache only public data; avoid caching sensitive or authenticated information.

Incremental Static Regeneration (ISR) for Dynamic Pages

ISR lets you generate static pages that are periodically revalidated with fresh data. Define a revalidate interval in getStaticProps :

export async function getStaticProps() {
  const data = await fetch('https://example.com/api/data');
  const posts = await data.json();
  return {
    props: { posts },
    revalidate: 60 // regenerate every 60 seconds
  };
}

This keeps static pages fast while ensuring content stays up‑to‑date.

Custom Server for WebSocket Support

When you need WebSocket or custom authentication, create a custom server (e.g., server.js ) that runs alongside Next.js:

const http = require('http');
const WebSocket = require('ws');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const server = http.createServer((req, res) => {
  handle(req, res);
});
const wss = new WebSocket.Server({ server });
wss.on('connection', (ws) => {
  // handle websocket connection
});
server.listen(3000, () => {
  console.log('Ready on http://localhost:3000');
});

Using a custom server disables automatic static optimization and prevents deployment on Vercel.

Conclusion

By applying these advanced Next.js features—dynamic imports, CDN asset delivery, server‑side caching, ISR, and custom WebSocket servers—you can build fast, scalable, and performance‑optimized web applications.

Further tips and examples will be added over time; feel free to ask questions or leave comments.