Build Server Rendered React App with Next.js and Express

Why Combine Next.js with Express?

Server-side rendering has become essential for modern React applications, delivering faster initial page loads, improved SEO, and better user experiences. While Next.js provides robust built-in server capabilities, there are scenarios where combining it with Express.js unlocks additional flexibility and power.

The Case for Hybrid Architecture

Next.js includes API routes and server capabilities out of the box, but Express.js offers a more mature ecosystem for backend development. When you integrate Express with Next.js as middleware, you gain access to Express's extensive middleware ecosystem, simplified custom routing, and proven patterns for handling authentication, caching, and request processing.

The combination is particularly valuable for applications requiring complex backend logic alongside server-rendered frontend pages. Express handles authentication middleware, rate limiting, and custom API endpoints, while Next.js manages the React rendering pipeline and optimized page delivery.

Our web development team has extensive experience building hybrid applications that leverage the strengths of both frameworks, delivering optimal performance and user experiences.

Key Benefits:

• Access to Express's extensive middleware ecosystem
• Centralized API management in a single framework
• Complete control over request handling and response formatting
• Seamless integration with legacy systems

Setting Up Your Development Environment

Prerequisites

Before building your server-rendered application, ensure your environment meets the necessary requirements:

• Node.js Version: Node.js 20.x (Active LTS) or 22.x (Current LTS)
• Repository: Your Next.js application in a Git repository
• Build Verification: Confirm npm run build completes successfully locally

Installing Dependencies

Create a new Next.js application or navigate to your existing project:

npx create-next-app@latest my-ssr-app
cd my-ssr-app
npm install express

For TypeScript projects, install the appropriate type definitions:

npm install --save-dev @types/express

Creating the Express Server with Next.js Integration

Server Architecture Overview

The core of integrating Express with Next.js involves creating a custom server file that initializes both frameworks and routes requests appropriately. This approach replaces Next.js's default server with Express, giving you full control over the request lifecycle while maintaining Next.js's rendering capabilities.

Building Your Server File

Create a server.js file in your project root:

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
 const server = express();

 // Custom API endpoints go here
 server.get('/api/custom-endpoint', (req, res) => {
 res.json({ message: 'Custom Express endpoint' });
 });

 // Catch-all handler for Next.js pages
 server.all('*', (req, res) => {
 return handle(req, res);
 });

 const PORT = process.env.PORT || 3000;
 server.listen(PORT, (err) => {
 if (err) throw err;
 console.log(`> Ready on http://localhost:${PORT}`);
 });
});

This architecture allows Express to handle specific routes while delegating all other requests to Next.js for page rendering. The clean separation of concerns makes it easy to extend functionality as your application grows, whether you need to add new API endpoints, integrate third-party services, or implement custom authentication flows.

Implementing Advanced Middleware Patterns

Authentication Integration

One of the most powerful use cases for Express-Next.js integration is centralized authentication handling. By implementing authentication middleware in Express, you can protect pages and API routes consistently across your application:

const server = express();

// Authentication middleware
server.use(async (req, res, next) => {
 const token = req.headers.authorization?.split(' ')[1];
 
 if (token) {
 try {
 const user = await verifyToken(token);
 req.user = user;
 } catch (error) {
 req.user = null;
 }
 }
 
 next();
});

// Protected routes
server.get('/api/protected', (req, res) => {
 if (!req.user) {
 return res.status(401).json({ error: 'Unauthorized' });
 }
 res.json({ data: 'Protected content' });
});

Caching Strategies

Express middleware enables sophisticated caching strategies that reduce load on your Next.js renderer and backend services:

const server = express();

// Cache middleware for static content
server.use('/static', express.static('.next/static', {
 maxAge: '1d',
 immutable: true
}));

// API response caching
const cache = new Map();
server.get('/api/cached', (req, res) => {
 const cached = cache.get(req.originalUrl);
 if (cached && Date.now() - cached.timestamp < 60000) {
 return res.json(cached.data);
 }
 
 const data = fetchData();
 cache.set(req.originalUrl, { data, timestamp: Date.now() });
 res.json(data);
});

These patterns are essential for building scalable API integrations and ensuring optimal performance under load. When implementing caching in your production environment, consider using Redis or similar in-memory data stores for distributed caching across multiple server instances.

Optimizing Performance in Production

Build Configuration

For production deployments, configure Next.js to work optimally with your Express server:

/** @type {import('next').NextConfig} */
const nextConfig = {
 reactStrictMode: true,
 poweredByHeader: false,
 images: {
 domains: ['your-image-cdn.com'],
 },
 async headers() {
 return [
 {
 source: '/:path*',
 headers: [
 { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
 { key: 'X-Content-Type-Options', value: 'nosniff' },
 ],
 },
 ];
 },
};

module.exports = nextConfig;

Health Check Endpoints

Production deployments benefit from health check endpoints that enable zero-downtime deploys and infrastructure monitoring:

server.get('/health', (req, res) => {
 res.status(200).json({ status: 'healthy' });
});

server.get('/ready', async (req, res) => {
 const dbConnected = await checkDatabaseConnection();
 if (dbConnected) {
 res.status(200).json({ status: 'ready' });
 } else {
 res.status(503).json({ status: 'not ready' });
 }
});

Environment Variable Management

Separate build-time and runtime environment variables for secure configuration:

server.use(express.json());

// Runtime configuration endpoint
server.get('/api/config', (req, res) => {
 res.json({
 apiUrl: process.env.API_URL,
 // Never expose secret keys
 });
});

Deployment Strategies

Running in Production

For production deployments, update your package.json scripts:

{
 "scripts": {
 "dev": "node server.js",
 "build": "next build",
 "start": "NODE_ENV=production node server.js"
 }
}

Docker Containerization

Containerized deployments require careful configuration:

FROM node:20-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .
RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]

Monitoring and Logging

Implement comprehensive logging for production operations:

const logger = require('pino')();

server.use((req, res, next) => {
 const start = Date.now();
 res.on('finish', () => {
 logger.info({
 method: req.method,
 url: req.originalUrl,
 status: res.statusCode,
 duration: Date.now() - start,
 });
 });
 next();
});

For enterprise applications, consider implementing comprehensive monitoring solutions that integrate with your custom software development workflow for complete observability. Our team can help you design and implement robust monitoring pipelines that provide actionable insights into application performance.

Best Practices and Common Patterns

Error Handling

Implement robust error handling that maintains application stability:

server.use((err, req, res, next) => {
 logger.error(err);
 
 if (err.type === 'validation') {
 return res.status(400).json({ error: 'Invalid request data' });
 }
 
 res.status(500).json({ error: 'Internal server error' });
});

Rate Limiting

Protect your API endpoints from abuse:

const rateLimit = require('express-rate-limit');

const limiter = rateLimit({
 windowMs: 15 * 60 * 1000, // 15 minutes
 max: 100, // limit each IP to 100 requests per windowMs
 message: 'Too many requests from this IP',
});

server.use('/api/', limiter);

These patterns help ensure your application remains stable and performant even under high load or during unexpected error conditions. When building production-ready applications, following established web development best practices ensures your codebase remains maintainable and scalable over time.

Choosing the Right Architecture

When to Use Custom Express Server

The custom Express server approach is ideal for:

• Applications requiring complex backend logic
• Existing Express middleware integration needs
• Custom server-side processing requirements
• Integration with legacy backend systems

When to Use Standalone Next.js

For simpler applications, Next.js's built-in capabilities may be sufficient:

• Standard server-side rendering needs
• No complex backend requirements
• Preference for reduced operational complexity
• App Router provides robust SSR without custom server

The App Router in Next.js 13+ delivers excellent performance while reducing operational overhead. Consider your specific requirements carefully when choosing between these approaches, as each has its place in modern web development. Our AI automation services can help you determine the optimal architecture for your specific use case.

Sources

1. Next.js Custom Server Documentation - Official guidance on custom server setup using Express
2. Neuronimbus: Express with Next.js as Middleware - Comprehensive coverage of Express-Next.js integration patterns
3. Render: Deploy Next.js with SSR and API Routes - Production deployment strategies and configuration