Next.js 14 App Router Custom Server with Express

Submitted on Dec 31, 2023, 12:20 a.m.

Vercel / Next .js no longer publish an example custom webserver for Next.js 14 App router.

There is a discussion here https://github.com/vercel/next.js/discussions/49326 - and a few 'hidden' Medium posts, but none that show a clear Express / Next.js 14 App router configuration. 

As with Next 13 and the Pages example that Vercel have published, if you create a custom server you will not be able to deploy to Vercel.

Below is the server which is a typescript file - server.ts placed below a src directory (but at the same level and outside the app directory.

Note that Next.js 14 built via Webpack is still a CommonJS application, and so we cannot use Node.js ESM top-level await.

1import dotenv from 'dotenv'
2import next from 'next'
3import nextBuild from 'next/dist/build'
4import path from 'path'
5
6// This will depend on whether your server.ts file and general
7// app setup is located below a src folder or not.
8dotenv.config({
9 path: path.resolve(__dirname, '../.env'),
10})
11
12import express from 'express'
13
14const app = express()
15const PORT = process.env.PORT || 3000
16
17const start = async (): Promise<void> => {
18 if (process.env.NEXT_BUILD) {
19 app.listen(PORT, async () => {
20 console.log(`Next.js is now building...`)
21 // @ts-expect-error
22 await nextBuild(path.join(__dirname, '..'))
23 process.exit()
24 })
25
26 return
27 }
28
29 const nextApp = next({
30 dev: process.env.NODE_ENV !== 'production',
31 })
32
33 const nextHandler = nextApp.getRequestHandler()
34
35 app.use((req, res) => nextHandler(req, res))
36
37 nextApp.prepare().then(() => {
38 console.log('Next.js started')
39
40 app.listen(PORT, async () => {
41 console.log(`Next.js App URL: ${process.env.NEXT_SERVER_URL}`)
42 })
43 })
44}
45
46start()

Hope this helps...