Kenhuang Academy
  • English

      • Next.js Custom Server

      Overview

      Although the built-in Next.js server is already powerful, sometimes you need a custom server to meet special requirements.

      Basic Setup

      Creating a Server

      // server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000

const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      const parsedUrl = parse(req.url, true)
      await handle(req, res, parsedUrl)
    } catch (err) {
      console.error('Error occurred handling', req.url, err)
      res.statusCode = 500
      res.end('internal server error')
    }
  }).listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://${hostname}:${port}`)
  })
})

      package.json

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

      Express Integration

      // server.js
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()

  // 自定义路由
  server.get('/api/custom', (req, res) => {
    res.json({ message: 'Custom API' })
  })

  // 所有其他请求交给 Next.js
  server.all('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

      WebSocket Support

      // server.js
const { createServer } = require('http')
const { Server } = require('socket.io')
const next = require('next')

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

app.prepare().then(() => {
  const server = createServer((req, res) => {
    handle(req, res)
  })

  const io = new Server(server)

  io.on('connection', (socket) => {
    console.log('Client connected')

    socket.on('message', (data) => {
      io.emit('message', data)
    })

    socket.on('disconnect', () => {
      console.log('Client disconnected')
    })
  })

  server.listen(3000)
})

      Middleware

      // server.js
const express = require('express')
const next = require('next')
const compression = require('compression')
const helmet = require('helmet')

const app = next({ dev })
const handle = app.getRequestHandler()

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

  // 安全头部
  server.use(helmet())

  // Gzip 压缩
  server.use(compression())

  // 日志
  server.use((req, res, next) => {
    console.log(`${req.method} ${req.url}`)
    next()
  })

  server.all('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000)
})

      Best Practices

      1. Error Handling

      server.use((err, req, res, next) => {
  console.error(err.stack)
  res.status(500).send('Something broke!')
})

      2. Performance Monitoring

      server.use((req, res, next) => {
  const start = Date.now()
  res.on('finish', () => {
    const duration = Date.now() - start
    console.log(`${req.method} ${req.url} - ${duration}ms`)
  })
  next()
})

      3. Limitations

      Using a custom server means you lose:

      • Automatic static optimization
      • Serverless functions
      • Certain Vercel features

      Previous Chapter: Next.js Vercel Deployment | Next Chapter: Next.js Environment Variables